Walking Down the A11Y Road - Lessons Learnt From... by Radina Matic

Speaker 1: Come on, no.

Speaker 2: Thank you very much for being here. It makes me actually very happy that so many people in this community are interested in this about accessibility together with the talk Diana Lee gave yesterday. This is a nice uh show up. So uh I'm going to be talking a bit about my experience about working on accessibility in this two projects, K Lite and uh uh Colibri. Uh I'm going to skip the two cents about me since Michael represented me. I'm far from being an expert, but that goes to my uh plays in my favor today because what I want to show you is that you don't need to be an expert uh to implement the basic universal design because only it is to care for your users.

Speaker 2: So We are working KLite is uh technically Khan Academy Lite. It's an offline server solution for distributing uh video content, educational video content in um places in the world where uh internet is not available So what we have is the uh server which would uh distribute videos in schools, orphanages, refugee camps. prisons where there is not uh not active there is not sufficient uh video or the internet connection to be able to deliver successfully video content That's not the only type of users we get.

Speaker 2: A couple of weeks ago we had a guy contact with us because he was going on a private cruise And he wanted his kids who will be on a yacht to be able to watch Khan Academy videos. Not particularly type of user we had in mind when we started. We are trying to bridge this digital divide and uh just one moment is that How did we meet, me and Learning Equality? Last year Learning Equality was chosen to participate in Google Summer of Code project was one of the organizations and I was lucky enough that one of their core value was Universal Design. and

Speaker 2: uh that they liked my proposal. I uh presented because accessibility was one of the things I was trying to uh getting passionate about and trying to work more and I was lucky enough that they liked my proposal. I was 44 at the time, which goes to say that you can never be old enough or bold enough to get passionate about new things and try new things. So why do we care? I mean I'm conscious that I'm lucky enough to work for a non-profit. where universal design is a core value. But I'm also aware that a lot of you work for digital agencies, organizations, where various stakeholders you have to deal with do not share the same stance.

Speaker 2: So I'm going to start this presentation just running through a couple of things that you might use as even though I'm convinced that I don't have to convince anybody here about why accessibility is important. I know that you might have to deal with some questions or but why investing time and effort into implementing universal design So let's go and see a couple of arguments that might help you with some of those unconvinced stakeholders. So who benefits if we implement universal design, if we work on accessibility? Just the disabled people? According to a health organization, there is one billion people in the world

Speaker 2: With some form of disability. That's 15%. In real numbers, that's more than all population of Europe, for example. Some European starts show that one in four Have some form of disability, both moderate to severe. That's like more than the whole population of Germany. So it's not an edge case anymore. Another argument might be does only people do only people with disabilities benefit when we implement universal design accessibility? This is the sketch from

Speaker 2: Graham's Bell first prototype for a telephone because even though his relationship with the deaf community was some somewhat torturous. His interest in working with deaf people because his wife and his mother were deaf eventually led to his uh research into uh devices, hearing devices, that eventually led to him patenting the telephone and that with other research done at Bell Labs connected to transistor and transistor radio to what we today have as This thing that we cannot live without. Mobile phone. Anybody here without a mobile phone?

Speaker 2: Wow, one person. Okay So we started with trying to uh help somebody with disability and ended up with the project that benefited everybody. That's not the only case Like a month ago I gave similar talk to a group of undergrads, so I didn't get to use this line, but here I can. How many here are parents? Okay, so I guess you are thankful for all those curb cuts you encounter when you have to push crafts. Those curb cuts are there because they were necessary for people with uh wheelchairs Or you you don't have to be a parent. Anytime you have to have a trolley with you because you're traveling, you're also making use of those curved

Speaker 2: cards. So designing for those extreme cases eventually benefits, leads to better design for everybody. If you want to take a more social view of this subject The parental leaves, paid parental leaves that now many women have eventually ended up to rights of the fathers to claim the same. Maybe not in our country, maybe not right now, but eventually this is going to happen. So designing for Steams benefits everybody. It's also good for business. You have several arguments to present why implementing certain tenants of universal design may be good for business. Good accessibility benefits search engine optimization.

