Accessibility: It's More Than Just Screen Readers

0 0

[Music] [Music] great okay hello everybody and welcome to accessibility it's more than just screen readers my name is Stephanie Slattery and my twitter handle is sublime March if you feel it in your heart to live tweet me I'm a front-end engineer and I specialize in accessibility I've led accessibility audits and fixes for all sorts of clients and I give talks and workshops about accessibility to lovely people like yourselves across the United States I work for a place called clicks to ACOG oh we are a design and Technology company we work with ambitious teams to create industry-leading digital experiences and our philosophy from day one has always been really simple just build something we're based our business is based on three things and just those three things quality education and people and it click we place a strong emphasis on diversity and inclusion and that's why I'm able to speak to you today about accessibility let's get started so what is accessibility I have a great definition for you it's the design of products devices services or environments for people who experience disabilities and it's the practice of removing barriers that might prevent people with disabilities from accessing all of those things technology really shouldn't be a barrier to people it should make people's lives even easier I can't imagine that there are many of us that would say I write my code to make someone's life harder to make someone's day awful maybe you do that I don't know your life but should be trying to make people's lives easier with the things we make and I've found in my work with accessibility that it's easiest to understand what accessibility is and why we care about it by talking about disability first so there are a few general categories of disability to think about when we're designing for the web or really any technology I'm gonna give you a list but it's important to think that this is not an exhaustive list it's just a starting point for understanding and also these disabilities could be the result of disease trauma or some congenital issue so the first category of disability is probably the first one you might think of when you think accessibility when you think designing a website to be accessible that's visual disability this could be complete or partial blindness low vision color blindness things like that the next is hearing so this includes deafness folks who are hard of hearing things like hyperacusis which is the sensitivity to certain frequencies and volume ranges of sound next is motor disability so this includes things like paralysis cerebral palsy carpal toll syndrome repetitive strain and things like dyspraxia affects the planning of how you coordinate your movements when you move your body in some way in general these can cause an inability to use a mouse a slower response time than somebody with a disability or limited fine motor control so those are the motor disabilities and the last one is kind of disability include conditions both that alter your ignition head injury or a development ability or autism and learning disabilities like dyslexia dyscalculia or ADHD a lot of the times these can cause things like a distractibility or an inability to remember or focus on large amounts of information and these are categories of disability that people don't always think about when they're thinking about accessibility but are just as important and here's the kicker all of these people use technology they use the Internet whoa right whenever I give a talk like this there's always somebody up to you after who is shocked that there's somebody who's paralyzed from the neck down who's using their website they're surprised people who are blind use their website all of these folks use technology and it's helped in part by assistive technology so heard the title of my talk it's not just screen readers but a major assistive tech is a screen reader now these are even cooler than you might think they don't just read the text on a website to the user they also tell the user information about how the document of the site is structured so the accordion and it opens up this pitch or this is a link and it'll go to this place there's a ton of detail that a screen reader can give a user it's awesome another kind of assistive tech is a magnifier so this can either be hardware but like a physical magnifier you put over a screen or a software magnifier I'm sure I'm not the only person that has accidentally zoomed on a browser and everything's gotten huge and giant letters one example of a four magnifier other assistive tech includes large print and tactile keyboards so these keyboard keys will be much larger than an average keyboard key or will have ways text or other indicators that make it easier to either see the keyboard or feel the key you can hit them correctly other assistive tech our eye gaze and head mouse systems these are so cool these are devices that track the way that the users eye moves where it's pointing looking at a screen and then enables the user to click and move a mouse and whatever they need to do just by moving their eyes awesome another assistive tech is one that the folks in the room and if you're watching this recording you can see this right now speech recognition either an automated system or a person who is physically typing what's being said you also have this if you have most smartphones on your phone if you're talking miss Siri if you're talking to Google it's recognizing your voice and interpreting that command and that's assistive technology this also include closed captions which again we have awesome speech recognition powered closed captions that you might be using right now and these might also just be written by a person as part of a transcript when a video is put on awesome two more examples that I have pictures for you so you can understand a bit better this is something called a sip and puff device this is used to send signals pewter or device using air pressure and you step you inhale air or you puff exhaling air on a straw or a tube you can see this gentleman is using that in this photo to give commands to a computer or a wheelchair awesome just using air pressure another one is a head mouse or a head button system so you can see there's a little sort of trigger like button next to his head he's able to just move his head directly against that button in different patterns different strengths as a way to give commands to a computer awesome right so many different assistive technologies that people are using right now to use your website your technology you've created cool ok but why does this matter so there are some people that use assistive tech why do we care well in the United States one in five Americans have some form of disability that significantly impacts their life this is as of 2010 according to the US Census Bureau and you might be thinking one in five I'll represent that in a different way in the United States alone that's fifty six point seven million people have a disability of some kind or another and this is even more of course around the globe according to the World Health Organization in 2011 about 15% of the world's population has a significant disability and that's about 785 million people worldwide a lot of folks all of these people in the United States about 1 in 10 Americans about half of folks with a significant disability have a disability that impacts their computer use directly they might use any of those different assistive technologies we mentioned before but here's the thing accessibility and designing your product or service in an accessible way helps everybody all of those different categories of disability we talked about require different kinds of adaptations in the design of web content or their technology but most of the time those adaptations benefit everybody not just people with disabilities here's a traditional example in meatspace of a curb cut will sometimes call this idea of designing something excessively that helps everybody a curb cut effect so in this image we have what looks to be a curb up against a street we can see a pedestrian walkway and in the space going down to that walkway the curb sort of indents it makes a little ramp from the sidewalk down onto the road it's called a curb cut here in the United States and this of course helps folks with disabilities so folks who might use a wheelchair to get down from the curb onto the road but this also helps people for example who might be pushing a cart of groceries or someone pushing a stroller with a baby in it this helps everybody be more mobile it makes everybody's lives easier awesome in the digital space an example of the curb cut effect might be captions on a video so these captions are necessary for deaf users and they can be helpful to people who need to view a video without audio maybe you're in an office and you forgot your headphones and you don't want to bother your co-workers with audio or maybe you're on the bus then you left your headphones at home but you still want to know what's going on in this image here I have a screen grab of YouTube I think this is Jamie Lee Curtis talking about first aid kits I don't know but there are an example of some closed captions and again if you're watching this video you should be seeing closed captions right now they're helping everybody not just folks with disabilities here's the other thing though not only do these adaptations help everyone it's important to remember that we are all just temporarily abled disease injury and age can all cause us to gain a disability of one kind or another unlike a lot of different kinds of marginalization that you might have this is something that anybody could gain at any time for a variety of reasons okay I think I've convinced you that this impacts a lot of people it might even impact you oh my gosh so why do we make something accessible there are several reasons all of which are valid they're just more or less altruistic and one another let's say so the first reason to me the one that's most important is to improve the lives of people with disabilities I believe that we have an ethical duty to help all people who use what we're going to make I believe that we are responsible for what we create regardless of what you make if it's a website or a book or a painting whatever you make if you make something for another human being to interact with you're responsible for making sure that those other humans can use that thing that you've made just that simple another reason why we build things excessively is to capitalise on a wider audience or consumer base so as I mentioned before it's 700 something million people around the world have a disability I really can't think of any ethical or economic argument that you could make for potentially excluding that many people from using your product you wouldn't design a website to not work on 20% of browsers that your users use so why would you design your website to not work for the 20% of Americans that have a disability right here's that thing those 1 in 5 Americans in the United States alone control one hundred and seventy five billion dollars in discretionary income now we might debate whether it's you know the best idea to make something just to get money but that's a lot of money that's a billion billion with a B right you want a piece of that pie if you're making something as a way to get money you want to receive part of this funding third reason for building something excessively it's the law to obligation way right you might build sensibly to avoid lawsuits or the bad press you get because you were sued alright so in the United States and around the world there are a lot of laws that have been created as a part of the hard work of the disability rights movement in the United States the enforcement mechanism for these laws is usually lawsuits now the threat of being sued can cause a business to decide to fix their accessibility problems if some group identifies that your product has an accessibility issue and they threaten to sue you that might be enough to make you go whoa never mind we'll fix it we are so sorry please don't sue us and also if that's not enough for you frequently the terms of a settlement for a lawsuit can require you to be accessible hurray it's the law I'm gonna go over two major laws in the United States about accessibility and technology there are of course a ton of different laws around the globe that vary in all sorts of different ways I'm based in the US this is what I know but it should give you a basis for understanding for how things might work in your country if you're not from the US so the first one is called the Rehabilitation Act of 1973 you can see in the background here there are some folks who are part of that disability rights movement fighting for the passage of this law in the 70s this law prohibits discrimination on the basis of disability in programs that are run by the federal government or that receive financial assistance from the federal government or in federal employment or in the employment practices of federal contractors in 1998 Congress amended this act with something you may have heard of called section 508 and that requires federal agencies to provide accessible electronic resources and information tech to people with disabilities now you heard me say the word federal government a lot in that description right currently the rehab Act doesn't require private websites that don't receive government funding that have nothing to do with the government to be accessible although this law is evolving as cases go on but if you work for a company that does work for the federal government or maybe the United States federal government itself I'm sure you are very familiar with this law the next probably more familiar a lot of most folks about accessibility in the u.s. is called the Americans with Disabilities Act or the ADA a folks will call it this was passed in 90 this is a labor law it prohibits discrimination on the basis of disability and it created accessibility requirements for public services and accommodations in the US here's the thing though you see the year 1990 that's when it was passed as a result the ATA doesn't directly mention the web or the internet right but it works to ensure that people with disabilities have equal opportunities in in all venues now the Department of Justice was at least developing regulations that address web accessibility although there are several notable cases we talked about lawsuits earlier several notable cases regarding the ADA a that have made it pretty clear that the ADA is Authority pertains to websites not just physical things and it's clear that EA pertains to businesses that only exist online that don't have a physical presence and as I mentioned before there are a lot of international laws okay so this is all well and good we understand that people have disabilities they use assistive tech and apparently I'm legally required to make my website accessible oh no how do I know if what I'm making is accessible this is a question I get a lot even from folks who are motivated to build an accessible technology they don't know where to start the best starting place the best advice I can give you to build something accessible is to listen to people with disabilities this both means involving people with disabilities in the creation of your technology should have folks on your team you should represent a diverse worldview on your team including folks with disabilities you should also listen to the voices of people with disabilities who will use your technology so this both means and user testing before you launch as well as in the initial creation and design of what you're making involve people with disabilities also I recommend that you follow best practices so we talked about those laws some of them around the globe mentioned very specific requirements they're also guidelines that can help you evaluate what you're creating and there are a ton of different sets of guidelines and different resources you can use I recommend picking the one that's best suited to what you're creating and I'll go over two right now the one that I will primarily discuss is the one that web developers use but it's also a good framework for understanding regardless of what you're writing code for not just the web and it's called the web content accessibility guidelines it's also called the what CAG or the Wu CAG it's kind of hard to pronounce as an acronym what CAG is what we go with it's currently in versions oh so this was created by the World Wide Web Consortium or the w3c they're the governing body of the web they're the folks that create guidelines like this that regulate how the internet how the web should work and this 2.0 iteration was published in December of 2008 so that's a bit before mobile web browsers were very common that's a bit before touchscreens were very common so keep that in mind when you read this there is currently a working draft of the wicked 2.1 out it was released last month if you're an accessibility nerd you should read it if you're not an accessibility nerd you should read it just everybody read it they're seeking public comment on their ideas so tell them what you think about it these guidelines are the basis for most web accessibility laws around the world and some countries even directly include the Wyck AG in their laws as a requirement in the Wyck AG we have four principles that encompass a ton of guidelines for web accessibility and under those we have a lot of sub guidelines and test criteria and detailed things like that there are also three different conformance levels within the width tag essentially they are more or less strict than one another and if you're trying to decide which conformance level to go with I strongly and you to consult with a legal team that will tell you what's best for you I'll get the question a lot of stéphanie which one do I just pick one for me and I'm happy to make a suggestion but please do not take what I am saying is legal advice I'm not a lawyer thank you okay so let's talk about those four principles of the wick egg and again these are large principles with lots of guidelines underneath them the first is perceivable this require your sight be available senses either through a browser or some form of assistive technology which we discussed earlier this information content and user interface components of the website have to be presentable to the users in a way that they can perceive so this includes guidelines for things like captions text alternatives for image or any non text content and different presentations of your contact it needs to be presented in multiple ways so different assistive tech can receive it next is operable this requires that your users can interact with all the different controls and interactive elements of your website either using a mouse a keyboard or one of those assistive devices we mentioned this includes guidelines for timing on your website so if you have like a cart timer ticking down this governs how that can be used this also gotta includes guidelines for navigation keyboard navigation and different techniques for preventing seizures that can be induced by flashing images or colors cert is understandable this requires that your content is clear and it limits confusion and ambiguity it includes guidelines for helping users avoid making mistakes or coming back from a mistake when they make it so things like error messages on a form both need to be clear and it needs to be easy to fix the mistake this also includes guidelines about making your text readable both visually readable as well as having the text be possible and understandable this also includes making your content operate in predictable ways you can't do strange unpredictable surprising things with your users a button that says open accordion needs to actually open an accordion and not do something else understandable and the last is robust this means that your site needs to work on a wide range of technologies both different browsers different kinds of assistive tech different operating systems and not just the newest shiniest version of the OS or a browser it needs to work also I'm like Internet Explorer 10 it needs to be accessible there too right this includes guidelines about having consistently possible HTML essentially you need to follow the rules of how HTML have to be constructed and also having clear names roles values in your code this is a lot more technical than some of the other guidelines can be so I recommend reading it for yourself okay so that's the wick hag hooray you're all going to go home and read the hundreds of pages of the wick egg yes go you the other important set of guidelines or framework that we talk about is the open accessibility framework or the Oh AF now this is not so much about but in general provides an outline of steps that have to be in place for any computing platform to be considered accessible so this includes desktop and mobile operating systems this includes web applications and mobile platforms now the steps that are in this framework are analogous to those necessary to make a physical environment accessible so by following these you're also getting an idea of what say a civil engineer making a curb cut has to do to make their product accessible there's two categories for these steps the first one is creation so the creation steps define the precursors and building blocks required for technology developers to create accessible applications and products this includes defining what accessibility means for the intended use of your platform what is accessibility even mean in this case you also have to determine stock user interface elements and components so you can have cohesive and predictable meaning across the technology and providing authoring tools that support accessibility so if you for example are creating an operating system if you are including authoring tools for P to make an application in your those tools need to support accessibility also the next section of steps in the O AF is use so the you steps describe what's necessary in a computing environment in which those accessible applications will run so this includes providing a platform supports providing accessible application software and providing assistive technologies so you might think about your desktop operating system not only could you download and install some assistive tech but there are also things like text screen readers or magnifiers built into the operating system and that's because they followed some of the guidelines for the Oh F oK we've got two different sets of guidelines we have some homework to go home and read these and know what they mean you have homework you have to understand this but here's the thing accessibility is more than just these guidelines you could make a beautiful website and go through every step of the web content accessibility guidelines and still have built something that is inaccessible to some of your users these guidelines are tools they're not solutions so as I mentioned before the current version of the book tag is from back in 2008 there's a lot of things that doesn't cover it's a set of guidelines from a specific period of time these guidelines help us determine if a page is inaccessible so it's very easy to tell oh I failed such-and-such guideline within the Wyck AG there might be accessibility issues for some of my users but these guidelines can't tell us for certain if a page is accessible how do we know if it's accessible why we send to people with disabilities that's a callback yes it's important to listen to people with disabilities to determine if your technology is truly accessible it's important to involve people with disabilities in the creation and use of your tech awesome okay so we care about accessibility we have built something excessively we know how to check it hooray but you might be thinking stuff I'm a product manager or Stephanie I'm a designer this is cool but isn't this all something that a front-end engineer does I don't have to worry about this not true I say that everybody should be advocating for accessibility in whatever they're creating and you need to help better advocate for people with disabilities in your work whatever it is that you do how do you do that first you collect baseline information you look at your website or your app or whatever cool thing you've made and you ask am i accessible right now you can either do an audit or hire some other lovely person to do an audit of your technology for you there are also some really cool accessibility validator tools both free and paid where you can plop in like a URL for your website and it'll highlight accessibility issues you might have which is really helpful if you're just starting on your accessibility journey with those though I will say be careful they can only get about 40 to 60 percent of issues you might find part of that is because our technology is not yet perfect right but also because if you've constructed say in a website if you've constructed your HTML so strangely and so weirdly this automated tool doesn't understand what you've done and can't tell you that you've done it wrong for example there are guidelines within the mechag about headers and how they have to be constructed your heading tags have to go in order you can't say skip one you can't go heading level one having level three heading level four there have to be a heading level two in there right and these validator tools will be so helpful if you've tagged everything as a heading tag right but if you just have a big blob of text like a paragraph tag that you typed everything into a validator tool might not realize that that's supposed to be a heading and that you've broken an accessibility rule so be careful I also have a human check this over okay so you've gathered baseline information what next you can gather support at your organization identify stakeholders in your business and convince them of the business value of accessibility and I can see some of you rolling your eyes because we this is really hard this is a hard problem may be harder than implementing accessibility on your site is convincing the people who are in charge that accessibility is important how do you do that well one you could link them to this video obviously right now you can talk about both you have an ethical duty to do this and for some people that's enough to point out that you have an ethical responsibility cool you could also talk about financial incentives getting some more money because alienated part of your user base you can talk about potential threats of lawsuits you can give them awesome examples of companies who have been sued for being inaccessible but really the best argument I have found is to tell your stakeholders that it's cheaper to build your technology excessively now than it is to go back and retrofit your website excessively I've had clients ask me before well you know the other people who built my website if I had just had them do this right the first time how much would it have been and the answer is so much less money than it is to have me fix it now right it's also a lot cheaper than getting sued most of the time it's so much better to be proactively accessible and that's a conversation that you should have with the stakeholders in your product next you should define a standard so define your internal standard for accessibility that might be oh well we want to follow the what CAG we want conformance level double-a done it might be more complicated than that whatever is appropriate for your product and then train people on this and don't just train your front-end engineers maybe not everybody needs the details of how all the code works but everybody involved in your product should understand what accessibility means at your company next and last you need to monitor conformance for accessibility I have definitely had clients before where they build a beautiful accessible website and it's gorgeous and compliant and I love it and then they'll give it off to their support devs and they forget about the world word accessible entirely it's important to be monitoring this as you go on you can either do this by scheduling regular audits of your tech you could also use an automated tool there are several ones that are awesome that you can even tie into your gated pull requests and run a check to see did this destroy accessibility in some way it's so fix it and then we'll merge the code it's really cool but you have to monitor your conformance for accessibility as your site or your technology exists okay so with these steps I think you have a better understanding of how you can advocate for accessibility and you hopefully care about this and I've convinced you that this is improved and I'll say to you that if you don't care about accessibility that who will if you're still on the fence I need you to think if I don't do this if I don't care about people with disabilities who is going to care about this now maybe where you work you have an entire internal team devoted to accessibility with QA and user experience and designers and front-end engineers and it's this beautiful cross-functional team and they meet every Wednesday and they talk about accessibility cool if you have that that is awesome and I want to know where you work great but most places do not have that if you have anything short of a beautiful cross-functional team that meets regularly you can do better than you're doing right now you owe it to your users to do better start an initiative within your company or your open source project to care about accessibility or if there is an initiative already join a small one even if you're not a person code you can still advocate for accessibility the thing I believe that you can do this I know that sounds pissy hooray you can do it right but here's the thing people can be intimidated by accessibility it seems tricky there's so many guidelines to understand and all these complicated things and I might get sued if I do it wrong and it seems overwhelming right but accessibility is a solvable problem something that in my opinion in the grand scheme of coding for a website is relatively easy once you have support and time you can make your site accessible you can improve it there are a ton of resources out there and compared to those other problems in code it's not that hard and hopefully somewhat inspiring to you the image on this slide is folks that are a part of the disability rights movement I believe this was protests around in support of the ADA a they're carrying a banner these folks are in wheelchairs carrying a banner that says injustice anywhere is a threat to justice everywhere which is a quote attributed to MLK you can do this it is important to your users it is important because you owe this to them as I said before we are all responsible for improving the lives of people who use our technology and accessibility is one of the ways we can achieve that and I hope that by sitting through this talk you understand that accessibility is more than just screen readers thank you [Applause] [Music] you [Music]