It's Time to Care About Web Accessibility for Disabled Users

Online News Association48min

Patrick Garvin

01:13

Hello and welcome to "It's Time to Care About Web Accessibility for Disabled Users." The subtitle being "that it is way past time actually." I am so glad that you are here and that you are making an effort to learn about web accessibility for people with disabilities. My name is Patrick Garvin. I am a front end web developer at Merits Global Events in St Louis. I am also an adjunct instructor at the Missouri School of Journalism at the University of Missouri in Columbia. Mizzou, that's us. I teach a class in which I teach journalism students who have never coded, how to code, and how to tell stories using the power of the web and using multimedia and how to do so in a way that is accessible and usable for people with disabilities. And it is not something that I always did, as web accessibility was not always on my radar. And so this is a stage two of my career. For 15 years, I was in newspaper newsrooms working on information graphics, digital presentations and special projects. I started at the Sun News in Myrtle Beach in Myrtle Beach, South Carolina, then I went to the Florida Times Union in Jacksonville, Florida. And then I spent nine years at the Boston Globe, working on information graphics, digital projects special presentation, all sorts of things. So I am excited to chat with you and get going so I'm going to quit rambling and get started.

Patrick Garvin

03:21

As we get started, first things first, some housekeeping. Want you to know that I'm going to be looking on multiple screens, so that I can be answering questions and keeping in touch with my man Adam who is helping me out on the ONA side of this. So if you see me looking back and forth, that's why. I am going to try to announce the content on each slide. That is going to be helpful for people who are blind, who cannot see the content on the slide. People who have low vision, who maybe can't make out everything that's on the slide. And people who are maybe on other screens and are not on this screen at the moment. If you want to post screenshots on social media, screen grabs of the conference or certain things that speak out to you that you think are salient. That's awesome. When you do so, please use alternative text, which is also called alt text. If you don't know how to put alt texts on social media, that's okay, because I will show you, just in a few slides. So all of that, we're ready to get going.

Patrick Garvin

04:41

First, I want to define what we mean by web accessibility. I'm going to be using this quote from the World Wide Web Consortium, which is the main international standards for the -- it's the main international standard organization for the World Wide Web. It is a mouthful to say the World Wide Web Consortium. So often people will just say the W3C, and they have defined web accessibility this way. They say web accessibility means the websites, tools and technologies are developed, or designed and developed so that people with disabilities can use them. Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them. What they want you to think about that, because it implies an intentional design and development. And then that the second definition also comes from the W3C, and it says: when websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. Making the web accessible benefits individuals, businesses and society. International web standards define what is needed for accessibility. Again, that comes from the World Wide Web Consortium, which again is the main international standards organization for the World Wide Web. They are the governing board, overseeing what is considered valid code for browsers. They are basically like the Jedi Council for the World Wide Web. They are not infallible, but they are kind of the ones that are tasked with keeping everything up so that when we talk about web accessibility throughout the rest of the presentation, this is what we're going to be meaning, having things that are properly designed and coded and developed so that people with disabilities can use them. We're good? Cool.

Patrick Garvin

06:59

All right, time for me to show you how to put alt text on Twitter, which is what I promised that I would do a couple minutes ago. So, here's what we're gonna do. We are... I am going to a Twitter page and I'm going to... Yeah, I don't want to just be. Yeah, that's better. We'll go to my Twitter page and that way. All right, cool. So we're going to go to my Twitter page and I'm now going to write a tweet. Gonna say "Greetings from the Online News Association Conference. I am tweeting this during my presentation to show my awesome new friends and old friends" because I know that Joy and Heather are on here along with some other people. But I have some new friends on here, all of you who aren't joining Heather get to you get to be my new friends. "I'm tweeting during my presentation to show my awesome new friends and old friends, how to add alt text to their images on Twitter." I'm going to do #AltText. You notice that I'm doing "hashtag alt text," so alt text is short for alternative text. And you'll see that when we tweet this, it's not going to affect what the sighted user sees but it's going to affect what someone using a screen reader gets in their experience. So I have my tweet text ready. Now I'm going to go to where I would click on the media button so that I can add a media thing. I'm going to select the image. I already have an image here. So, you notice that my image, it's text and it says "it's time to care about web accessibility for disabled users." That's the name of this session. In the old days, we would have just gone and hit tweet and set it. Now, Twitter, for the last 13 months or so, since I think May 2020, Twitter has made it so that you can add alt text. So you can click here where it says "add description" or you can click Edit or any of those things you can do. And you will get something -- you will get the option on the left where you can crop it and resize it, but then on the right here, you'll see this thing that says ALT, or Alt, and it lets you write this description. You notice that the description gives me up to 1000 characters, and that's sometimes because alternative text that we are writing to describe an image can take more words or more characters. For this what I'm going to just write is "black text on white background. The text says 'time to care about accessibility for disabled users.'" So, I'm gonna hit save. And now we'll see this alt tag here. And we'll see this thing here, then I am going to tweet. And so now we go... if we go to my Twitter feed, we see this. Now, it won't necessarily have the alt tag up here for when you all go to see it, necessarily, but! What I'm going to do is I am going to go into my Chrome extensions tab, and I am -- I have... So if you use extensions on your Chrome browser, you can go to Chrome colon hyphen hyphen. No, not "hyphen hyphen." Chrome://extensions. Apologies for that. Chrome colon slash slash extensions. Cool.

Patrick Garvin

11:48

So what I'm going to do is select screen reader. What a screen reader is -- and this is just an extension through Chrome that functions as a screen reader but -- basically a screen reading technology is technology that literally reads the contents of a screen. And then what it does is it converts the content of that screen to something that's usable for someone else. And so what it's going to do is it finds all the text on the website and converts it to something that it can output to audio for... So many blind people will literally listen. And they will have it read them aloud, read the content aloud to them. And if someone is deaf and blind or deaf blind, they will use a refreshable Braille display, and get it that way. But the only way that your content can be usable to someone is if you format your content to do that. You have to be intentional about it the computer in the browser, the screen reader aren't going to be able to know what's in the content unless you tell it so that's why we did what we did by adding that so I'm going to turn on the screen reader.

Chrome screen reader

13:05

Chrome

Processing audio...