Speaker 2: Mobile designs are usually have better accessibility. I've heard several times from blind people that they, for example, use directly. uh Facebook or mobile versions instead of a desktop version because it's more accessible. So these two things are connected. You have increased market share because you now have included all this a group of people that was excluded. eventually. So you don't have to put up fires. You try to think about accessibility from the beginning. Oops, sorry. One, before. And don't wait for a QA phase of your project to think about accessibility.

Speaker 2: If you try to build in that visibility from the beginning, it may increase your budget for a couple of percent, one to three accurate. But if you try to retrofit a project, a product that was designed without thinking about accessibility, it goes 10% up. So if all these carrots that are presented, like Shashir numbers, benefits for all, benefits for business, were not enough, let's use a stick. We have Sorry. Standards and laws. In many countries, especially if you work in public sector, accessibility is built into law. So not be observed. Or you have legal risks.

Speaker 2: Here in the US you have section 508 and American for Disabilities Act and in European Europe. Right now, a couple of months ago there has been a really important decision by European Union about implementing web accessibility on the whole uh European Union level. And of course the web content accessibility guidelines were established as an ISO standard. There's one thing that I want to mention, just uh accessibility in all the recent legislation is starting to be considered not as a property of the person. Okay, not as something is missing in a person, but like what happens where the person interact with a certain environment

Speaker 2: which makes it accessible for them at that point. So it doesn't mean it has to be something permanent. You can be disabled because for a while, temporarily. You broke your arm, a leg, you have an eye patch. You are temporarily disabled. You can be situationally disable. For example, me in a sunlight, I'm useless. Alright, I don't have official disability But I cannot do anything in a sunlight without really really big dark shades. So this vision of accessibility is the confluence between what you are and the situation that you are in. is getting into uh into legislation too. And of course

Speaker 2: standards and laws also end up in in courtrooms. So you have several Really important law cases above accessibility, especially here in the US, a bit more litigious society than Europe, for example. This last list. Carl Groves is one of the flexibility consultants who started this list back in 2011. Hasn't been updated in it until a couple of months ago. It had maybe 50 Uh in a in about a year or two. And then recently he updated it now. This list has more than two hundred and fifty legal cases. one uh on account of accessibility breaking accessibility laws and legislations.

Speaker 2: Okay, so I'm gonna uh start now about the hour, mine , lessons learned from working with stability on this particular project, KLIT And I want to share the most important lesson that I learned right for right away. It's like you have to think about offering alternatives for the content to your users. Let's get on with these low-hanging fruits that we managed to take care of in KLIT Ah yeah, of course, sorry. One other that I discovered a bit uh later. This is actually uh from one really Nice video from Don Norman. Displayability and feedback.

Speaker 2: Another thing that I would ask to keep in mind all the time when you think about web accessibility specifically. So, first advice. When you think about document and structure, the first most important things that you have to do before even diving into more deeply into content. uh or HTML or JavaScript or whatever, declare page language because otherwise if you have content in French But you do not declare absolute language. You will be having your uh screen reader write that language as it was talking as uh Delboy Trotter from Only Fools and Horses. Somebody know that Syria? It's a British serial from Maybe eighties? Okay, I'm getting this is not a good reference for American public. I'm sorry.

Speaker 2: That's really, really funny. I wish I should have found the Delboy speaking French. Okay, more of the things about document structure. declare title of your page. That's the first thing when the screen when the browser loads your web page. The screen reader is going to read the title of the page and the browser, name of the browser you're using. It has to be distinctive from one page to another. You cannot have the same one, otherwise the people, the users are going to be without context. Ideally, the title should be similar or the same as the first heading on your page. This is the homepage of the K

Speaker 2: Lite. Okay, and this is one of the first things I actually did during my uh GSOC internship last year. The pair does uh area page landmarks which can be either semantic HTML5 or area. Semantic HTML gives you a really really lot great accessibility features. for very little development amount effort effort. So it's something that you can get into habit or of doing correctly from from the start. Habits. This may be a bit confusing, but uh this oops sorry.

