>> All right. Say the word when we have gone. >> Okay. >> Hello, everyone! Hey. Welcome to a11ynyc, New York City's one and only accessible meetup. This is our third year going. In fact, I think it's our third anniversary. >> It is! >> Thank you! (applause) >> And so a couple logistical notes. Bathrooms -- you walked by on your way in. They are gender neutral. There are locks on the doors for more privacy. There's also a wheelchair accessible bathroom on the 9th floor. The keys are hanging right outside the bathroom entrance over here. Also, thank you to Thoughtbot for hosting us today. Yay, Thoughtbot. (inaudible) so if you're interested, you can talk to me. I used to work here. I no longer work here. But I can still tell you about it. So they've been really generous in hosting the space. Also, SSB BART Group has been an ongoing sponsor of the event. And we want to thank them for their continuous support. So thank you also to them. (applause) And on that note... Oh... I wanted to say thank you also to Joly, over here, with the Internet Society of New York, and he has been doing our streaming, which, by the way, we're doing right now. In case you're wondering why he was setting up. So hello to everyone on the stream. >> Mirabai. MIRABAI: Hi! >> Yes, Mirabai. Mirabai is doing the -- Mirabai is doing the captions remotely. She works with White Coat Captioning. She's amazing. They're amazing. If you're doing tech conferences, if you're doing talks, if you want to have any sort of meetings transcribed, they're the way to go. So I highly recommend it. And I want to thank Thomas over here, another co-organizer, Shawn, Cameron -- we're here to help. So if you need anything, holler. And with that, I'll introduce Shawn Lauriat, and take it away, Shawn. >> Hi, everybody. So here I was, thinking that we didn't have a spot open for today, and it was January 3rd, everybody has the holidays going on, and so I might as well try out a talk I had written, and now we have a full room. So no pressure. This is how learning American Sign Language improved my alt text. I put in a slide to introduce myself. I work on Google, I work on accessibility for Google docs and Drive. I lead a team in Chelsea working on that. I'm also a co-organizer here. There are some caveats here. I'm not deaf, I'm not a user of alt text, I'm not a linguist, philologist, artist, photographer, writer, or audio describer. I just like making things accessible to everybody, and that includes when I just post stupid pictures on Facebook and Twitter and stuff. This is also a rare presentation in which I will be reading all the text that's on the slides because it's important. I'm gonna be presenting a bunch of pictures but also reading the texts so that the people who can't see the screen can get the captions. Because if I just put it up and say read this for three minutes, it gets really boring. So what does alt text do? It's short for alternative text and it was introduced in html so that if you have an image tag you can have alt=this and in the quotes you can have some text. So if the image doesn't appear for whatever reason -- it might be that at the time the connection was slow, it would drop off and wouldn't load, could be that you were using a screen reader and you couldn't see the image itself, and this text would show up instead of that image. So as an example of that, this is alt text. A large hard cover book, with yellowing Brailled pages sits in a glass case below a sign. Pretty short. It's a little bit long for alt text, but it's something that if it was in an article or something like that, and there was an accented picture, you would include text like this so that somebody would know what it is. This is more of a description or a caption. So it has the same preface that I just read but it actually has the text on the sign. A summary of the history of France, Paris, royal Institute for blind youth, 1837. This is one of the rarest books in the collection. It's the first full length book published in Braille in Paris where Louis Braille studied and taught. It's quite possible that Louis Braille could have handled this book. This is from the American foundation for the blind's Helen Keller archives, which coincidentally is two blocks that way. They have a huge museum and archive. I recommend checking it out. It's awesome. And this is the picture. So pretty straightforward. The alt text is just -- okay. The important thing that's in this picture is the book itself. It's below a sign that's describing the picture. So I'm gonna talk about basic structure of visual description in ASL first and then we'll move on from there. So when you're describing things in ASL, you have kind of a restricted area that you're working with, because you are speaking in an inherently visual language. You're using your hands in kind of this space. For me, it's a little bit wider than shoulder length, kind of a cube about that dimension. So if you start with a description of, say, from how to get from here to where I live, and you start by saying -- okay, well, you go out the front door, and here's Broadway, and then you hang a right, and you go that way -- the description is essentially at 1/100th or 1/10th scale. The description is nearly a mile long because it's so big. You have to get it down to the point where you can talk about everything. So you start with Manhattan itself. Here is Manhattan. And you have the entire island. I leave up here. You paint a picture from the very largest granularity and then narrow it down from there. So like I said, start big, setting the stage. When talking about pictures specifically, you want to get into -- okay, what is the style that this image is in? If you're describing a painting, you need to convey that kind of style information along with it. Because if it's Pointillism, that's going to be important. If it's huge brush strokes that are really thick with the paint coming off of the actual painting itself, that's really important. That's just the style. That's not actually the content that you're getting to. And then going into detail, but selectively. And this is important, because otherwise you can literally lose the forest for the trees. Because if you're describing a mountain with a forest on it, you don't want to go -- mountain, here it is, and on the side there's a tree there and there and there and there and there. You just go -- Psssh. Trees. And include an interpretation when it's valuable. And we'll talk a little bit more about each of these. But above all, keep it concise. Because otherwise, you'll be describing things for so long that the people that you're actually conversing with will have forgotten half the crap that you covered already. This is basic structure of visual description for blind folks, which I've -- adapted is a really soft word from the art beyond sight's guide to description. I'll tweet out a link later. This page is super cool. It's 16 different categories of things. They have different topics along with examples and descriptions and guidelines for each of the different steps. And I've condensed basically 12 of those down to 3. So the first subject form, color, orientation, medium, and style -- and then use specific words and provide vivid details... And echoes. (sound echoing) (laughter) I'm gonna keep talking until things mellow down a bit. How is that? All right. And then explain intangible concepts with analogies. And this is also something we'll get into, in a little more detail later on. But above all, keep it concise. Because, again, if you have a description that goes on and on and on and on and on, if somebody is reading that or hearing it from a screen reader, even though most screen reader users will have the speed cranked up, by the time they get to the end of it, they're bored and don't want to listen to it anymore. So it's an interesting visit. The art beyond sight, as you can tell from the name, is really focused on art specifically. So they have things about creating tactile displays and things like that. That's not why we're here today. So here's an example. The room may look familiar. I'll read the alt text in a second. I took this picture from right over there where Thomas is sitting. Just like that. Pointed right out these windows. It's dark now, so the view is a bit different. So the alt text -- this is something that I tweeted during one of our previous meetups. The alt text that I added is Pedro standing and presenting while the attendees at the conference table listen and look on. Views out the window of the sunset hitting the financial district to the South. Now, the actual context in my setting the stage for this -- I'm gonna do this... Google Slides has a laser pointer and I love this thing. (laughter) I didn't think I would love it, but I use it every time. It's great. So the actual setting of the stage is the entire first sentence, because the thing I actually wanted to do was highlight this amazing space that Thoughtbot lets us use. So the context of this picture is actually Pedro standing and presenting while the attendees at the conference table listen and look on. The actual point of this photo is to brag about the view of the sunset hitting the financial district to the South. Okay. Laser pointer off. Okay. So getting into each of the different parts, kind of step by step -- part one, start big and set the stage. So there's a whole bunch of different aspects of this that you can incorporate. This list is not comprehensive. This is just some ideas. So the time and place. Is it inside or outside? Environment and surroundings. Or just any other general attributes that might be helpful. So for the picture that I have behind here -- which is partially hidden, but it's all right, because there's alt text -- a crowded David Geffen Hall is viewed from the highest center balcony while the New York Philharmonic sets the stage for Beethoven's 9th symphony. So the setting of the stage was actually a place, as well as the time, as well as the context. So the context itself is they're setting up the stage for Beethoven's 9th symphony within David Geffen Hall at Lincoln Center. That tells you where you are and it tells you the general state of the actual room itself. So you don't have to go into -- oh, there's an audience and they're sitting down. Because you can infer that. You don't have to go into like -- oh, this is three balconies up, because nobody cares. The highest center balcony gives you the perspective. Which is important. Because I am way up in the nose bleeds and I'm looking way down at the stage and I'm seeing the actual detail, and the part that I found important, that I wanted to highlight, is that the stage is completely filling up with musicians and chorus. All of these pictures, by the way, I took, because I didn't want to mess with copyright and stuff. And it's just things that I posted to, like, Facebook and Twitter and stuff like that, because then I didn't have to write new alt text for other things. Okay. Step two. Go into vivid but selective detail. So this can be a bit of a challenge, but it can also be kind of fun. So the key questions to ask are: What do you want to highlight? And what distracts from that? Because you want to focus on things that it's actually going to enhance the overall experience of the image. What is the purpose? Why did you do this? And you want to avoid details that are just distractions that didn't really matter in the first place. So for this I wrote looking South on the Hudson River from the George Washington bridge under a rainy sky. Two kayakers sit on the chilly water and one of them even brought an umbrella. It's really hard to make out, but right here... There's a guy sitting there, with an umbrella, in a kayak, in the rain. So there's a whole bunch of other things that I could have included with that. There's the Fort Tryon park on the left, burnt out pylons from piers where there used to be boat houses that since burned down, there's a truck parked there that's huge, and the Palisades, the cliffs on the other side of the river, covered in green trees. There's Fort Lee across the way, and the view underneath the bridge. But none of that mattered. The only reason I took the picture was because this dude brought an actual umbrella with him, out kayaking, and I thought that was hysterical. This is another example of selective detail. This is one that a friend of mine recommended as something that was particularly impactful for him. With this picture, there's a lot going on. And some of it is important for setting the stage and actually having you know where this is. And the actual context for the picture. All of this beautiful scenery -- you need to at least establish that, before getting to the point of the picture. This is the view from Saint Georges castle wall, with tiles haphazardly arranged, leading to the garden's edge. A large dog lies sprawling on his back, flashing the world. So down there, on the left, is this very large dog, which is very small in the picture. As I note, this was actually a great caption to include. I posted this on Facebook. Specifically because if I just posted this picture, a lot of people would just look at it and say -- oh, that's pretty. And swipe away. But by including a caption that specifically leads people to the punchline, more people get to enjoy the actual point of the picture. Three. Including interpretation. This could be analogies, this could be just where do you want to take the description, where do you want to actually lead people's emotions, as they're getting the same experience that you had? And that you want them to have? This is the one picture that I didn't take, but it starts off with -- I got this picture. I received this wonderful ecard from the college of physicians of Philadelphia and the Mutter museum, wishing me happy holidays. The card shows the top of the tree with the usual shiny ornaments and lights, also small skull ornaments and an intimidatingly life like angel of death, flowing robes translucent to the point of resembling cobwebs, with skeleton hands peeking out at the sides, with a hooded skull. Enough to say this is a scary-looking angel of death, a gown made of cobwebs, and if I just describe -- there's an angel of death on top, it would sound cute. And that's not the point. They didn't make that to be cute. I mean, they did. But it's cute because it's scary. That's an awesome museum, by the way. It's in Philadelphia. I highly recommend it. I love it. I adopted one of their skulls. You can go and see my name on it. It's really cute. Okay. So for this picture, the text is really tiny, because I could barely fit it in there, because there's a lot going on in this image. And I don't have the image displayed, because I want you to focus on the actual visuals themselves, and then we'll see how well this actually transforms. So if it helps, close your eyes. Listen. Or just read along with me. So this is a panorama from the office, looking South over Chelsea and down to the financial district. To the East, you can still see blue sky over Brooklyn. Some clouds gathering directly overhead in Manhattan. And then a different scene starting at the Hudson River. The clouds jut out over the top of the wall of water, a frozen wave just beginning to crash over the city, as it finishes engulfing Jersey City and Hoboken across the river. Interesting visuals, but it is a picture. Form that thought in your head and we'll see how well it translates. There's a lot of other things I could have pointed out. But I thought that made sense. FYI, that fits in Twitter's alt text, which I highly recommend you add. If you go into settings, it's under display and something else. It's under the iOS app, the Android app, and the website. You go in there and you can enable alt text and you can add all of this, and your actual tweet can just be like -- whoa. It's way more. It's like 460. So step 4 I didn't include in the main structure, but it's still useful to know and keep in mind. And that's breaking the rules for effect. It doesn't always work. But with this picture that I took, following the usual structure didn't really help. In fact, it made it sound really boring. So I ended up flipping it around entirely and starting with the smallest piece. A canoemaran, two canoes strapped together with 2 x 4s, rests on a small rocky beach by the edge of the mile wide Hudson River, with just enough ripples on its surface to reflect crepuscular rays streaming through bright clouds. So here I started with the tiniest detail and built up -- it's on a rocky beach and we're going across the river and now we're describing the actual environment that it's in. It's one of those things that happened to work that way. Rules are there to help, but they're also there to be broken occasionally. Okay, everybody. Your turn. So I want folks to tweet a picture to #a11ynyc. If you're on live stream, feel free to do the same. And reply to pictures and add alt text. Try to use the same form. Start big and general. And then get into details selectively. If you have space in your tweet and if it helps, include an interpretation. But above all, keep it concise, and Twitter will enforce that. You have to keep it concise. So while people are doing that, I need a volunteer to come up and do one live. Because I have one more picture here, but I want somebody else to do the description. Okay. Come on up. Just mind the wires as you're coming up. >> Stand right by him so you're on camera. >> And also so the mic picks you up. Okay. So it'll come up on my screen as well. So remember, start big and general. What's the context? What's the environment? What's the style? And go into detail, but only selectively. And for this one, it's super easy. You don't really need to include an interpretation. >> Looking at a wall with several different markings or words -- have been written on it. In particular, there's a message written by a person signed Jack that says always buy your magic beans from a trusted retailer. >> Thank you. So yeah, for added context, it's a bathroom wall. It's in a bar. It's in the Burp Castle, down in the East Village. It's great. This is my favorite piece of graffiti ever. Okay, so we have gotten some people on there. So have people found pictures? Found some? You replied with a caption? All right. In the interests of microphones... Awesome. So we have this picture here. A lemon rosemary cake sits glazed on parchment paper. A sprig of fresh rosemary is perched on top. Awesome. All right. Anybody else? We have a whole bunch of... We have a picture that Thomas took of me. Okay. We can review some more later, if people would like. But, again, just basic review. Start big and super general. Set the stage. Make sure that people know what the actual context is and what the boundaries of this world are. And go into more detail, but only selectively. Include an interpretation when it's valuable, but above all, definitely keep it concise. There's a whole bunch of links for resources in here. Art beyond sight's resources for verbal description. I have a link to their overall site, as well as the guidelines I spoke to before. Learn ASL. There are places in the city where you can. It's awesome. The Sign Language Center's location here in Manhattan. The site has a whole bunch more information. La Guardia Community College has -- it sounds intimidating. They have an ASL-English interpreting program. They start with ASL classes. You don't have to go in and say I want to be an interpreter. You can just go in and take ASL classes. The American Museum of Natural History reached out when we posted this meetup and said -- they wanted us to talk about Project Describe. It's a site -- so they have 30,000 images, this backlog of images, that they have no descriptions of. And so you can help them out by basically going to this site, and describing images. But you can also vote. So you can review images that other people have captioned and say this one is better. The describing is kind of handy. So I pulled up one image. Which -- this looks like a whale swimming through ice. Which is awesome. But one of the things that's important to note, especially because it's really subtle in their UI -- they have a button that says context. It opens up another page, which gives you the page that this image came from. Now you can go through -- they're talking about all this other stuff, arctic waters, and here's the actual context where the image is, so you can see the caption that they have around the image. You don't have to make it redundant, but you can make it just helpful by describing the visuals of it, itself. And then you can review things. So... Here's a picture of a dude. Hi, dude. That's Carl. Hi, Carl. So there are two descriptions here. One of them says his name, senior scientific assistant. And the other one says his name -- middle aged white male with dark beard and buzz cut hair. Okay. So that's it. Thank you for coming. Any questions? (applause) Okay. Sveta has two questions. I'm going to interpret, but it's going to be slow. So when I showed the picture of the man in the kayak with the umbrella, that was really hard to make out. Let me see... There we go. Zooming doesn't work on this. Okay. That's true. That would work, wouldn't it? I'm only doing this because otherwise it'll go totally full screen. The captions are gonna go away for a second. All right. So when you zoom, I can see it, but if... If I didn't see the description, I never would have known that the man was sitting in the kayak, with the umbrella. So when it's not projected on something kind of grainy, it's a lot easier to make out. In the context of me posting this, where I posted this -- either Facebook or Twitter. One of those. But in that context, you can make it bigger and you can zoom in on it yourself. But it's still really small. So that's one of the reasons why I included that caption, regardless of, like, whether you're using a screen reader or not, because otherwise you would just be like -- oh, it's a rainy day and some jerks are kayaking, but otherwise you would say -- oh, that's actually a purple umbrella. That was the first... Sorry. I think it's great that Twitter added the ability to add alt text, but... But why does Twitter limit the number of characters for the images? What if you want to describe more? It makes me feel frustrated sometimes, because you want to explain more words than... And then Twitter limits it. So I think that's one of the reasons... I understand why Twitter sets up the limit for the tweets themselves, but why would you set up a limit for the images? That doesn't make sense. I'm not sure why. I have no idea. But... They made the limit a lot higher than tweets, so hurray for that. >> One comment -- screen readers don't have a navigation mechanism for image descriptions. At least, built into them now. So for a person using a screen reader, if they were reading, like, a long image description, there's not like a keyboard shortcut to, like, jump past that. Or navigate inside of it. So that's potentially something maybe for more innovation in screen readers. But that's why people only put, say, 150 characters into an image description. Usually more the length of a tweet. Because of the way that they work. So that's maybe one reason why they didn't make it longer. >> And then there was a comment from... >> A lot more image examples. >> Oh, awesome. >> Some more submissions. >> Let me know which ones of these have replies. Oh my God, this is great. Okay. Well, Thomas posted one. Thank you, Thomas. Okay. I'm gonna finish reading this, and then I'll keep scrolling down. Blue T-shirt with text reading I'm just my dog's social media manager. A man and his dog. Was this yours? >> That was mine. >> Okay. So for this, what would be the context of it, though? Or did you add the alt text in the image? >> (inaudible) >> So to repeat that, that was... That was the caption that he had for his, but it doesn't really convey the vividness of the -- it's outside, it's snowing, it's in the mountains. So that might need to be added. Okay. Thomas? >> I actually have a question on that. I (inaudible) like a number of people here. (inaudible) >> She makes the internet. As other people's... >> (inaudible) but I will often be demonstrating (inaudible) selective images. So the content producers have a package of photos, and they'll just put them in there. I don't always know the purpose of it, (inaudible) so what would be a good metric for knowing how much detail or (inaudible) alt text? >> Very good question. So overall, just to repeat, because I think some of that broke up, a lot of times, especially when you make internets, you get a lot of pictures that are just kind of handed to you as a package, or they may just come from some other source that you don't have control over. And so you don't have the full understanding of the intention of the person who took the picture. And that's true for a whole lot of different scenarios. The basic rule is then you just do a visual description of the image. So you don't do an interpretation of -- okay, this is not necessarily -- you don't do an interpretation of their intentions. You do an interpretation, if any at all, of your own perception of it. If it's something that's specifically journalistic, then that gets into kind of a different space. So for a lot of the things on Project Describe here, for some of the pictures that come up, when you hit context, you get a 404 page. And that's probably because not all of them are coming from the site. They have 30,000 images. I doubt all of them are on their site. They're probably just in archives. They might be used in multimedia packages, whatever. So you don't have any of the things around it. And so at that point, you just kind of do your best to say -- okay. I'm gonna describe what shows up on here. So that way, if I didn't have the context for the whale and know that it was describing -- well, a whale is swimming through icy waters in Alaska -- I would say a top-down view of a whale swimming in icy waters, even though that's gonna be redundant with other things, it's the best I could do with the information I had. Museum descriptions get that a lot. Because a lot of artists are dead. You can't go and ask. And a lot of people argue about the intentions of the artist. That's a favorite pastime. So the URL... Which I'll tweet out a link to the slides afterwards, which also has it in there. The URL is projectdescribe.amnh.org. That's the American Museum of Natural History. Their project. Yes? >> Are alt texts translated to other languages? >> They should be. The question was: Are alt texts translated? They should be absolutely. It's kind of on the burden of whoever is providing the alt text. I mean, if I'm just farting around on social media and posting pictures, I'm not translating my alt text into 16 languages. But I work on Google Docs. Any images that we have on there, we translate into all the languages that we support. There's a lot of them. >> (inaudible) >> Usually the way that that would work is the same way as... Let me repeat. So the question was about an automatic way of somebody to receive alt text in the language that would be preferred. You basically just do it in the same language that the UI itself would be presented in. Or in the case of an article that's a different language than the site that it's included on, you would include it as the same language as the article. So basically, like, the smallest granularity of content down to that image, whatever language that is. >> If there's a (inaudible) English speaking people, but also (inaudible) other common languages that (inaudible) translated Google Translate (inaudible) will it (inaudible) I'm assuming it's not gonna translate those? >> So if you're doing a web page translation using an automated tool, that would translate the entire page? >> (inaudible) Google Translate, and there is... (inaudible) basically common languages that could be translated into. >> So the example was using Google Translate, and there's different common languages that you can translate to. I have no idea. I haven't tried that. Hopefully? Yes. >> I'm wondering also how much the grammatical structure of ASL influenced the way you did alt text? Because I know... I've done a fair amount of translation in the past year, but sort of... The structure (inaudible) of the languages that I do speak has also changed the way I do alt text. Sort of again... Some languages tend to be... Like the way you should with alt text, there's much more setting the stage first before going to granular, whereas English tends to be much more free word order. I was wondering if ASL's grammatical structure also influenced your alt text. >> If it has, it's totally subconscious. So if I was looking at some of these pictures, I would describe them very differently in ASL than I would in English. In terms of the actual structure itself and the details that I include. Because in... Let's see. In this image, for instance, I would not start with looking South. I would start with setting up the entire physical space of the Hudson River with the cliffs and the bridge. And then say -- and here's the perspective. Because I'm playing with this kind of space, and so I would set up the river first. And then the cliffs on the other side. And then the bridge going across this way and looking that way. And then I would explain right here -- and kind of enlarge that spot, so I could explain what it is that I wanted to highlight. So mostly... The descriptions of the images would be very different in ASL, in terms of the approach of explanation and the details that I include, simply because explaining things in English -- you can get really flowery and really vague, and in ASL, you can't, really. Like, you have a physical space that you're working with. And so that's how you communicate. But the overall structure of starting big and getting more down to details exactly follows. Because setting up the river and then the cliffs and the bridge and everything and then setting up perspective and then the focus is starting big and getting more and more narrow. Cool. Cameron? Hi, Cameron. >> Do you ever find yourself writing descriptions for alt texts and then realize... I should just put this in the tweet or in the Facebook post? Because it's meaningful beyond just the image? >> So... >> Some of these things you wrote were kind of poetic. (laughter) >> Well, Facebook doesn't have alt text. So I include all of my captions right next to the picture anyway. So I figure I may as well make it helpful for people, which is why I did the highlighting of the dude with the umbrella. And that's why I set things up in the way that I do when I write it. With the instance of the dog flashing the world, that's why I tried to make it sound as beautiful and scenic and peaceful and pristine as possible before you get like -- dog crotch! >> And the question was... Have you ever had people call you out for (inaudible) your alt text? >> Are you calling me out right now? (laughter) >> (inaudible) you can have, like, inside jokes basically for sighted people in your alt text. Unconsciously. I've done it before. Where I will make reference to the image in the alt text in ways that is kind of like an inside joke. >> Gotcha. I really make an effort not to do that. Nobody's called me out yet. I've had the opposite, where somebody actually thought that I had written alt text for an image, but there wasn't an image there. It was just my description. Yeah. So far, nobody has said -- stop being a jerk. Just write the description. Yes? >> I guess sort of in a similar vein, as someone who doesn't use a screen reader, I don't rely on alt text. How do you figure out when you're doing something that's maybe not best practices? Like say writing a description that's way too long and annoying people? >> One of the keys is just, like -- like Thomas brought up earlier, does it fit in a tweet? If you're going on and on and on about details, does it really need to be there? So, like, there's... As an example that I was about to use... And it totally left my mind. So the basic idea is... Every word that you're putting in there should add meaning to the overall experience that somebody is getting from the description. So like with this image of the dude in the kayak with the umbrella -- I should really give him credit. There's all kinds of details which I could talk about for ages. Because I live in the neighborhood and I know the history of the place and I'm a history nerd. I purposefully left all that out, because the only thing that I wanted to do was the setup of the environment which was just a rainy day on the Hudson River, and then the punchline, which is -- this guy chilling out on the water in a kayak with a purple umbrella. There are all kinds of details I could have added to that, but it wouldn't have added anything to the overall feeling. If anything, it would have distracted from it. That's why, with this slide, before I got to the caption, the two questions are what do you want to highlight and what is distracting from that? Anything that distracts from it needs to be tossed. Anything that adds to it -- even if it's subtle, it may be important to include. Like... With the practice one that I pulled up... So one of the details that I included in my caption for this, because I thought it was hysterical, was that... This is written in chunky marker on a bathroom wall in a bar. That's the context. If you don't know that it was taken in a bar, you don't know if it was taken on a bathroom wall, then... You would just include the general description of what it is. But because I had that information, I thought it was important. If you are sighted and looking at the picture, you can't necessarily tell that it's on a bathroom wall. Like, it kind of looks like a bathroom wall, but it could be anywhere, really. It's just anywhere people scrawl graffiti about things. On the distraction -- that's why I also didn't include any of the other things. Because you can make out -- somebody scrawled repeatedly in pen Pension=Jackass to the right of that. That wasn't the point of the picture I was taking. So it's like... That's not really adding... It's funny on its own, but it's not adding to this. Yes? >> Additionally, (inaudible) asking if you get called out, I find myself being more (inaudible) in my Twitter posts than (inaudible) because (inaudible). And I think on Twitter (inaudible) more casual. >> So I'm gonna repeat that up until... Okay. So on Twitter, you tend to be a little more cheeky with your posts than you do in kind of your professional descriptions, because it's Twitter and you have professional boundaries. On Twitter... I missed the inaudible part too, because I was looking at the captions. What were you saying? >> Do you (inaudible) or do you (inaudible) professional on Twitter and (inaudible) guidelines? >> So I'll be honest. At this point, I don't use Twitter. I stopped, like, a couple of months ago, and I haven't missed it. But when I did, and when I posted pictures, the captions that I would provide for the alt text were professional. The content may not be. So the overall point is... If I'm posting something that's really rude in a picture, I want somebody who's using a screen reader -- because I have a lot of friends who use Twitter who use screen readers and can't see the pictures -- I want them to get the same experience and the same information. So, like, as an example, not to get political for a second, but I'm gonna... So before the election, I was walking through Harlem to the train. And somebody had written in gigantic block letters -- it was on a fence. It was glorious. It was like 8 feet high. Big huge block letters, bigger than a city bus, and it just said FUCK TRUMP. And I tweeted that. Because Twitter recommended that I follow him and that was my response. But when I provided alt text, that's what I described. So now all of you get that picture without me having to post it, because I just described it. Yes? >> (inaudible) dead fish washed ashore (inaudible) >> Okay. I'm not gonna do this description justice. Can you stand up and speak... I'm not gonna remember it all. >> Okay. I can stand over here. >> I tweeted a photo of fish that had washed ashore on the beach. I was there on Christmas Day. And the fish were frozen. But their eyes had been taken out by all the seagulls, and I thought it was hilarious. There was a smell, but I didn't want to put that in the alt text. (laughter) >> (inaudible) >> If you're providing a caption to everybody about how funny that was, then yes. Include all of these things. >> I just thought it was really funny. Because (inaudible). >> Yes? >> Would it not make more sense to put some of that in the caption after the... Of the description in the alt text itself and then the fact that they stunk -- this is for people not using a screen reader. >> Absolutely. In that instance, if you have the ability to add alt text, put the alt text that's helpful for the visuals on the picture. And then the caption below it everybody can just enjoy. The only reason why I tend to blend the two is if I'm posting in a place that doesn't support alt text, I have to put it there. If you can, by all means, just do the visual description and then the caption everybody gets. Yes? >> How can I do the alt text on Twitter? I know that's not the purpose (inaudible). >> So the question is... How can you view it? It's not the purpose for you to view the alt text, but can you? The answer is not easily. The easiest way is to turn on a screen reader. If you're on the website, you can right click on the image and inspect it and look in the DOM inspector and look in the attribute, but there really isn't a way. >> There are browser plugins that will service alt text visually. I don't know one off the top of my head. But I can post a note (inaudible). Find me afterwards. >> Thanks, Cameron. Yes? >> Just a follow-on question about what to put in the alt text and what to put in the caption. What's the best practice for repetition? Do you avoid putting things in the alt text that you put in the caption? >> If you have control over all of the things, it is best not to have repetition, because then you're having a screen reader that's going through the same stuff more than once. Sometimes that'll get challenging, if you specifically have to describe the visuals, and some of that overlaps inherently with the description that somebody else wrote. Because that may include, like, General Washington on a horse with a thing. And then the alt text -- would have to include being on a horse with a thing. And so some of that is going to overlap sometimes, but as a best practice, if you can avoid it, it's best to. Just because there's only so many words that somebody is going to put up with on the page, and the fewer the better. >> (inaudible) >> Okay. Clarify the difference between alt text, description, and caption. So one of the examples that I used in the very, very start... This is the picture in question. In which the alt text was the large hard cover book with yellowed Braille pages. This is alt text because it is shorter and more concise and this would probably be within the context of a place where it is explaining what the book is. Because if you're writing an article about this book, then you would probably include the contents of that little sign. You would include information around it. And so you would get all of the caption around it inherently from the content. If you are providing just full description and caption, it's gonna be a lot longer. You'll notice mine get really long. Still fits in Twitter. But for the full description and caption, you want to include things like the contents of signs that are visible on the screen. So that somebody who really wants to pick apart the image, if they want, can do the same with the description that you provided. Captions -- I'm gonna add a fourth. But I'm gonna get to captions... A fourth and a fifth. So captions... Are basically what Mirabai's doing here. These are live captions. This is just... This is a description of what is showing up here. If there was a loud bang that occurred or some other sound effect, like on a movie soundtrack... (clapping noise) Cameron. Jesus. (laughter) Right. Like laughter. So this... These are captions. This is providing you... This is... Cameron's lost it. So this is trying to provide, through written text, what is happening audibly in this room. So there's a lot of talking going on, because that's what I'm here doing. But occasionally there's sounds of Cameron making me jump and then laughter afterward. Subtitles are different. So subtitles -- a lot of people confuse the two, between subtitles and captions. Subtitles are only the spoken word being translated into another language or in the same language, for that matter. So subtitles -- if this was only subtitles, you wouldn't get the laughter, you wouldn't get the clapping sound. You would only get the text itself. And then there was a last one... Audio description. So in audio description, if we were to try to create one for this overall presentation, it would be a lot easier, because it would be basically me standing in a room and then the slides going by, and I'm already giving a description of the images, so we wouldn't have to provide that. For something like a television show, it would... Between the dialogue itself within the pauses, fill in those gaps when needed, and as vividly as necessary, to provide somebody who can't see the screen with enough context of the movement and what's happening on the screen so that the next line will make sense. So like if... As an example of this... If there's a scene where somebody is just sitting at a desk calmly and then somebody else rushes in silently and clocks them on the back of the head -- thank you, Cameron -- but if you can't see the screen, you have no idea what happened. All you hear is just a smack and that's it, and maybe a clunk as they fall down, but you have no context. You have no idea that somebody else just ran in from the other room, like Cameron... Grinning... So the audio description provides you that. So you asked a question about three things and I answered five. I'm sorry. Right. Thomas. >> I just wanted to add a comment on the point of Twitter having the ability to add these descriptions. So we've been doing the meetup for about three years. I learned from (inaudible) at the Chicago meetup that a company called (inaudible) they basically share content (inaudible) social media platforms -- they're working on accessibility (inaudible) asking the questions (inaudible) Twitter (inaudible) the only social media even (inaudible) >> Talk toward the mic. >> This is the only social media even enabling this functionality at this time. So it's awesome that Twitter is doing this, but pretty much every other social media really needs to have this capability, this ability to add text descriptions. So it's really not just Facebook (inaudible). Twitter is the only one right now making this really transparent. >> Thank you. Yes? >> Do modern search engines take advantage of alt text? >> Very good question. Yes they do. Heavily. Also with captions and subtitles. Basically with any written text that can be parsed, it will parse it and it will add to it. So it is very beneficial for search engines. Yes, Cameron? >> Do you have opinions on automatic image descriptions using camera vision? >> I'm gonna make sure that the... Yes. Yes, I have. So automated descriptions will give you some kind of a sense. So actually, if you're using Facebook, Facebook does some automatic description. Which is cool. Because most people don't add captions for their images ever. So if somebody posts a picture and they just post -- aw, isn't this cute? You don't know if it's a dog, a flower, a boat -- you have no idea. So Facebook at least gives you some keywords. This image probably includes this. And it will give you a few keywords. But they have a reasonable confidence that it includes. But it's not going to give you things like... Two puppies flopped over each other with a bow on them. It's a very different experience. And just like -- there's probably dogs here. So it's... Yeah. Image recognition and computer vision is really interesting and it's getting to the point where it's actually being used on a lot of different platforms, which is super cool. Because before it was basically like -- IBM research could do it, and nobody else could. But now it's getting to the point where Facebook will do it on a massive scale. Which is cool. But it's not the same thing as an actual human description. Because that's getting to the point of it and it's also giving interpretation and context. >> My question is related to other types of markup other than alt tags. Is there anything else we should be doing with the markup on our sites -- is there anything that's underutilized that we could be doing more of to improve accessibility? >> All of that. >> That's good. >> All of that is thoroughly underutilized. All of that and way more. Yeah. I'm not really gonna get specific, because that's a whole other talk. Yes? To the left, against the wall. >> So (inaudible) >> So the question was about... So this was pictures for promotions? Things that are inherently left... So the pictures themselves are vague. >> The pictures are taken from (inaudible). >> (inaudible) >> Okay. So different pictures taken from different angles, providing no context for what the show is gonna be like. Any context about what the show is about. But how do you provide alt text? You provide alt text the same way that somebody looking at it with no context would get. You can say... There's two people in 19th century garb talking at a bar. You could say... There's two guys in modern street clothes, fighting. Or you could say there's two ballerinas dancing, or whatever it happens to be. You can still provide enough context so that you can get the visuals from it, even if you have no idea about the context. >> (inaudible) >> The interpretation step is something that is optional. If it actually adds to it. So with... I'm going back and forth through all my slides. I should really do this in a more sensible way. With this picture, there's no need for interpretation. It's just setup, which is just... Bathroom wall with graffiti around it, and then the punchline of... Always buy your magic beans from a trusted retailer. There's no interpretation whatsoever. It's just left to somebody. So it's not always recommended. It's helpful in some cases. Like with art, specifically. It can be really helpful. Because art description is, one, really freaking hard, but two, fascinating, because you're trying to convey a piece, a work of art, might be a masterpiece -- you're trying to convey that to somebody who cannot see the piece. So Mona Lisa. Go! You have three sentences. How do you convey that? You have to start with the style, because otherwise the person has no idea what you're talking about. Then you have the subject of the woman. And then you can describe the pose, and you can describe the expression on her face, but you inherently have to include the interpretation. There was an amazing talk that we had at a meetup here a couple years ago... I don't think we have the video up, because the video got weird... But it was great. It was on audio description and how to do that. There was a woman from the Guggenheim and a woman from the Met whose names I forget. They talked about, among other things, how do you actually write descriptions for art pieces, and you can get all kinds of different interpretations. It depends who you ask. It's the same as -- when you and I go to the art museum, what do you see? We're gonna say two completely different things. It's just when you're providing alternative text, you have to start with the context. Is this an abstract piece? Did Pollack paint these things? Or is this sculpture? What are you actually looking at? And from there, you can narrow it down to... Now we're getting into the details of smooth surfaces and curves. And now you can talk about interpretation of this reminds me of the moves of a dancer. >> One more question, and then I think we're gonna need to wrap up. >> My question is a bit technical. So... I work for the City of New York. And one of the things I'm working on is... We have a template that's kind of used for a lot of our websites. And on that template is -- share this on Facebook. Share this on Twitter. But it's a CSS image. And I'm not sure that there's a way to add alt text to that. Is that something... Do you know how to answer? >> So if it's a CSS image, I'm assuming you mean like using a background image? That sort of thing? There are ways to provide text that screen readers will read out. It gets really hacky, because you basically have to put the text in the element and then hide the text from showing up visually, and there's different ways you can do that. It's a lot more complicated than just tagging an image with alt text. So if it's possible, I recommend doing that, but if it's not possible, there are ways. If you do some searches for basically that -- you should come up with some examples. If not, I can help you find some. We need to wrap up, but I did have one more announcement. This is totally unrelated. So last year, we had a speaker from Parsons, the new School of Design, come and talk about Open Style Lab, this super cool project, basically pairing designers and people with disabilities and people who know technology into teams to create pieces of clothing for the person with the disability. Like, their specific piece of -- a problem they need to solve. So she came and talked about that program. I had the honor this past fall of being a critic, a guest critic of the fall semester. It was super cool. The program was awesome. Peter was one of the clients, who's seated over there. Got an awesome jacket. Like, I want the jacket. But anyway, they are putting out a call for people who need a piece of clothing that would be great for this semester. So they're getting the students ramped up now. The call is open until January 15th. Open Style Lab.com has some background information. I have an email that I can send out to the meetup group entirely that includes a lot more specifics from Grace, who runs the program. And sent the information to me. It's just a simple form. You fill it out. Your mode of contact, can you come and meet with us this many times a semester, what kind of need do you have for this. It's a super cool program, so if you are interested, if you have a disability and a problem that would be solved with -- specifically, like, clothing design -- then it's a super awesome program and there's not a lot of opportunities to do this sort of thing, so I highly recommend sending it in. For anybody on live stream and everywhere else, I'll be sending out the email for that later on. But thanks for coming. (applause) >> Well, that's it. I want to say thank you again to Thoughtbot and SSB BART, White Coat Captioning, and Joly. And thank you to all of you. Join the meetup group. It's Meetup.com/a11ynyc. We'll send out announcements and put out notes on tonight's presentation. You can see notes from presentations before. And we're also on YouTube. The recordings are up at a11ynyc's account on YouTube. So... Feel free to hang out for a few more minutes. We need to be out of here in, like, 20 minutes. Are we okay? Okay. So... 20 minutes. I'll let you know when you absolutely need to be out of here. In the mean time, grab a drink. Talk. Hang out. Thanks again.