1 2 So who died and appointed me boss? What do I even know? I dont - PDF document

1

2

So who died and appointed me boss? What do I even know? I don’t have a certification. I don’t habitually use assistive technology to access the web. My job description doesn’t include anything about accessibility, but I’m the one who has ended up leading this effort at our organization. I’m a front end web developer. I’m a team lead. I’m not the Accessibility Compliance Director, we don’t have an Accessibility Office. This whole exercise is about empowering you – all of you – to be accessibility advocates. You don’t need to be part of a particular demographic group. You don’t need to have a particular job title. I was a plain old front-end developer who thought this was important when I started this journey. You don’t need to know all of the things. The resources are out there if you’re looking. You do have to be willing to speak up. 3

4

They will find you. They will sue you. And they will win. Imagine if you will, a person who runs a store. The sidewalk out front is broken, but instead of fixing it they’ve put away money in a “lawyers and settlement” fund for when they get sued for a slip-and-fall. Weird business plan. 5

Don’t disappoint Ben Franklin. Deciding out of the gate that we don’t want to bother to accommodate a whole swath of customers seems like an odd business decision. According to Pew Research, nearly 40 million Americans had a disability in 2015, 12.6% of the civilian non-institutionalized population. (http://www.pewresearch.org/fact-tank/2017/07/27/7-facts-about-americans- with-disabilities/) Remember, people who use assistive technology have wallets just like everybody else. How many customers are you willing to lose because user focus gets trapped in the “billing address” tab of Checkout? Or because they can’t select a date with the keyboard? 6

40 million Americans is about the population of California and Montana combined. Would you launch a product and market it nation-wide except for California and Montana? 7

Customers are adding accessibility requirements in their contracts. True fact, we have a customer who came to us with accessibility requirements. “We will be your customer and spend x frillion dollars. But if our audit shows that your web experience does not meet our accessibility requirements and you can’t fix it in five days, we get to take our dump truck full of money and go home.” 8

Be guided by thinking about how you move through the world – think about that kid song, “Head, Shoulders, Knees, and Toes.” • Hands – drive the song, despite not getting any credit. Hands are the drivers of our online mobility, just like feet are in the offline world. Mobility issues can be temporary, like being in a cast, or permanent, like dealing with a persistent issue like Parkinsons tremors. Mobility issues can be minor, like the mouse being on the wrong side at my left-handed mother’s house, or major, requiring the use of a joystick powered by mouth or eye-tracking glasses. The good news: the good practices we use to provide the best user-focused web experience are exactly the solutions for people with mobility issues. • Head: Think about processing issues. What to do? Make sure your text is easily legible, and chunked into sections set off with good headings – which you should already be doing. It’s user experience best practices. • Eyes: Vision issues cover a lot of ground. Colorblindness, limited visual field, blindness. Check your contrast, use color to reinforce your messaging, not as the primary carrier. Be mindful that people with limited vision may zoom in dramatically to only view a small portion of the screen. Keep your error messaging close to the offending field or they’ll miss it. Those who access the web through screen readers need your source code presented in logical order. • Ears: Much of the web is visual…until we get to video. Supplying those captions will be important for anyone who has their volume turned off, or for those with auditory issues. 9

• Nose: So far, we don’t have to worry about accommodating anosmia (there’s your new word for the day – “the loss of the sense of smell.”) until they develop reliable and ubiquitous smell-o-vision. 9

Just like in the physical world, accommodations for people who need them help people who don’t need them too. Lever-style door handles are critical for people with arthritic hands. And super useful for those times when you’re trying to get all the groceries into the house in one trip. The automatic doors are critical for people with mobility challenges. And they’re really handy for people pushing a stroller. Ramps are essential for people who need wheelchairs. And for the UPS driver with a dolly full of packages. In the same way, online accommodations online that make our code more mindful, our architecture more apparent for assistive technology also end up providing a better experience for all of our users. Including search engine robots. 10

It’s financially smart. It’s morally right. It benefits everyone. 11

Look, now you know why we should bother building in accessibility! You deserve a high five from a kitty cat! 12

https://www.w3.org/TR/WCAG20/ Web Content Accessibility Guidelines (WCAG) 2.0 13

The standards for accessibility compliance are described by the W3C – the same people who decide what web standards are. The legal requirements are found in Section 508 of the Rehabilitation Act of 1973 (the “what”) and the Americans with Disabilities Act of 1990 (the “why” – this civil rights law prohibits discrimination based on disability). Committing to compliance means different things for different roles. For Content Editors, the focus will be on alt tags and easily understandable copy, plus captions and transcripts for video content. It means making sure that the pages we build aren’t structured in a way that a screen reader would make confusing. For Developers, the first step is good understructure – valid and complete markup. Form inputs need labels. Tables need headings. Relationships between elements get captured in code with aria tags. The next step is to provide control to the user. No autoplay. For QA, it’s learning to use assistive technology like screen readers to make sure all of this is working together. https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0 https://www.section508.gov/manage/laws-and-policies 14

These resources are authoritative, comprehensive places to get a handle on accessibility issues. 15

• Be predictable: Using semantic markup and consistent design elements provide assistive technology with the hooks to programmatically determine content relationships – which heading goes with which text, for example. • Give the user control: Don’t let things autoplay. (Remember, ads autoplay – and we have gotten very good at ignoring ads.) Let me pause, go back, change the volume. Give me error messages that point me in the right direction and tell me how to fix the problem. • Provide alternatives: Give me another way to access the content - is your button keyboard accessible? Does your video have captions? If the page I want is in a dropdown menu, is there another way to get there? 16

You’re probably already doing things that keep your code accessible. Just because you’re a good developer. And because Drupal’s got your back. Some things are low-hanging fruit. Why would you want to create a web experience that’s consciously irritating, like flashing content? Keeping your IDs unique will make your QA tester happy. Error-free javascript should always be our goal. Who wants IE11 to throw up its metaphorical hands in surrender because it encountered a javascript error? 17

Content management systems like Drupal make it easy to provide consistent menus and helpful error messaging. And the language of the page is already coded into the page template – all you have to do is not break it. 18

You might have never even seen the skip-to-main-content link. It only makes an appearance for screen readers and keyboard navigators. To your design eye, it might seem jarring and unexpected, but it’s an essential time saver to folks who need it. 19

https://webaim.org/resources/contrastchecker/ Start with the official organization color palette, but validate that it works on your background. Just because it’s a brand color doesn’t mean that brand color works in that context. What if it doesn’t? Go back to the requestor – “Using this color text doesn’t pass accessibility guidelines. Can we use (provide alternate official color) instead?” This is a great way to take the personality out of pushing back. It’s not “your design is bad and you should feel bad”, it’s just math. And that makes it a lot easier to end up with a more accessible design. 20