Speaker 2: The resume, next steps, and explore are part of the page where the headings have been chosen because of how they looked, not because of the proper the proper nasty. So this tool is something I'm going to show you later in big detail. One accessibility checker called ToteLe, Totewali checks for all nested uh headings in your page and shows you what you need to to correct Keyboard navigation. Annalie mentioned that yesterday. If you don't like the default one bar that browser shows on your project or web

Speaker 2: Just define your own but don't put outline zero because that's like big big big big fail Just to show you, because we didn't get to see that yesterday in case you never saw the people who use exclusively keyboard navigation. Men over there has what's called headwand. It is the only way he's able to navigate through a web page pushing it with the little movement he has available in his map. There are other devices like Sip and Puff, which also allow people to navigate by keyboard, or with some more mobility people could use different types of pointers

Speaker 2: like this one. For example, for video player, we use the video JS of Win Kale Lite and it had. Visible focus already defined in CSS, but it was too slight for me. So I just simply edited the CSS and put a bit more a bit more stronger indicator which of the controls in the video player control bar is active at the moment So when you're keyboard navigating through the controls, you know, you can see exactly where are you at that point in time. And I recovered images and this uh out

Speaker 2: attribute uh yesterday, so don't want to um stay too uh long. I just want to say um In our project it wasn't important because it was offline solution. But I cannot stress enough of how important this is for search engine optimization, the benefit you get from correctly describing the images you have in your project. Because for all intents and purposes, Google is blind. It doesn't see the image itself. So if you do not put some textual information about what is in that image you don't you cannot reap any benefit neither for such an intelligent neither for people who use the the screen reader. If you don't have to trust me, just Google image out you will get more results that talk about how to optimize your

Speaker 2: search engine than about accessibility. Then think about think about your content development network can be down so you can upload images Whoops, links and forbes and back. Okay. Big fail. I only mentioned that yesterday. Links must be descriptive. Do not put just click more, click for here or here to do whatever. Put the whole description of where that link leads inside the label all the all the forms.

Speaker 2: Check when you test Check the form with errors. Are the all the fields which are required indicated correctly? Do they have where does um focus return once the form is submitted Those are all little details, but make a page inaccessible, form page inaccessible for you for people who cannot see. See tabbing water through various fields makes sense. It is the same that you would expect with new when you see. Okay, cause and contrast, we also talked about that yesterday.

Speaker 2: I just wanted to mention two things. The collision deficiency affects roughly about 10% of the population and that's mostly men. About 8% men, 2% women if I recall well. That translates to a hundred million users in WAPS. So think about that. This is the tool that I wanted to show you. It's really simple. You can either load it as a bookmark web and uh choose it from whatever you are doing at the time, or for example, we had it installed in our uh in our uh project and executed only while we have the development version. It's actually made by

Speaker 2: Khan Academy so it was like in-house solution Okay, another thing regarding the color contrast, nice example. Anybody from London here No. Yes? No. Okay. Doesn't really matter. Because uh if you look carefully, do you see something? specific about the lines and colors of these metro uh metro lines, London metro lines?

Speaker 3: They're uh a bit hard to tell apart when you've got a bunch of them

Speaker 2: Okay, but do you see something that green has a yellow dozen and yellow has

Speaker 3: Visual indication.

Speaker 2: Exactly. Think about this solution. When I showed this with this image to a user experience lady in our team, she said, wow, the whole new world of possibilities. Because what you have is possibility to offer alternatives. Do not use color alone to convey meaning. Combine it with something else. That's exactly what they did here in this map. So that's the takeout offer alternatives here for color and contrast There are several accessible multimedia players with options. For example, this one. We don't use that one, but it's really good because we have the option for transcript.

Speaker 2: That means that it loads the subtitles and captions you have and makes it available as a transcript so it can follow in a block of text instead of a um usual position for subtitles and it's signaling you which phrase is read at the moment. The tag. com website has also the really good uh example uh of that. So offering these time captions and transcripts for your video and audio content does benefit anybody who is auditory challenged. improves comprehension, makes the content searchable, okay, and referenceable for everybody.

