 Okay, does your website drive the visually impaired crazy? I'm here because I get to sponsor at different word camps and I get to hear all of you come out the door and talk about how the session went. And we were in Asheville and a developer came up to our table and she was overwhelmed. She had just been to an accessibility workshop and she was just starting out and it was a side gig for her developing websites. And she was feeling she could never find the time to go over all of the accessibility issues let alone learn how to implement them since everything was new. So with a sad shrug, she kind of just said, I think I'll just ignore them for now. So that got me thinking, I wonder are all the issues strongly desired by those who need the special, okay, I just lost my train of thought, I'm sorry, are all the accessibility issues strongly desired for those who need them? And then I wondered, how could I find this out? And I met a man named Max Ivy, the blind blogger at a conference and he's an inspirational speaker if any of you are in the market. And I asked him, what drives you crazy about websites and what do you wish every website had? And he's very passionate. He was very glad to share. I'd love to read to you the number one paragraph of his entire response. My number one pet peeve is sites that constantly change. If a website has a real design flaw or is causing the users or the owners problems then fine. If a site needs to be expanded, that's cool too. But in my opinion, any webmaster who updates a site just to update it or just to prove to their boss that they're earning their paycheck should have to do time. The worst offender of this principle is Facebook. And you can quote me, I've said in several interviews that if I ever meet Zuckerberg in the street, I'm going to knock him on his keyster. This guy's a really big guy and he didn't say keyster, but that's what I'm saying here. So he shared what drove him crazy. He introduced me to some of his friends who willingly shared. Some of them introduced me to some of their friends who willingly shared. I also started a thread on Reddit. So what I get to share with you today is the top three things that drove the visually impaired crazy about websites. So I want to say I'm not suggesting that you don't make your site accessible. Why I'm here is because I want a jumping off place. So I've gotten answers of things that came up over and over from people who need these things. And these are the top three as a bonus. They're relatively easy fixes and it's a great way to jump in. So I'm going to assume that most of us are sighted and unfamiliar with screen readers. So I have two clips, sorry about the buzz, that kind of introduce the screen readers. I'm a blind person who has been using screen readers, Braille writers, scanning equipment, other adaptive technologies since my childhood. What a screen reader does is, for example, I'm going to start to read this page. And what I will now do is slow down the speech rate. So as I was about to say, a screen reader converts what's on a computer screen into information that can be displayed through synthetic speech or Braille output. And it does that by allowing you to use a computer instead of a mouse, a computer keyboard instead of a mouse. You can also use a Braille display as an input device. And navigation. And what it does is it cleverly determines what's on the screen and presents you that information in a way that would allow for efficient navigation of these pages. So, for example, I could just keep reading three items, visit link image home, line by line and we can be here all day. Or I could jump to the first heading on the page, search for heading level two. You are here, heading level one. Make video successful. So as I'm moving down through the page, I can look for the category that interests me. And I'm just using commands built into the screen reader. Okay, and this is another perspective, but he also talks about the speed of screen readers. My name is Hadi Ranghi and I'm a member of IT Accessibility team at the University of Washington. Using a screen reader. Hadi's an accessibility expert and he's also a user of accessible technology. He uses a refreshable Braille display and screen reading software that reads everything on the screen. I am Braille and I use a screen reader program at home and here on everywhere. A screen reader program is a software that complicates with the operating system and kind of weighs the information to me. But that just engages the features of the site of the system. You know, even if you are reading as a sighted person, you do not need every kind of Sometimes you have to make a pause and then review what you have read and then digest information. For us it's the same thing. When we are reading, for example, your normal conversation, we can read it very fast. But when we are reading technical content, then we go a little slower, make more pauses. I have slowed down my screen reader program. But if you do, for example, even I can go faster, faster, faster, faster. Make them happy. Show them what you're doing. Yeah, don't make them happy. I can do that. I love that. No, you don't have to get used to it. So here's a side note. Could you please shovel the ramp? All these other kids are waiting for the stairs. When I get through shoveling them, then I'll clear off the ramp for you. But if you shovel the ramp, we can all get in. Clearing the path for people with special needs clears the path for everyone. And why this works is because as you make your sites more accessible, you tend to make them simpler. Which makes it easier for everybody to navigate and use your site. I also like this quote from Eve Anderson, the director of accessibility engineering at Google. The accessibility problems of today, here we're going to talk about screen readers, are the mainstream breakthroughs of tomorrow. And what's the technological breakthrough that we are sitting on today? And we know, you guys all know, voice technology. Voice technology is exploding. And the bonus is, as you make your site more accessible to a screen reader, you are setting yourselves up for when voice technology is available all over the place for your information to get channeled to a smart speaker and all the devices that they're putting that voice technology into. So let's get to the top three things that drive vision-impaired people crazy. Let's recognize the semblance of a family feud board. Number three, survey says unlabeled buttons and edit fields. Let's talk about edit fields. How a screen reader works is it starts at the top, it goes from left to right, left to right until it gets to the bottom. It's extremely linear. So if I have not used the label, let me get this word right, label element to tie the name to the actual box. A screen reader is going to hit this and say, HTML forms, first name colon, last name colon, edit field blank, edit field blank, submit button. And it can be worse if I have other things on my page. If I have this kind of stuff, it might say HTML forms. Join us as we go first name colon, last name colon, edit field blank, edit field blank to Disney in 2020, more submit button details to follow. So it can be hard. The good news is, even though apparently Gutenberg failed its own accessibility test quite recently, they have made it really easy for you to make your sites more accessible. So here where it asks you to write your label, however you're going to, whatever you're going to call your edit field, it behind the scenes automatically uses that label element and attaches it to the actual box. So if you're building by hand, you need to use the label element and link the name of that box with the actual box. But Gutenberg does it. Okay. So the third most popular response was unlabeled buttons and edit fields. Number two, survey says missing alt text for graphics and tables. So graphics. There's three different ways you can look at graphics and all three come back to this idea. Why did you include the graphic? So we can think of graphics as decoration, as examples, or something that adds information. So as a decoration, remember that second video where Hadi said, Hadi said that we don't read things with the same intensity. We don't read everything with the same intensity. It's the same thing with images. Sometimes they need a lot of description and sometimes not. When you're using a graphic as a decoration, not. Now, you can skip on the detail. I'm not telling you don't be detailed because alt text is greatly appreciated. This is from that Reddit thread. Wikipedia has excellent alts for images. I looked at a few and this one made me smile. A photograph of a middle-aged white man with gray hair. His mouth is open and his arms are raised near to his shoulders, suggesting he's giving a public speech. He's wearing a black suit jacket with a light blue shirt and mauve tie. A purple and yellow UKIP rosette is attached to his jacket. I got several responses back that use that phrase made me smile, talking about labeling things. So if you have the inclination, be detailed. But if not, let's go back. It's difficult to find population numbers for sea turtles because male and juvenile sea turtles do not return to shore once they hatch and reach the ocean, which makes it hard to keep track of them. I have a question on that because the picture would have the alt text over there, so when it's reading it, wherever the alt text is, is it going to interrupt that paragraph? Yes, depending on how you have defined your regions and your headings. So it's not reading one column and then another column necessarily? Yes, necessarily. It totally depends on how you've done it. If you don't put alt text in, are you in violation of ADA compliance? Okay, so that's another fuzzy thing. Can you repeat the questions for the video? Yes, if you don't put in the alt text, are you in violation of ADA compliance? So you guys can correct me if I'm wrong. From what I understand, there is nothing legal yet. People who are bringing lawsuits against companies whose websites are not accessible are winning. So soon it will become law if not legislated from the bench. But at this point, there's still guidelines. Does that answer? Yes, am I wrong about that? Where is the guideline sheet? Will we get to near the end of this talk? I will help you with that. I'm not going to cover all the guidelines, but I will show you where they are. Okay, so I read this. If I took, when I took that picture out, it really didn't change the information that I was sharing. So on this, my alt text or fig caption would be a sea turtle. Basically, I want to tell the screen reader what's there. Now, graphics as an example, the amount of space between objects in a hive determines how the bees will build their comb. 3 1⁄8 of an inch is the perfect amount of space for bees to move around, and they won't build comb in that space. This will probably make more sense when I add the graphic. It doesn't add information, but it does help you understand the information. So I would spend more time on the alt text, honeycomb, some flat, some built out in an odd shape. Again, if you want to take the time to be more detailed, do it. It's greatly appreciated. But also, a little is better than none. So graphic as a decoration, graphic as an example, and now graphic that adds information. When we look at cola products, we see that most people prefer Coca-Cola. The least preferred cola is Pepsi Lite. Okay, this is not meant to be real world, although we are in Atlanta. Ask yourself, why include this? So I included it to show that Coca-Cola is way more popular than Pepsi Lite. So how might I alt Texas? Column chart showing 73% prefer Coca-Cola, 17% prefer Pepsi Lite. Now this is a judgment call. It really depends on the level of detail that's in your content and on who you are. I probably wouldn't pay attention to the different products or to the specific percentages. I would probably just look to understand, yeah, Coke is very popular. And let's digress here just a little bit because I think this leads to a concept that might help. Oh, did I miss this? I think I got mechs up there. Okay, so our sites are unique. You're unique. You're presenting your information uniquely. For example, I'm not detail oriented. So you saw my little alt text. And if you came to my site, you're not going to get nitty gritty details. My blog posts are pretty much going to be big picture. And you may or may not like my style. My husband, I'm sorry, this is going to totally repeat again. My husband is a very detailed person. And it drove him crazy as I was doing these slides because my alt text just do not have enough information. But people, our screen reader users are people just like us. They might hit my site and go, yes, an alt text. It's incredibly brief that just goes big picture. If they hit my site and they're saying, I wonder what other information was in that graphic that she's not sharing. I wonder how it could have impacted. Then they'll bail on me. They'll go and read somebody else's site that has all that detail. And that's okay. That makes it actually more comfortable for me adding the alt text because I can match it to what I imagine somebody would want from that image. Okay, last time you're going to have to look at this. So how much description should you add to your graphics? It depends on the level of detail that you're putting into your information and who you ask. So be yourself. Decide why did you put that in there and write your alt text to match it. Okay, I lied. You're going to have to look at this slide again. Sorry. Okay, so I wanted to use that same graphic because it's specific in the other two ways. So this is as a decoration. Charts are an excellent way to share the information quickly but mostly for the sighted. When using charts and articles, be sure to add a caption or an alt text to your chart so the screen reader can make sense of it. I would caption this column chart. If I was using it as an example, depending on how you organize your data, your chart can have values that add up to more than 100%. I personally would alt text this column chart where values add to more than 100%. On this particular one, Chip actually begged me to use this one column chart with six columns whose value adds up to 236%. It just details it's a judgment call. Okay, this quote is from a person on that reddit thread that highlights the importance of labeling things, the buttons, the text fields, and graphics. I don't use JAWS, which is a screen reader, but my dad does. And even I get annoyed at hearing it screech blank on some websites. And notice the verb choice there, screech. It's obviously a frustrating situation. Back to our board, number one. This was included by everyone who used the screen reader, and I'd asked open-ended questions. What drives you crazy? They could have said everything. It was, oh, survey says, headings, headings, headings. So if you do only one thing to make your site more accessible for the vision impaired, use headings. And here's what they mean by that. You can achieve this look by using very large font, making it bold or a smaller font, down to the font that you're going to use for the body of your text. So this gives you the visual clues that you need to see how the page is organized, but it doesn't help the visually impaired and it doesn't help the screen readers. If you add headings as formatting, you make everybody happy. So this could be a heading one, this could be a heading two, and then the body of your paragraph, of your text, I think Gutenberg calls it paragraph. And again, Gutenberg did make this easy because you have to define all of your text blocks. So just define your headings as headings, whatever heading you want, or define, I think the text is just called paragraph. If you're doing it by hand, you have to actually format it as the different headings. So how does the screen reader read that? What's it going to say? It's going to say H1, this and this, H6, this and this? I'm going to let him tell you. So I have three different clips of people because then you'll see kind of how it works. And they use it... Oh, I'm sorry. So how does a screen reader hit these headings and talk? Does it say heading one, Alexa and the elderly, heading two, whatever? And you'll see the answer to that. I have three clips from three different people again just to give you ideas. Oh, wait, I forgot to do this. Headings is also a means to get information about the structure of the content. It gives me a good understanding, with an overview about the major and minor components of the content. So I see that here... What's the future of 25? Accessible university one. It's an accessible university itself. It's a heading one. And under that we have... Future of 25. Future of the story, which is heading two. It automatically conveys the information that this section is a subsection of the heading about. You'll see that also that overall get an outline of the page and the major sections of that. And then the next two will explain that a little better. One thing you should know is that having a screen reader by itself does not make the internet accessible to me. If you look at our homepage and as I navigate through it you'll find that there are headings and regions which the designers have made some effort to put into the page that allow me to jump from section to section. So I don't have to stop and explore every little link to find where I want to be. On some web pages where there might be almost a hundred links but yet there's no way to skip to the main part of this article that I want to read. So I have to skip from link to link to link and jump from section to section to find where I want to be in the main article. Okay, and this girl's going to probably make you smile. And this is my guide dog, Pandy. I work at Desire and Learn. It will make sure I'm publicly accessible as it can be. I'm an avid web editor Common misconception that a lot of people have those screen reader feeders is that they sit and listen to the screen reader growing on all day. I don't have all day. I've got things to do. So I do a lot of skimming but I can only do that if a page is written on it. So here is how we do it. Perfect example is this homepage here. From the page name I already know I've been in the right spot. This is a landing page and when I look at the headings Navigation standing level 2 Link value in diversity Heading level 1 No standing level 2 link My courses standing level 2 linkable Calendar standing level 2 link I can start to get the structure of what's on the page and get an idea of what's there. What's there? Okay, so the first one was the biggest impact for the least amount of effort headings. Number 2 Adding the alt text for your graphics and tables and the third response was labeling your buttons and the edit fields. So here's the next three responses just for free. Number 4 was unfriendly capture. Now this is getting fixed. Yeah, it's unfriendly to everybody. But this is getting fixed because whoever wrote the algorithm that's now checking to see how you're using your computer. So if you're using it as a human it pushes you through if it thinks you're a bot it doesn't push you through. Which I love that. Because anything that is strong enough to confuse a bot is strong enough to confuse a screen reader. Not only that, I got a response back from somebody who was blind and deaf and her response there are no friendly captures for her. Which was sad. Okay, number 5 Hover cards that need a mouse. If you need a screen reader you can't use a mouse and apparently it's very difficult to move your screen reader back up to find where is that window that popped up that stopped everything. And then number 6 was fast read. Yes. So that's... Yes, and I got a comment too about it being silent. What do we mean by hover card? Does it mean the things when you hover over text a window or some information pops up? So I kind of blended two ideas and that was those hover cards and one of the comments was the fact that those are silent are a problem for them because they don't hear that oh there's information there I should go look for it. And then I mixed in that idea of a window that pops up because windows that pop up that require a mouse to go close it. And they hide those crazy little X's in different places. So both of those things are not easy for them to work with. So the sixth thing was fast refresh rates. This came back one part of it came back to a simple web page. So the first part of a fast refresh rate if you've set up your pages to refresh very quickly let me back up one more step. When your page refreshes the screen reader pops back to the top. So if you have a page that's refreshing quickly someone using a screen reader may never even get down to the information that they want. The second half of that is if your page has a lot of information on it and it's very complicated they may not get through the information before they get bumped back up to the top. And that's another reason that headings came up a lot because they can use the headings to map through. Okay I'm not the technical person in my oh I'm sorry. So examples of fast refresh rates and I have read this but I don't remember does anybody know because you can top it out to super fast. Does anyone know how many times per second that is or minute? Okay I don't know. I'm sorry. Okay do or answer with the technical person of our company. So we're upstairs if you want to come ask him Chip he will know the answer to that. That you have to X X out to get rid of. So what I understand because I researched oh I'm sorry what happens when a pop up window pops up and you have to go say okay or hit the X. So I researched this I don't actually use a screen reader. So what I heard back from them was you have to take your screen reader and bounce it around until it can find the window and then they can tell it to close it. The problem is finding it. Yeah. So the fast fast refresh rates that was very interesting. But tools or things like that that are easy to play or would make it easier for division and pair to find that close button so do I know of any pop up tools that are ADA compliant so that it does make it easier for them to close and the answer is I don't. So if you research that you can do one of these talks next time and talk about how fast the refresh rate has to go. Okay. Sorry about this. So I also got responses I'm not exactly sure what's happening just a second. I also got responses from people with low vision. So can you guess what the number one comment is going to be of what drives them crazy. Lack of contrast. Oh yes. Is that hard to see? Yes. That was amazing and it becomes a big problem as we age and the baby bloomers are getting older this is big. And some people put on their wish list that they could reverse that there would be an easy button to reverse the background and the text. And number two input field not outlined. So I found that interesting because I think and I shouldn't have said not outlined I should have said not clearly defined because I think that's true even on our site after doing this we have to change some things because lots of times those input fields are defined by color change or they have a really tiny little border around it. Here we go. I'm still learning. Back at one more time. And it is apparently very frustrating one person said I just have to keep poking at my screen until I finally stumble upon it. And when I read comments like that you can just feel the frustration. Okay so now to what you were interested in. I would like to change tags a little bit and just give you an idea of where the web accessibility guidelines come from. So we're not going to go through them and this is going to be one of those big pictures not very many details things. Okay. The web accessibility guidelines are called web content accessibility guidelines WCAG 2.0 currently. They come from the parent organization of the World Wide Web Consortium and they come specifically from a branch of the World Wide Web Consortium called the Web Accessibility Initiative. So here's a couple more definitions so that this is a little bit makes a little bit more sense. These slides will also be on our site which I'll give you the link at the end so you don't have to write if it's too much. Okay. The World Wide Web Consortium defines themselves as an international community where member organizations full-time staff and the public work together to develop standards like HTML, CSS, etc. They define their mission as to lead the World Wide Web to its full potential by developing protocols and guidelines. So the guy who started World Wide Web Consortium is actually the guy who started the World Wide Web protocols. I think that's the right word. So his goal is let's make this all work. It isn't necessarily just focused on accessibility for people with disabilities. So a branch of the W3C is the Web Accessibility Initiative or WAI. This is from their literature. The W3C Web Accessibility Initiative develops standards and support materials to help you understand and implement accessibility. They have a lot of resources and once you get into the lists of the guidelines, to me it got a little dense and it was easier for me when I went to YouTube and found somebody who kind of talked my language and explained it. But they did have a lot of help through how to implement the guidelines in different applications. So I thought that was interesting. I also thought it was interesting that they're open to the public. We invite individuals and organizations to participate in WAI by implementing, promoting and reviewing stuff. So if this is like a passion of yours, look them up. One of the groups that's open right now is the CAPTCHA group. So I wondered and didn't look to find out is that where that algorithm came from? So that Web Accessibility Initiative group Wing came up with the Web Content Accessibility Guidelines and this is from their literature. It covers a wide range of recommendations for making web content more accessible and then it goes into all the different areas that they work with including blindness, low vision, deafness, hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. And it's needed and this is why it gets complicated really fast. So I also want to tell you they came up with a 2.1 which adds to the 2.0 but doesn't necessarily supersede it. So that is your very general, very non-detailed overview. So let's go back to the core of what I really wanted to share with you. What drives the visually impaired crazy and what do they really want from your site? They really want defined regions and headings. They really want alt texts for graphics. They really want labeled buttons and edit fields. So websites are such a huge part of how we live and how we interact. So it's really important to make them accessible. So if you're overwhelmed with the thought of meeting all of the needs of every disabled person, start here. Start with these three things. And I think it's exciting that this came from them. I do not know how that got doubled. Okay. So do you have any questions that I might be able to answer that you haven't asked yet? Define regions. Is that automatically happened within WordPress? Okay. This was another kind of area that I decided to not deal with. So ARIA is what they call it accessible region. Does anyone know what ARIA stands for? I'm saying I don't know. Yeah, I can't remember either. So if you get online and look accessible accessible rich. Yes. Accessibility. He's saying something. Accessible rich internet applications. Okay. So if you get into that, you will again find a couple branches. So one of that is talking about going from your computer to your tablet to your phone, making it rich so that it can change. It can be accessible in all those ways. So you also have the disability side of that. And then part of that is defining the regions, which is the heading, the sidebars, the main text, the banner at the bottom. And no, I don't know about WordPress. Sorry. Yes? I know there are websites out there, but is there like a sample, say screen reader? What is a test? It's also on Oh, I'm sorry. Is there a specific tool that I know about that tests whether your site is accessible? So there are lots of them out there. And no, I don't have a specific one. But even on the WAI site, they will they have tools to test your website. And on YouTube I found some too. Sorry to be general on some of that stuff. You don't do that yourself like analyze somebody's website. I do not analyze it. So I'm part of create my voice and we work with getting content onto smart speakers. So I get to work with some of the accessibility stuff because the smart speakers really are quite vision impaired friendly. So this is something I enjoyed and researched, but I'm not I'm not the technical part of our team. Yes, sir. This may not be a question for this session, although it might be some of the folks who see this in the future decided to put together plugins. The future came the idea. For SEO, we have Yoast as a tool that says, hey, your SEO is looking pretty good. That's the right thing. It's not 100%, but it gives an idea. Is there a plugin for accessibility or word trust that does the same thing? So there is a plugin Yoast that tells you how SEO, how is your site doing with its SEO? And he's asking, is there something like that with accessibility? And that's another answer I don't have and I would be surprised if it's not there. One of the things that I ran into on YouTube was a site that they have actually in their word press people have actually built a program that will go out and gather all the images all the images from all of the sites that you're building and put them in one place so you can alt text them or slowly work through them so you don't have to go to. So I know that people are working not that. He's seen some plugins out there that are still in the early stages. Yes ma'am. Are they going to address these issues versus building your website or it's just going to already be easier because it's in one place. Right. So the question is if you build your site by hand you're not really aware of all of these different things. If you use a template will they be addressed more easily? So I can tell you yes, Gutenberg has worked on that. I don't know about other ones. So personally, I'm not a detailed person, I would use the templates all the way. So if you're a person who's detail, he loves to go into the HTML and do everything himself. So, hand pen to your. Just to accomplish helps you meet compliance with accessibility and it lists ten WordPress plugins to help improve website accessibility. Okay, so she googled ADA did you say compliance? I googled WordPress plugins for accessibility. WordPress plugins for accessibility and it came up with ten plugins to check your site. So you can find these slides at createmyvoice.com backslash wc-atl I'm also going to put in all of the responses that I got back because it's really eye-opening and it's good reading and if you do these three things and you're like I'm ready for another one, you can just pick a couple and make somebody really happy. So thank you very much for sharing your time with me. Thank you.