 My name is Sandy Feldman, and I'm going to be talking about making websites accessible and applying with the AODA. And first I want to thank the people who put this conference together. The amazing energy that they create. And thank you to the sponsors. So I am a freelance accessibility consultant and also a designer. I've been working with WordPress a little bit. I did a lot of HTML and CSS coding. Now, in the 1950s, pilots started having trouble controlling their planes. And at its worst point, 17 pilots crashed in one day. And cockpit design turned out to be the culprit. There's a lot of what is going on here, and that was it. Americans were bigger than they were in the last war, and the cockpits didn't fit anymore. So the US Air Force started spending a lot of time thinking about averages. They began measuring every pilot that flew for them. They measured 4,000 people. And find the average. And how many people were actually the average measurement? No one. So, okay, what does this have to do with web accessibility? How many web users are the average web user? And I'm guessing it's nobody. And how many designers designed for one user themselves? Or maybe two users, them and their client? Like too many. So think of all the ways we can adjust a car. Think of like the way you easily put your feet back and forth or the steering wheel. That all comes out of the Air Force work on being able to modify planes. Software is a million times more malleable than a piece of hardware, than a piece of metal. We want to design for everyone who's going to use our site. This photo is Tom Decker. Tom has two glass eyes. And what he's doing in that picture is he's teaching other people who can't see how to use their iPhones. Now just stop and think for a second how big a difference your iPhone makes, your phone makes in your life. Now, you know, how many of us use maps that say, you know, two left in 200 meters? Imagine if you were blind, that would make an enormous difference in your life. Having your map be able to talk to you like that. And that's one of the things that accessibility can do. Now we all use assistive technology, every one of us. But for those of us whose range of ability is in the normal range, that is technology that we take for granted. I'm going to have one example of elevators. It's like when was the last time you went to something on the 15th floor? I thought, oh man, 15, that's a lot of floors. Can I make that climb? How long is it going to take me? No, you think 15th floor, I'll just, you know, zip up. Tom calls light bulbs assistive devices for the vision dependent. So accessibility, accessible design, taking those needs into account when you're working, can make a huge impact on the lives of people who need that assistance. So accessible materials can make the difference between a kid finishing university and dropping out. It can mean that someone can live independently. It means being able to travel, being able to get around a city on your own. I'm going to tell you something. The woman in this photo, her name is Chelsea Muller, and she's blind. And she's also a university graduate with a full-time job. When she started working, her parents, and living on her own, her parents still helped her out a little bit. And one of the things they did was they did her groceries, because that was kind of problematic. So one day her dad comes home with her groceries and says, Chelsea, instead of almond butter like you had on your list, I've got you peanut butter because it is just so much cheaper. All right, now we all have parents, some of us have kids. You can imagine how that went down. She's furious. She's like, Dad, I've done a budget. I have a full-time job. I can afford almond butter. I'm good for this. It's not your money. Don't do this. There was a huge blowout. And this is a relationship problem that was entirely addressed by software. So this is the grocery-gateware site, which, it turns out, is pretty accessible. She was able to go on that site and order groceries and have them delivered. And grocery-gateway goes one step further. The delivery got a lot better. She'd go in the kitchen cover and put the tuna cans where the tuna goes and the salmon cans where the salmon goes. But that website means that she can do her own groceries and she doesn't have to rely on her parents to do it and she doesn't have to deal with the level of interference that most people in their middle 20s don't have to deal with. So how many people in this room have seen someone use a screen reader? So I'm going to play not the whole clip because it's kind of long. I've got a little bit of a clip of a user tester I work with looking at this site. Can you guys hear this? Oh, I see. Okay. Sorry. And now I'm lost track. I'm glad you guys are such a mess with my mic. No, I'm still not attached. So screen readers are software, is software, are software that provide access to what's on a screen for someone who can't see that screen or someone who first wants to look at the screen, someone with low vision who gets too weary. You know, loud but really what it's reading is the code so that the way that a developer writes code becomes really central to what a blind user hears when they're visiting a site. And there's elements that make a site easier to discover. And that is using headings, using aria regions, and the quality of the link text. So we want... Okay. So how do we know how to use stuff? How do we know what to do to make a site accessible? There are guidelines. The World Wide Web Consortium, the W3C, is an international community that develops standards for the web. Members include businesses and universities, non-profit organizations, governments, and individuals. Thank you, guys. There's a committee of the W3 called the Web Accessibility Initiative. And that initiative wrote WCAG, which is the Web Content Accessibility Guidelines. And this is the standard. This is people from all over the world coming together and saying, how can we make this work? The people who need the accessibility were represented saying, here's what we need. And these standards, these guidelines, were developed over time over an enormous effort. And this is an international standard. It's used by developers, by browsers, and it's used in legislation. And it's the same legislation every country you go to. So here in Ontario, we have the Accessibility for Ontarians with Disabilities Act. In the U.S., we have Section 508. And all over the world, there is legislation that refers to WCAG. It's something that if you learn about these standards, you're not learning your local bylaws, you're learning an international set of rules. The differences you find from country to country are, say, one country will say we need Level A by 2017 and another will say we need Level AA by 2018, that kind of difference. But they're still talking about the same levels. And why do we need this? Okay, Frank Lloyd Wright was an American architect working in the early 20th century. And he was five foot three, and he thought that anybody over five foot eight was wasting material and should not be panned or two. Okay, so a couple of years ago, I was on a tour of a Frank Lloyd Wright house. It's very beautiful. And one of the things he does is he has rooms with low ceilings and rooms with high ceilings. And this makes the staircases a little complicated because of the way the ceilings intersect, right? So there are all these people who are short enough that they've never once worried. Like, if you're six-five, you worry about ducking. But if you're, you know, five-nine, you figure you're good and you're fine on the stairs, right? All these people were, like, smacking their heads. So why does this not happen anymore? This doesn't happen because there are building codes. There are building codes that prevent people from making these headbanger decisions. And what WCAG is, is it's the building code for the web. So all of us for all these years have been, you know, some of us test our work. Some of us don't. Some of us test it with, like, people we know and maybe some of us test with people with disabilities, but, you know, maybe not. So what WCAG does is it provides you with guidelines that are tested and checked and are going to work. And what these guidelines require is that your work be perceivable, operable, understandable, and robust. And I think that these are goals that we can all agree are, you know, the minimum that we hope for. This is how we want it to be. And WCAG provides detailed guidelines and success criteria. And there is a lot to learn, but the basics are those four points. Now the AODA, the Accessibility for Ontarians with Disabilities Act, is Ontario's legislation that refers to WCAG. And WCAG 2.0 Level A has been enforced since 2014. This is in place in Ontario now. In January 1st, 2021, which is pretty soon, all public websites and web content posted after 2012 have to meet WCAG Level AA. So this is almost now, and this is important to know about. And there is much older legislation that we need to comply with as well. So this is Leviticus 19-1. That shall not curse the deaf nor put a stumbling block before the blind. I think when we're talking about making things accessible, we're talking about basic human decency. So WordPress and accessibility. WordPress has a very active accessibility community. And because of that, WordPress is often used in government sites and in school sites, hospital sites. People, environments that are obliged to meet WCAG and are held to the standard currently as opposed to the smaller sites that will be held to the standard in a couple of years. So WordPress has accessibility-ready themes. And these are ones that have been tested, have been vetted as being ready to start to use to make accessible sites. The reason they're called accessibility-ready and not accessible is you can take one of those and mess it up pretty badly. So there's best practices. I'm just going to talk briefly about Gutenberg and accessibility. I think that the back end of Gutenberg is not accessible. And that's been very problematic for the disability community. One of the things is that there are a lot of blind web developers. And people get to know a platform like this, get to work in it, and it becomes inaccessible. That's tough. They're out of a job. Unemployment in that community in Canada is about 60%. So it's not easy to bounce back from being out of that job. So there's been enormous pushback. Whoops, let me bounce back. On GitHub, if you search issues on WordPress accessibility, you'll find this is a screenshot from a little while ago that were over 1,300 issues and 182 were open. So a lot of people are excited about Gutenberg and I'm looking at the stuff that we can do or will be able to do and it looks really exciting, but it's not ready to go yet for a lot of people. And the lead on the WordPress accessibility team, and I don't know how you say her name, Ryan Rettenveld, I guess, resigned from the team because she felt that accessibility was not being given the priority that it should be. And when you consider that a lot of that community, it's thousands of volunteer hours have gone into making WordPress accessible and then to have that just thrown out was a pretty big deal. So she wrote to Matt Wollinwig, who is the Gutenberg lead, and saying, Matt, I want to say please take better care of your community because WordPress is nothing without it. Cherish the people who dedicate their own time and who work very hard to make WordPress the best it can be. Don't ignore or make fun of them, but talk to them, guide them, inform them. Don't be disconnected from the community part of it. So he got an enormous wave of kickback for the readiness to launch Gutenberg without accessibility being in place. This is another woman posting to GitHub, her name's Amanda Rush, and she wrote, I'm sorry, but how many times do people with disabilities have to be sent to the back of the bus for the greater good? How many times do we have to be satisfied with a whole lot of pretty words about accessibility, about how we promise we're going to do better next time, only to find that when it comes down to brass tacks, that accessibility really isn't a priority. So here's Matt McPherson, who's the lead there at Gutenberg, and he says, I want to get clear expectation that there may be accessibility issues we discover or possibly know, but I don't think when you go back to that issues on GitHub, I don't think there's a possibly there. That we are not able to fix before WordPress 5.0 is released. And then he goes on to commit that he goes on to say that he wants it to work and it's going to work, that they're going to make it right, maybe not write it first, but sooner or later. And I don't know for sure, but I think that the delay in Gutenberg's release has to do with its inaccessibility. And I think that maybe they did finally listen to that very vocal and active community. Another community are the developers and the businesses that supply large institutions that are required to meet this standard. So this is a screenshot from WP Campus where WordPress meets higher education. And they can't use this. They can't use Gutenberg because they are legally obliged to provide level AA access now because they're a big school. And they put out an RFP saying, just check it. We want an independent audit. Can we use this? And I don't know what happened with that yet. I mean, keep an eye on wptavern.com. But so how are we going to know if Gutenberg is good to go? I mean, firstly, you hope that the independent audit gets published. I assume it will be. Another thing is that you keep going to GitHub and you look at those issues. And when it goes down from, you know, 300 and something to like six, then you figure, okay, you know what, like that's, we're there, right? And then hopefully what it'll be is that when five action launches are at the to be decided release date, that it'll be good to go. So, all right, we all like, I think maybe everybody here wants to make something accessible. And I'm going to talk a little bit about what you look for to make sure that you keep your accessibility ready theme from going south. So, talk a bit about semantic HTML, that is the basis of accessibility. If I'm coding and I want some text to be emphasized, it may look like italics, but the code is not I for italics, it's M for emphasis. Because that is a semantic approach. You can tell that something's been coded semantically as you turn off your styles. If it still makes sense, I mean, it's non-beautiful, but if it still makes sense, then you've got it. If it relies on what it looks like to make sense to your users, then it is not accessible to the people who can't see it. One more time. All right. If your page relies on what it looks like to make sense to your users, it will not make sense to the people who can't see it. Now, there's another important group to think about, which is people who can't use a mouse. So, it's a surprising number of people. We're talking about people who are severely disabled who are using sip and puff sticks to navigate, but also what percentage of people over 60 have arthritis, or what percentage of developers have a repetitive strain injury that don't want to be used in the mouse. It's a difficult interface. Focus styles here are extremely important. So, if somebody's navigating using the keyboard, using their tab and enter and arrow keys, a visual focus style, a good one, will show you where you are on the page at a glance. If you're using a mouse, you've got that browser interface where the arrow turns into a hand where you're over a link, and you know what you just pointed at, and the hand shows you where you are. If you're tabbing, now just imagine, you're tabbing and you've got like 80 links in the navigation, which is not unusual, and then you've got like 14 links in the content before you get to the one that you can see, but you have to tab, tab, tab, tab, tab. Now, imagine you can't even see your focus, and it's so much work. Now, the other thing that is really good practice is to try to skip links so that people can skip the navigation, so that it's not necessary to listen to the same thing or, you know, just tab through the same thing on every page you go to. Blind users can skim a page various different ways, and one way is to call up link text. So, link text needs to make sense out of context. If you have click here as your link, that's not very helpful, or like read more. There might be like several billion of those on the web, and, you know, who knows where they go. A link that says writing useful link text, that's useful link text. And another, it's good for SEO as well, right? But, okay. Make your interactive elements obvious. Sometimes, pretty regularly, you see only color used to distinguish link. 8% of men are colored blind, it's, I think, about 3% of women. There's a lot of people who are going to miss an important part of the experience of a website. Legibility is really important in case you can't read that. And there's so much to say about legibility, I'm not even going to start. Color contrast is very important, and it's one of the very checkable things. So you want a contrast ratio of at least 4.5 to 1. And it is amazing if you have good eyesight, you think you've got good contrast, but you really don't. And it's something that as you get older, more and more people have difficulty with contrast. A year or two ago, I thought, oh man, I'm developing superpowers. I've used the contrast checker so many times that I can finally just tell by looking. And now a year later, I realized that wasn't it, right? Okay. I'm just saying that my sense of, like, I need that contrast now in a way that I didn't. It's part of what you're designing for is you're designing for your future self. You're designing for people older than you, people that maybe you care about a lot who need this stuff. Sorry? The minimum contrast. 4.5. 4.5. Okay. So another really important thing is to use headings to structure your content. And a blind user will call up just the list of headings which you can see here to get a table of contents of what's on the site. Some people will say that you can't have more than one H1 on a page. And that's not really true. But if you're going to have more than one H1, you need to be able to justify what it's doing there. It's important not to skip heading levels. So you can go H1, H2, H3, and then back to H4 and then back to H2. But you can't do H2, H4. It's very confusing. So when you're using your WordPress interface, whether you're using Gutenberg or the current editor, make sure that you select headings rather than style the text to look like a heading. Because again, if you turn off your styles, you will lose that heading. Every image needs alternative text. And that text is going to replace the image for people who can't see it. And it also actually works for Google as SEO words. But alt text is a huge, it's an art. It's such an art. And you really, you want to bring your writers in on writing alt text. So, you know, this is a phone jacked in to charge. And you might have alt text that says, don't forget to charge your phone. Or you might have alt text that says, plug the charger into the bottom of the phone. It's going to depend on the context. There's not one right alt text. You just have to think if you turned off images, what would make sense in that spot. And if you don't feel comfortable writing with this kind of thing, give it to your writers. And I finally just remembered what I wanted to say about links earlier that slipped my mind. Is that every link that goes to the same place should use the same link text. So if your primary navigation says contact us, don't use get and touch in the body. This is really important again for that link jump list so that your blind users know what's there and don't get overwhelmed by choices that don't actually exist. So, writers, think about reading level. What you want is the lowest possible reading level for the people you're addressing. Obviously, this is going to be different on a university website than on a site that faces the general public. You need your links to make sense out of context. You need links that use consistent wording. Headings to structure the content. And then I'm almost afraid to talk about this. Use ARIA labels to label your regions, create ARIA regions and label them. And again, this is a place where the writers might need to step in to come out with good names for those regions. Another important part of accessibility is for your navigation to say put. And this is actually WordPress is great for this because it's really hard to move your navigation around, right? You're working on a template, it's going to stay put. And also, there should be more than one way for people to find their way around a site. So often it's a search, it could be search in a site map. Those are the two big ones. Oh, it's like you've got a list of links at the top of your page. And that it stays there on every page of the site. Or you have like a list of links running down the left-hand side. Yes? Yeah. And then it's all gone, right? And it can be unbelievably frustrating even if you have all your wits about you. But imagine if you're somebody who's dealing with like a cognitive difficulty. Or another common thing is for a screen magnifier. So these people see maybe two or three letters at a time and they're scrolling around. If these basic page elements move, then that is really problematic for navigation. Do you scroll the screen down and it always stays at the top? Here's the thing. If you use your control plus buttons to increase text size. You have that sticky menu up there. You can end up with that menu blocking almost all the real estate on the screen. And you get like one sentence that you can kind of see depending on how big it is. Or you can get it like you've made the rest of your site invisible. So, you know, you can do that with media queries where you can say, if it gets big, unstick it. When it's, you know, but it can be really, strangely, that's a good question. It can be so problematic. Yeah. That'll do if they're all there. Or a site map. Or a search box. You know, whatever you can think of as long as there's more than one. There are a ton of free automated tools to test for accessibility. And these are really useful. Now, some give false positives. None of them catch everything. But if you use the tools, what happens is you pick the low-hanging fruit so that you can then send it for user testing. But you don't want to send it for user testing if there's a ton of easy to fix things that you can just fix without asking anybody. And what I like to do when I'm writing code is I will test it with a bunch of different automated tools. And because, you know, you fix it for one and then the next one, and once it works for that one, the next one catches errors that the first one didn't. And eventually you get something that more or less works. So here is a list of tools that you can use to test. And then once you've done that, it's a great idea to do user testing. And this is... Oh, sorry, sorry. There we go. I think the conference is posting all the slides. Yeah. So everybody got these? And user testing. If you can swing it at all. I mean, I think most of us know to look at the site on your laptop, on your big screen and your phone. And, you know, and that's a good place to start. And then you want to drag anyone you know who works, uses assistive technology in, who owes you a favor. And then you want to pay people and you want to pay them decent money because if somebody's coming to see you and they're blind, it's a difficult trip. You want to make sure that they're getting the money that makes it worthwhile. So this is a quote that I think for me really describes how things are. There is no neutrality in the world. You either have to be part of the solution or you're part of the problem. So that was Eldridge Cleaver who is a political activist in the 60s or possibly Charles Rosner who is advertising guy in the 60s. One of them. But I think when it comes to developing websites, that's so true now because if you're not making it accessible, you are setting up barriers. You are putting stumbling blocks before the blind. And this is something that you can find out how not to do it. Everybody can do better than that. So just to sum up, accessibility is already a legal requirement. It's going to be a legal requirement for every website in 2021 which is soon. You want to do it anyways because you are all decent people and it's the right thing to do. Use WordPress accessibility-ready themes because they're a great place to start. And use the free automated tools to test for accessibility. Thank you very much. You've got certain text and then you have images that as you scroll down the images it floats up and past and then you have a little bit of difference. Yeah, yeah. And wipes it. Yeah. I think you know what? That's okay because you're in charge of the scroll. I think some people get a little giddy from the animation. You have to be a bit careful about- Yeah. Would I? We're going to guarantee- No, yeah. Do we know what the protocol will be? Will the government of Ontario be analyzing every website? Will it be a complete base system? We don't know. I don't. I mean maybe you know what I'm talking about. And then another thing too is that if you have an accessibility statement on your site and it says something like, do you have a problem? Get in touch. Right? So I was working for some people who had like a big business approach to comply. Somebody wrote and said to them, I can't use your site. And they just- They just ignored it because they didn't know what to do about it. And eventually it ramped up. And we got brought in like a group I work with brought in around the time that the lawsuit was being talked about. But I think a lot of times the best allies are those people who are so angry because they have the energy. So you say, okay, what's wrong? And they say, you have no alt-tests on your image. And then you say, here, how is it now? So I mean, I think, you know, after reverse in the US, there are lawyers who hire people with disabilities to launch suits. I don't think Canada is that litigious. Especially if you were to respond right away and have a accessibility statement, it makes a ton of sense. I was definitely noting that down. And then the thing that's one thing, but the next thing is that you get right back to them. Oh my god, I'm so sorry. What? How can we help? What have we messed up? Where did we go wrong? And then you just accept it. So I had a friend who worked for complaints on their website, here's girl. And one day he got this email like two pages. There you go. This is horrible. Like a lot of them can't get my news. And it's so inaccessible. And he did this, he did that, he did that. And he started mixing things. And every week this guy would write back and say, okay, this is bad, but man, you know, this is not good. And you know, and eventually there was the budget to do a full redesign of the site. And what Scott took all this feedback and folded it into three designs. And the guy wrote back one, that looks okay. Ontario does have a check sheet that you have to do by December 31st on everything. Including like grants and staff and stuff. And the website is part of it. And you have to say, we're doing this or we scheduled it or whatever. Okay, okay. I just thought I would suggest one website that's based here in Ontario and Toronto. The Accessible Media Inc. You know already about that. So AMI.ca. It's a website that has a TV in English and in French and also audio. And it's for people who have a disability or disability problem. So it's kind of our leaders in some ways. And we can take examples on how the website is built. Yeah, describe videos and high contrast with things. What's the website again? AMI.ca. Accessible Media Inc. And it's for all Canadians. So it's like a TV channel or an audio channel, if you want, for people with disabilities. Yeah, cooking shows, for example, are blind. It's very interesting the way they have to describe a cooking show. Because you don't talk to the same way about putting a salt and whatever. So they have a very interesting way of describing all kinds of ingredients. I just wondered about text recisors. Can we just rely on the device to do that? Browsers are way better than they used to be. So Command Plus does a great job. And if you've designed yourself like that, you should be able to increase the font size. I forget if it's like 400%. You should just be able to keep in mind. There will be people who that's still not big enough. And those people may use software, the one that I can think of is ZoomTax. And you'd end up on a monitor this size. You'd end up with maybe two or three letters. And they just scroll and scroll and scroll. Or some people who use ZoomTax have the biggest available televisions and then port the display from their computer onto those huge TVs so that they can then get a sense of what's on the page. That would be through an Apple TV connection. Yeah. One of the things, this isn't a necessary word for that. But yesterday, I was on an installation site. Yeah. It was real time transcribing what I was saying right into the screen. Oh, very well. And what the other person was saying. No, how accurate was it? The word bitching I've used in the conversation turned into three stars. But it's fairly accurate. But I think it's an indication of where some of this technology is coming. Obviously, this comes from Microsoft. Yeah. I mean, this is getting better all the time. It's not there. But a lot of people who do captions, they'll get it automatically captioned and goes through and edit those captions. So it's a kind of- Now looking for- Do they actually publish this for your recordings? Yeah. Yeah. Yeah. Yeah. Do you decide to do that? Yeah. Yes. So many years ago when I was developing websites, we got into the standards that all websites for our sub-projects would have to text you guys a little bit in the middle. Yeah. Is that how you say it nowadays? I think it is. I think because browsers are so good at resizing tags. I mean, it really- It used to be something that they just did so badly. You were stuck with whatever. And if you're specifically in your styles, I'll want my text to be 10 pixels. It's like you were just stuck with users, whether they could see it or not. They were stuck with that. So you were in the little tags, right? Now the browser will override that. It's like, don't be silly. And let people increase tags size. So those three A's, they're more of like a kind of a branding statement now. I think that a really useful thing. There's a- One of the browsers has a reader mode. Yeah. Which is quick on it. It takes out all the garbage and focuses on giving you the text and in a happy size. And you can only provide reader mode if the code is up to par. So that's sort of one of the things why we all want to write good code is because then it enables reader mode. When a screen reader reads a page, how do you find it's the best way to organize the content for someone who would have to use a screen reader? Just the headings are one thing, but is there a little tricks with some face folders or to read that logically? You want to stay away from tricks. One of the really good ways to do this is use ARIA regions. And ARIA regions provide the information for one users that CSS provides to visual users. So that ARIA regions will be a region as navigation. If you have more than one navigation region, you want to label it primary and secondary. There's a region called main. There's a region called footer. You want to use regions, but ARIA, if you use ARIA, if ARIA is unused to choosing clothes, everything on the site should be enclosed. Content that's outside of your region or for content, it's very hard to find. You're better off not using it than using it wrong. And it's something I have to say if you can see, it's very hard to get ARIA right. Even if you understand how it works, it's so easy to break it while you're working. I mean, for me, that's one of the things that I always get user testing on is any ARIA regions I've put in, because it's like I'll put them in, I'll test it, and there's just one piece of software of all the ones I've tried. There's Visual ARIA, which is a brickpot, but that's really good for testing regions. It sort of uses CSS to draw boxes around the region. It shows you the label of the name. I was developed by this guy, Brian Gerard, who went blind when he was 14, and he's doing this now, because he's got this kind of... I remember how things used to look, and I know what I need now. And he just did this... Yeah. Five minutes. Okay. One more question? Two more questions? Yeah. W3C semantic market. Yeah. Is that important? Symmetric market. Is it swimming market? And, yeah. Well, I was just wondering, is there a deadline for raising the legal level to AAA after 21? You know, AAA is still, like, kind of the unicorn of accessibility. All accessibility was a little while ago. Yeah. It's like... We all love that idea, and there's some stuff that you can do that's AAA, so... You know, contrast is easy. Well, a AAA requirement is to have your wine height 1.5 m. That's an easy one, but there's other stuff that, you know... God willing, they'll get fines with that kind of budget, but it hasn't ever happened. All right, I think that's it. Do you recommend the word for pressing accessibility? I don't know, so I can't say. I should have stopped calling you.