Speaker 2: And it can also help somebody who doesn't want to play video out loud Okay, it doesn't have uh headphones at the moment. So you can just shut up the audio and continue to to to view Another thing important. Please please please please please don't auto player content. Awful People who who are not uh uh challenged or cannot see can see I I personally hate uh uh when it starts playing. the the Firefox extension which blocks the all the all the videos flash videos until I specifically tell them to start playing so there are ways and ways to let your users

Speaker 2: how to actually choose whether they want or not to consume some really nice piece of video content that you created the produced So that's really really big accessibility fail. So don't auto-play, but let it play So if you have an audio version of your content, either natively or make it available to screen readers. That benefits both blind users and all those who prefer maybe to listen instead of uh reading. Okay, if you are, for example, you know, driving, you would probably prefer to listen to something instead of reading. Another example

Speaker 2: what uh what I did last year with uh with Kayle like this is for example the the part of the page where the learner is presented with their progress So you had one specific type of content, well, topic, addition, subtraction. There were two videos and two exercises. The learner did not start video, but they did start both exercises, did not finish it. When they finish it, it starts to be dark green. Another piece of another topic in in this in this lesson. So this is how it looks like for somebody who can see. And when I put this page through the screen reader, this is what it read. Having level two clickable link.

Speaker 2: That's how it reads because the screen readers always give user the context So at this moment I'm reading what is heading in this page and it's also clickable And it's heading level two. It's not H1, it's H H two. And it's also clickable because this is this is a link apart from being a heading. Then the textual information, what is addition with subsaction? Then it read two. That's this little two here And then it goes down, it says two, this is two, and it says 100%, because here you have 100%. So how much is the learner able to understand from that? Same here, heading level two

Speaker 2: clickable link, title of the topic, 10, 10 videos, but you know your learner does not know that. 40%, is this 40, 60% is hearsay Three, three exercises, but the learner does not know that. 100%. 100%. So diving into this involved Using it uh for the K light we use the bootstrap so there was this uh class this is class uh screen reader only SR only so that effectively takes away from the page whatever you put inside so the people who see your page, your project, cannot see it, but it's read by the screen

Speaker 2: because it's still in the page even though it's not visible. So this is kind of Jabata had to do we dive into all these conditions inside handlebar conditions So that the missing information, which is essential for the context of the learner, is presented. So all these divs and spans are the information which was necessary. So the uh and result was something like this. So now we have heading level two clickable link, didn't touch anything there It says in this topic there are two videos that goes even before this icon appears. You haven't started to watch videos, that's because here there is nothing

Speaker 2: Okay, there are two exercises in this topic. You are still working on all of them because they are light green, those are the the conditions from before, you are still working on, or you are still working on all of them. The same thing for for this. Then videos you have completed 40%, but you're still working on subject systems. percent there are three exercises still working on all that so that's one type of thing that you will have to do check the output of the the screen reader and then input the missing information some other way And only mentioned yesterday, screen readers are are marvelous pieces of software which existed much before

Speaker 2: internet, but they have a really steep learning curve. So there is one thing that I mentioned later in resources. There's a small Firefox extension which will give you like the textual output. of what screen reader might read. There are other options that I will show you later or what will give you approximate because even the screen reader reads differently The most used one traditionally kind of Microsoft of uh Microsoft Windows of screen readers called Jaws reads link in a certain way and NBDA which is a free version getting popular every year linked slightly differently and and and they're not uh there is not

Speaker 2: standard for that Okay, so with this I would like to close a bit the uh chapter about stuff we did, these low-hanging fruits we uh used to do um accessibility um improvements for KLIT. And I'm gonna jump to the new product we do. called Colibri, the second generation, and it was the ideal solution to start baking in accessibility from the beginning, which is how it's supposed to be done. So let's see what it looks like when you put accessibility from the start. My different is uh still

Speaker 2: not listening to me today. Uh person who works a lot on accessibility for Drupal. Okay, so he's great. Uh accessibility keeps to follow on Twitter. He is quoting somebody else. So what are we trying to do with Polygree? Collaborate so when the design team started to work with the early prototypes and putting down the wording and examples for the usability style guide the accessibility is taken into account. Start leveraging semantic HTML5 right from the beginning

