Recommended
Recommended
More Related Content
Similar to Creating Accessible Web
Similar to Creating Accessible Web (20)
Recently uploaded
Recently uploaded (20)
Creating Accessible Web
- 1. Accessibility Matters Creating a Better Web @techevangelista
- 2. How this will go 1. Intro 2. Brief Accessibility Explainer 3. Examples 4. Conclusion @techevangelista
- 3. What this talk won’t have •Reliance on slides •Animation •Cat pics @techevangelista
- 5. Find my slides and resources here: dragun.tech/nbpy @techevangelista
- 7. About Me Tech Evangelist Former WebDev Bootcamp Grad MA International Peace & Conflict Resolution @techevangelista
- 8. Artist’s rendition of very expensive piece of paper @techevangelista
- 9. What is Web Accessibility? @techevangelista
- 10. “Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.” -W3C WAI @techevangelista
- 11. POUR Guiding principles of accessibility under 2.0: Perceivable Operable Understandable Robust @techevangelista
- 13. Who is the target audience for web accessibility? @techevangelista
- 21. Lots of other ways to break down categories (more inclusive!) @techevangelista
- 26. People with accessibility needs may be using less common tools @techevangelista
- 28. Think Deeper Categories can be deceptively simple: Users don’t always fall into one category Users can be using multiple inputs and outputs @techevangelista
- 29. Not edge cases, stress cases, or “...the moments that put our design and content choices to the test of real life.” -Eric Meyer & Sara Wachter-Boettcher @techevangelista
- 31. Color & Size Example Example Example Example @techevangelista
- 32. @techevangelista
- 34. alt=“blank polaroids because I’m bad at choosing images” @techevangelista
- 35. Make Changes Noticeable Password Password ❌ Password ❌ Password (something went wrong) @techevangelista
- 36. First result for “aria” in pixabay @techevangelista
- 37. But maybe I’m giving the impression accessibility is easy…. @techevangelista
- 38. @techevangelista
- 39. @techevangelista
- 40. @techevangelista
- 41. @techevangelista
- 42. Making Better Accessibility Happen @techevangelista
- 43. @techevangelista
- 45. Think About How YOUR Users Use YOUR Products @techevangelista
- 47. Push back on inaccessible decisions @techevangelista
- 49. Try to keep the “bare minimum,” even if it has to be changed a little @techevangelista
- 50. @techevangelista
- 52. @techevangelista
- 53. Get real input from users @techevangelista
- 54. @techevangelista
- 55. And there are benefits to accessibility beyond a happier user base @techevangelista
- 56. Good Accessibility == Good Code @techevangelista
- 57. Less work for future devs and/or our future robot overlords @techevangelista
- 58. How You Organize Your Code Matters @techevangelista
- 59. @techevangelista
- 60. LOTS of reasons for accessibility @techevangelista
- 62. Resources Find a list at dragun.tech/nbpy Download free trial of JAWS Lots of browser extensions to use @techevangelista
- 63. CONTACT ME: site: http://dragun.tech github: lmdragun email: lmdragun@gmail.com @techevangelista
- 64. @techevangelista If you run an org in NYC or SF and need diversity or accessibility sponsorships: lindsey.dragun@weightwatchers.com
Editor's Notes
- I’m a dog person (and need an excuse to put Remus in all my presentations)
- I will show this again at the end
- I won’t be taking questions on stage, I personally hate asking questions in a crowd and don’t want to miss anyone, so please feel free to ask me after the talk or if you see me hanging around!
- The World Wide Web Consortium, also known as the W3C, is a community that develops web standards. According to their Web Accessibility Initiative, aka the people behind the Web Content Accessibility Guidelines (aka WCAG [wick-ag]), it means that people with disabilities can perceive, understand, navigate, and interact with the web, as well as contribute to it.
- These can often be remembered through POUR, WCAG’s acronym for the guiding principles of their 2.0 standards: What you put on your site must be Perceivable, Operable, Understandable, and Robust.
- WCAG is adopted by multiple countries as their standard for accessibility, including Australia, Japan, and Germany, and is slowly being integrated into the United State government’s accessibility standards, though mainly still 1.0, they’ll move to more 2.0 in January.
- WCAG and other resources separate people with disabilities into 5 main categories
- But you’ll notice when I go through this talk, I’ll often say “people with accessibility needs” instead of “disabled people”, because web accessibility actually affects a lot of people who don’t think of themselves as disabled or don’t get categorized as disabled in their society.
- There’s lots of other categories people break accessibility concerns into Canadian expert DAVID BERMAN was the first I heard using the following 4 categories
- Like being born blind
- Like being sick
- Like aging
- Like left-handedness (people designing and coding for touch screens are assuming people are right handed, for example)
- The basic ones are things like foot pedals, which can act like mice and keypads. You can get touchscreens that fit over other screens or get a computer with a touch screen. There’s eye tracking, which follows your eye movements, braille displays, which allow people to feel translated websites. People can use their breath, tongues and lip, their heads, there’s a lot out there and a lot of reasons why accessible, properly coded websites are important.
- Think in a new paradigm While some people may define those as “edge cases”, that’s dismissive of very real problems with your design and development. As Eric Meyer and Sara Watcher-Boetcher [Wok-ter Betcher] say in their book Design for Real Life, it’s better to think of these situations as STRESS cases, “the moments that put our design and content choices to the test in real life.”
- Like an eye chart, the bigger and bolder something is, the easier it is to read.
- Fonts can make reading a little easier on dyslexic people Linux Libertine Calibri Lato
- Have alternative text for your images— putting alt tags into the image markup or other alternatives helps people know what’s in that space even if they can’t see it. Also, don’t include words like “image” in that alt text— screen readers KNOW it’s an image, will inform users it’s an image, and hearing “Image, image of blahblah” over and over again is not a good user experience.
- Never rely on just one way to inform someone of an error or alert. If you just use changing colors, people who can’t tell the difference will miss it, so colors AND symbols work well. A mix of words and symbols for an error is also a great means of covering your bases--symbols aren’t always universal.
- And you can make those changes MORE noticeable with aria alerts. Aria are ways to communicate with a screen reader—alerts can let people who are far down the page know that something has gone wrong.
- In the book Wayside School Gets a Little Stranger, the school installs an elevator—that only goes up. There’s exactly one trip on that elevator, because it never goes back down. This is kind of how a lot of people using alternative input end up experiencing websites—they can do one thing, but maybe not anything else, because of how it’s coded.
- At my last job we worked with web video, video on our website was in fact a major part of what we did. We had a lot of tests we did, but a basic one we had always helped show people around us how important what we were working on was.
- We’d put on a blindfold, a pair of headphones, turn on our screenreader, and try to do a set task. In this case—go from a homepage, to a video, play the video, then PAUSE the video. We did this on our site and other sites. And, even though it shouldn’t have surprised us, most sites didn’t allow that last step to happen.
- Like with the elevator, no one actually thought past the most obvious step.
- There’s probably SOMETHING you can do to help improve accessibility Regardless of what your role is on the project, there might be SOMETHING you can do
- Avoid having styles and features just because they’re popular or trendy at the moment
- Go through the flow your users might and consider what could interrupt them— if you have a footer or a right hand sidebar AND have infinite scroll, for example, people using a keyboard might never be able to access them.
- This is the opposite of “user-friendly” Consider how you might be harming your users—beyond just whether they can USE your product, if there’s autoplay animation or noise you might be hurting people with anxiety, distracting people with attention disorders, possibly triggering seizures or migraines…the list goes on and on
- When something isn’t accessible, mention that if you can—maybe the people creating it hadn’t even realized. Explain why something might interfere with how people use your site, and that you could miss out on users. Offer alternatives.
- Go to your competitors sites—if they’re more accessible, come back with that, and how you might be losing users to them because of it. If they’re less accessible then yours, you can use that, too—this is a niche you have that they don’t even be considering, you can embrace that and get way ahead of the others.
- Focus state, link decoration, form labels—these are helpful to many people and a lot of designers, product owners, and devs will try to get rid of them.
- Focus state is generally an outline around an element that shows where someone using keyboard navigation, but with some sight, have their equivalent of a mouse pointer. Link decorations are ways to differentiate what a link is from what isn’t a link—for example, an underline on hover or focus. Both of these can be changed if people insist, but just try to have something there. Everyone has probably had some experience of going on a site and losing your cursor because they have some weird, tiny custom one or not being able to tell what a link is because everything looks like same.
- Your written content matters just as much as your visual content. We all know what they mean, what they probably JUST held off from actually saying. And everyone reading that with a mental health issue or who cares about them knows the person writing it didn’t care if they were being insulting. No WELL MADE application. No LOGICAL application. No GOOD application. On a professional site, you should not be insulting your users. You should not be HURTING your users, in any way. Because you’re going to LOSE some of those users. The people who don’t care won’t even notice if the words are there or not, but the people who do care WILL.
- Try keyboard navigating your site. Try just with tabbing through. Add a screenreader and some of their basic keyboard commands for navigation. Understand you’re not the common screenreader user if you’re not using one as your primary input.
- In writing there’s something called “sensitivity readers”, people who will go through your writing and point out offensive parts, for example. In design, UX researchers will sometimes do things like sit in a café and hand out gift cards to people for their input. People with accessibility needs can also be paid to go through your site and let you know where they have problems.
- If change is slow or hard to prioritize, have an accessible and obvious way for users to report issues with your site.
- Good accessibility is good code in general. It means your headers are in proper order, your using the right elements, and you’re following the guidelines for writing HTML from the W3C. And since CSS can be transferable between projects, it means you have good base code to slot in.
- Web crawlers, for example, such as Google Search benefit not only from all those SEO tags you’re shoving into your sites, but also from well-structured content. And as devices such as Alexa and Echo become more popular, having websites that can work for programs that can't access information and pages the way people you consider your average user can becomes even more important. After all, they’re not going to play your video or audio, they aren’t going to notice objects that are hidden or require interaction. You’ll notice that some accessibility checkers are web crawlers, so that can give you an idea of what they use.
- You might have legal obligations, too, and showing a good faith effort to meet them is a very good idea. And will save you a lot of money —Winn Dixie lost a lawsuit as a public accommodation that didn’t make its site accessible to blind users, and because it got to court instead of settling out of it, they even got hit for having third party applications on their site that weren’t accessible. --The University of Berkeley’s online EdX videos didn’t even have transcripts, let alone closed captioning, and didn’t have any descriptions for graphics even when they were vital to what was being spoken of. Instead of trying to improve them, they took them all down, and cost themselves a lot of good will.
- In conclusion, there’s LOTS of reasons for accessibility. It will make your users happy AND your lawyers happy, and also just make a better, easier to work on product.