Speaker 2: It's not difficult, it's not easy to choose a JavaScript framework or libraries because a lot of them do not have accessible components. Some do, a polymer comes to mind. We end up using Vue. js. I have some things can be accessible, other you have to work on them at home. But you consider that whenever you're choosing all the frameworks. And when you start working, when you chose one, then you take into account that you have to uh keep uh adding accessibility on your on your behalf. Okay, so

Speaker 2: this is one of the first that the design team proposed. Real nice, clean, but pass through the checkers. Contrast was not ideal. So basically I iterating accessibility is the same as anything else you iterate in your development process. You discuss it with the team, see what's working, what's not working, and you end up with the improved solution. So this is much cleaner. more or less similar to what they had in mind from the beginning, but at least green all over regarding contrast. Then you have to brainstorm about the position of the elements. How do you want to put the navigation? Do they go into header? Do they go into the main piece of content?

Speaker 2: This is all the stuff that we did uh with lately. Also another thing that you keep in mind is Sometimes you use CSS to position differently your piece of your project. It can be one way into in HTML, but then it turns out another way when you when you render the page And then discussion about accessibility properties, this is just this you don't have to read this. Accessibility properties of elements happens the same way it happens for all the other things that you your product feature. You discuss them. For example, this is one where we try to use UJS. I use this video

Speaker 2: hidden class. and try to leverage something without working on the component itself. So we have these attributes for the for the icon. It gave the information. This is a Chromi. You have the content here. What is red? Accessibil properties in Chromi uh inspect window would give you what will be red. By the screen here this is kind of a mouth. Okay. So this was the first idea, but then we ended up correctly computing, adapting the component itself. So this is the counted icon component and we computed the alternative text so it can leverage those two properties

Speaker 2: automatically. And I just wanted to include this because I was so proud. I was mostly MAA last month or so So my team worked, I kept an eye on what they were doing. They were doing bookbush yesterday and I was so proud because They reported keyboard navigation doesn't work an audioploy. Keep a word doesn't want the video player. Tabbing through PDF uh viewer does not so I was so proud that the last year or so that we've been working on including accessibility stack They are including that into workflow. So I'm just including this slide because I'm proud of my team. How did we do that?

Speaker 2: For the last six or seven months we've been practicing something called accessibility peel. I tried last year during my internship to do like a big one-hour presentation of accessibility for the whole team and there are also a lot of interns from San Diego, University of California, San Diego, but it kind of was not did not get the result that I wanted. So they changed the format and in all hand meeting, all hands meeting that we have once a week I try tried to present like the bite-sized information about accessibility that I could fit into 10 minutes Okay, choose a small topic. It doesn't have to be this is a collection of uh slides that I had these last six months.

Speaker 2: We are happy to share if you want. It doesn't have to be a formal slide. Okay? One day we did the demonstration of how to put the alternative text for tweets or for Facebook posts So our social media people can practice what we preach. And whenever they tweet or put the Facebook post, they do that Or one day I made them sit around the table, turn around and watch the walls, and another person of the team put up uh two short videos from uh YouTube which were actually with audio description. It's the only way the blind people can watch movies if the movie is audio descripted. So there you have the explanation of the of the context.

Speaker 2: So it doesn't have to be a big formal thing and it doesn't have to be one person. Everybody will tell you that you get best results if you have somebody spearheading. Accessibility in the team or in the organization. If you don't have that person, it doesn't have to be a burden of one person. You can divide that. Anybody can prepare research in two hours and prepare the small Bites us information about accessibility once a week if you have a team then it will you know take any two every two months to get to the same person again. So that information uh And accessibility becomes the part of the workflow.

Speaker 2: Okay, what I created also was a tool repository. We have it in our wiki on a GitHub page. So that's like the if they have a question and don't know what to use, there is also there's already a list of tools that can be used Accesability is a shared responsibility. So uh on on this web page web uh accessibility initiative there is a nice table that you can study if you have a more formal and bigger organization how to uh Separate responsibilities so it doesn't fall on your person, especially it doesn't should not fall on QA. Because if you didn't do it before the QA phase, then you are in trouble

Speaker 2: So to sum up, put accessibility in your everyday development team life I'm happy to share the accessibility pills. I'm happy to share all the links from the tool repository if somebody is interested. And don't rely on automatic tested. Try to implement it of course, but the technical compliance, meaning when the checker says yes, everything is green, does not meet functional compliance. If in any way possible, involve the users, test with actual use. It's a process. It's not like a project, it's not one phase, has to be done from the beginning Rome wasn't built in a day and there is no such thing as 100% accessible. But you can fail

Speaker 2: and then you can fail better. And I here have several slides with resources. I'm not gonna dive into it because we are finishing time. I want you to fully have like five minutes for questions. They're going to be inside the slides for almost everything that we mentioned. They're links with tools and resources. I just wanted to say that with all these resources it's never been easier Play-through resources. So improving accessibility does involve additional effort, the effort of inclusion and thinking about how to present our content to people who may not consume it the same way we do.

Speaker 2: But that additional layer effort to use that quote from one of my favorite sci-fi characters. This cause is just and it's fair and it's necessary. So from both human business and and and legal point of view. So please go and make your content as you care for all your Thank you. I think we have exactly four minutes.

Speaker 4: So thank you so much. That was an awesome talk. The question I had was around finding real users. If you don't know people from certain communities, how do you, how do you not find them, but how do you find them and ask them to test your products so that you can make sure you hit all your accessibility. Yeah, these

Speaker 2: questions come up every talk. It came yesterday with Analyze talk, it's not the first time I hear that. There is no simple answer to that And it differs from country to country. Okay. In some countries you have associations of users okay to whom you can eventually reach and treat uh the the possible testers from that community the same way you you you use uh you treat the subjects for your uh usability testing The same way you are paying the the people to use in to to participate in your usability testing, you'll probably have to do something similar. Of course, since we are talking about the reduced population, it's going to be that much harder to find them and to actually engage them into something, but it it is it is doable.

Speaker 2: Just you know the only thing I can recommend is actually going to if in your territory your country uh check out the associations and uh the citizens groups uh who try to um influence the policy in that in that sense, they will probably have uh they will probably have uh access contacts. I'm sorry I don't have a you know better response to that.

Speaker 5: So one other quick question. Could you put up your slide with the resources with the screen readers? I mean I can get the slides later, but I'd love to see it. You blew past it pretty quick. I just like to figure out how to do the Firefox extension that gives you the ability to see what the screen reads.

Speaker 3: Thanks?

Speaker 2: Yeah, thanks. Gotcha.

Speaker 3: Thank you.

Speaker 2: No, because that I usually want to make my slides in PDF accessible and that's a little bit more effort, so that's why my slides are not immediately available after the talk. But they will be, I will share them in Slack, I will share them in Link on Twitter, on my SlideShare page. So they will be there, just maybe not today, maybe not tomorrow The speeding of accessibility is also uh requires a bit more effort.

Speaker 3: Thank you.

Speaker 2: Other questions?

Speaker 6: Hi, thanks for the great talk. I'm curious about how screen readers deal with some of the dynamic content that I'm gonna guess a lot of us are putting together so dynamic Ajax requests that are you know put through a client-side template and then dynamically altering the DOM. Are screen readers able to deal with that at all or

Speaker 2: I would say that the modern versions, the recent version of screen readers, of course, have that option, but what you have to do in your page, there are several area problems and properties That's uh rich accessible I'm not even sure how to pronounce that. Anyway, they have uh properties that you put into the content which is refreshed So it tells to the user if something changed in the meantime from the first time the page loaded, it will announce that. So you wouldn't have grades, you have area polite, which means doesn't interrupt users into anything they're doing and there is area uh Nounce strict or something like that, check the specification,

Speaker 2: which will announce it immediately. So it's something like really big error is happening, you have the option to tell the user, listen, this is change you have to you know pay attention to this immediately, of course, use that with uh with consideration. So yes, that there are certain things that you can do uh to For to inform the user about dynamic content. Okay, I'm anyway available after the talk. I'm available for the next two days. So if anybody wants uh to chat all about anything else. If you have specific questions, please do

Speaker 2: do come around. Thank you