|
|
| (96 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| [[Category: Design]] | | ===Specific topics=== |
| == Why Accessibility ==
| | * [[Accessible Error Handling]] |
| | * [[Writing Accessibly]] |
| | * [[Accessible color systems]] |
| | * [[Accessibility overlays do not work]] |
| | * [[Screen Readers]] |
|
| |
|
| [https://twitter.com/jameswillweb/status/789212365325828096 [[File:Jameswilliamsaccessibilityquote.jpg|400px]]]
| | == Testing tools == |
| | | ===Why test with people who have disabilities?=== |
| Accessibility is the act of designing for an audience that includes people who have disabilities, and may (or may not) be using additional software or hardware to complete their goals. Accessibility is a way of thinking about design and development. Dylan Barrell explains it in his article "[http://unobfuscated.blogspot.com/2015/02/what-is-accessibility.html What is accessibility?]" in terms of a series of traits.
| | * [https://uxdesign.cc/disabled-user-testing-a-cautionary-tale-b6cf64425adb Accessibility user testing: a cautionary tale] by Daniel Pidcock outlines one example of what can happen when we assume that our work is accessible. |
| | | ===How to test=== |
| * '''Accessibility is empathy''' for your users.
| | * [https://karlgroves.com/2012/09/15/accessibility-testing-what-can-be-tested-and-how Web Accessibility Testing: What Can be Tested and How] by Karl Groves in September 2012 outlines what can be tested by automated systems and what requires a person (preferably with disabilities) to test. He also encourages people and companies to [https://karlgroves.com/2012/02/02/web-accessibility-testing-do-automatic-testing-first Do Automatic Testing First] but not as the only thing you do. |
| * '''Accessibility is usability''' in the things you build. | | * [https://www.deque.com/blog/considering-accessibility-when-designing-a-usability-test Considering accessibility when designing a usability test] outlines ways to integrate accessibility testing into usability testing -- since if it's not accessible, it's not usable. |
| * '''Accessibility is compliance''' with best practices, so you don't have to reinvent the wheel (or make your user do the same).
| | * [[Accessibility Testing Tools]] outlines information about testing code, such as how to use a screen reader and what automated tools are available. |
| * '''Accessibility is making the experience better for all users''', with an emphasis on the users at the edge of the experience.
| | * [http://www.uiaccess.com/accessucd/ut_ppt-screen.html Accessibility In User-Centered Design: Recruiting Screener] gives a detailed screener example |
| * And '''Accessibility is practical''' - not idealistic - in its pursuit of a better experience.
| |
| | |
| (There's a great discussion of how a map can be accessible not by aligning with the letter of accessibility requirements, but by reassessing what the core user need actually is and building it instead or in addition to the map, in the "[http://unobfuscated.blogspot.com/2015/02/what-is-accessibility.html What is accessibility?]" article, by the way.) Paul Boag raises many of the same points in his article [https://boagworld.com/accessibility/accessibility-is-not-what-you-think/ Accessibility is not what you think], putting the emphasis on the fact that accessible solutions aren't strictly for the profoundly disabled edge cases. Yes, they are covered by good accessibility solutions, but good accessibility solutions benefit everyone. Accessibility is not a few things, though you'll meet people who think that it is. It is not a checklist of things to do so that your software passes a compliance test, a list of things to do so you don't get sued, or a pain in your ass. (Or rather, if it's a pain in your ass, so is User Experience and everything else that's going to make your product successful, so deal.) [http://www.claimingcrip.com/2016/01/accessibility-is-not-nice-thing-to-do.html Accessibility is not a "nice thing to do"], as Karin Hitselberger explains in her article of the same name. It's the law. And it's the law because Karin and you and I all share the same rights to life and dignity and safety and security. It's not kindness, and it's not charity. It's the baseline. [https://www.applevis.com/blog/advocacy-ios-apps-opinion/accessibility-not-feature-and-developers-should-never-treat-it-such?utm_content=buffer7f799&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer Accessibility is not a 'Feature' and Developers Should Never Treat It as Such]. Similarly, [https://timkadlec.com/2015/02/access-optional/ Access is not Optional]. I've written a few things about Accessibility over the years, which can be boiled down to these two points:
| |
| | |
| == Thing the first: You need to work with the knowledge of your own stereotypes == | |
| | |
| Many (many many) people in tech I talk to who are unfamiliar with Accessibility invoke internal stereotypes about disabled people. This is called ableism, and like sexism or racism, it means that -- consciously or unconsciously -- a person thinks of another person as "lesser" or "other". In my article, "[https://alistapart.com/article/reframing-accessibility-for-the-web Reframing Accessibility for the Web]" I try to make the reader aware that ableism exists, and that it interferes with our support of accessible design by denigrating the value of the people accessible design serves. In that article I suggest that if you can't justify writing accessible software as an audience need, then you should reframe it as a technology need -- you need your software to run on these pieces of hardware (keyboard, mouse, sip-and-puff, screen reader, etc.) regardless of what you think of your users. Would I prefer that everyone tear up their internal stereotypes and build accessible software because everyone needs it? Hells to the yes I would. But I've walked into too many executive meetings where the first thing I was told about Accessibility is "it has to have a business value, it can't just be the right thing to do", so - yay capitalism? Besides, half the time we don't even know what our internal stereotypes are until someone points them out to us. The best way to uncover them is to expose ourselves to different ways of thinking, which happens really fast when we try to use input devices we've never used before. We'll never be substitutes for our disabled users, but we might at least see some of the stupider design mistakes we've made if we at least ''try'' to test our software on multiple devices before shipping.
| |
| | |
| == Thing the second: Recognize that you will not be able bodied your whole life ==
| |
| | |
| Tech still tends to be a relatively young person's career, although I haven't figure out yet whether that's because it kills us faster or we get tired of it or we get rich and retire to the Caribbean. (I'm really hoping it's the third one.) Having been a young person once and a middle-aged person now, I can confidently say that we humans do not know what it's like to lose a fingertip until we're looking at it on the kitchen counter. We can empathize, cringe, even get nauseous at the thought, but only those of us who have lost the tip of a finger (or toe, I'll spot you a toe) can nod and go "Yup, and here's what that experience is like." On the other hand, all of us, experienced or no, can imagine and empathize with someone who's lost the tip of a finger. Giant bandage, itchy healing, difficulty typing, doors are a bit of a pain.... That's important, especially in light of Thing The First and our internalized stereotypes. When we take a group of people and say "I'm not one of them" or "I don't know what it's like to be one of them" it's easy to say "They're not important; I'm building for people like me." But who are the people like you? When we say "They have an accessibility issue, in that they can only use a keyboard," do you picture someone who has a severe and permanent disability that prevents them from using a mouse, or do you picture a fingertip wrapped in gauze two inches thick? The point of [https://the-pastry-box-project.net/anne-gibson/2014-july-31 An Alphabet of Accessibility Issues] is that anyone at any time for any number of reasons might find themselves in need of your accessible product. They might be permanently disabled, they might be temporarily disabled, they might just be distracted or have their hands full. They might be older, they might be younger, they might be exactly like you. Because we cannot predict who our users really are -- and for that matter we cannot predict our own health from one day to the next -- we have to build for everyone.
| |
| | |
| == Categories of Disabilities ==
| |
| | |
| OK, all that being said, it still helps to categorize the kinds of problems that our users experience into some high-level categories of disability.
| |
| | |
| * [http://www.perpendicularangel.com/kb/ddeafness/ Hearing difficulty and d/Deafness] | |
| * [http://www.perpendicularangel.com/kb/low-vision/ Low vision and Blindness]
| |
| ** [http://www.perpendicularangel.com/kb/colorblindness/ Colorblindness]
| |
| * Neurological and cognitive issues
| |
| ** [http://www.perpendicularangel.com/kb/dyslexia/ Dyslexia]
| |
| ** [http://www.perpendicularangel.com/kb/design/accessibility/autism/ Autism]
| |
| ** [http://www.perpendicularangel.com/kb/design/accessibility/dementia/ Dementia]
| |
| * Motor issues
| |
| | |
| Many people who are aging experience some or all of the above disabilities, so you might also want to check out [http://www.perpendicularangel.com/kb/aging-issues/ Aging Issues].
| |
| | |
| == Standards and Guidelines ==
| |
| | |
| The official standard is the [https://www.w3.org/TR/WCAG20/ WCAG 2.0 standard] by the W3C.
| |
| | |
| * [http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile BBC Mobile Accessibility Standards & Guidelines]
| |
| * [http://www-03.ibm.com/able/guidelines/ci162/accessibility_checklist.html IBM Web Accessibility Checklist Version 7]
| |
| | |
| == Getting it done ==
| |
| | |
| * [https://blogs.dropbox.com/tech/2017/04/creating-a-culture-of-accessibility/ Creating a Culture of Accessibility] by Cordelia McGee Tubs at the Dropbox Tech Blog. This article discusses generating excitement around accessibility, running an accessibility device lab, rewarding the organization's champions, spreading knowledge, and developing a culture of learning around accessibility.
| |
| * [https://alistapart.com/article/reframing-accessibility-for-the-web Reframing Accessibility for the Web] by me at A List Apart. This article discusses how stereotypes work, how they're interfering with our accessible design process, and one approach to testing for accessibility that takes the stereotypes out of the direct line of fire.
| |
| * [https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/?utm_content=buffer40247&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer The Web Accessibility Basics] by Marco's Accessibility Blog | |
| * [https://the-pastry-box-project.net/monika-piotrowicz/2014-April-29# Getting Started with Web Accessibility] by Monika Piotrowicz at The Pastry Box.
| |
| * [http://www.interactiveaccessibility.com/blog/how-write-user-stories-accessibility-requirements#.WWBfR8aZPUp How to write user stories user stories for web accessibility] by Kathy Wahlbin at Interactive Accessibility
| |
| * Dos and don'ts on designing for accessibility by Karwai Pun on Gov.UK. Includes posters for designing for [http://www.perpendicularangel.com/kb/design/accessibility/autism/ people on the autism spectrum], [http://www.perpendicularangel.com/kb/design/accessibility/low-vision-and-blindness/ people using screen readers], people with low vision, people with physical or motor disabilities, [http://www.perpendicularangel.com/kb/design/accessibility/ddeafness/ people who are deaf or hard of hearing], and [http://www.perpendicularangel.com/kb/design/accessibility/dyslexia/ people with dyslexia]. | |
| * [https://aneventapart.com/news/post/extreme-design-by-derek-featherstonean-event-apart-video Extreme Design] by Derek Featherstone is a one-hour video of how accessible design benefits everyone.
| |
|
| |
|
| == Accessibility & Mobile Design == | | == Accessibility & Mobile Design == |
|
| |
| * [https://www.smashingmagazine.com/2014/05/mobile-accessibility-why-care-what-can-you-do/ Mobile And Accessibility: Why You Should Care And What You Can Do About It] by TJ VanToll at Smashing Magazine | | * [https://www.smashingmagazine.com/2014/05/mobile-accessibility-why-care-what-can-you-do/ Mobile And Accessibility: Why You Should Care And What You Can Do About It] by TJ VanToll at Smashing Magazine |
|
| |
| == Accessibility & Game Design == | | == Accessibility & Game Design == |
|
| |
| * [https://www.davrous.com/2015/08/27/creating-an-accessible-breakout-game-using-web-audio-svg/ Creating an accessible breakout game using Web Audio & SVG] by David Roussett | | * [https://www.davrous.com/2015/08/27/creating-an-accessible-breakout-game-using-web-audio-svg/ Creating an accessible breakout game using Web Audio & SVG] by David Roussett |
| | | ==anne’s Accessibility talks== |
| == More resources == | | * [[An Alphabet of Accessibility]] |
| | |
| * [http://webaim.org/resources/ WebAIM Resources page] | |
| | |
| == Related topics == | | == Related topics == |
| | | * [[Accessibility-related memes and humor]] |
| * [http://www.perpendicularangel.com/knowledgebase/disability-as-inspiration-porn/ Disability as Inspiration Porn] | | * [[Disability as Inspiration Porn]] |
| | * [https://www.vox.com/the-goods/2018/9/20/17791354/products-people-disabilities-sock-slider-banana-slicer-lazy Products mocked as “lazy” or “useless” are often important tools for people with disabilities] by s.e. smith for Vox |
| * [https://youtu.be/MC8ZGs_wG7w Cool stuff for blind, deaf, or non-verbal people (youtube)] | | * [https://youtu.be/MC8ZGs_wG7w Cool stuff for blind, deaf, or non-verbal people (youtube)] |
| * [http://www.bookwormblues.net/2014/09/10/i-am-not-broken-the-language-of-disability/ I am not broken: the language of disability]by Bookworm Blues | | * [http://www.bookwormblues.net/2014/09/10/i-am-not-broken-the-language-of-disability/ I am not broken: the language of disability]by Bookworm Blues |
| | * [http://disabilityinkidlit.com/2016/03/19/overcompensating-magical-erasure-of-blindness-in-sff/ Overcompensating: Magical Erasure of Blindness in SFF] |
|
| |
|
| == Accessible PDF files == | | == Accessible PDF files == |
|
| |
| Web Accessibility 101: Screen Magnification & Reflow in Acrobat Reader https://youtu.be/fCrZhnFrxjk | | Web Accessibility 101: Screen Magnification & Reflow in Acrobat Reader https://youtu.be/fCrZhnFrxjk |
|
| |
| == Additional Resources == | | == Additional Resources == |
| | * [http://webaim.org/techniques/acrobat/converting PDF Accessibility] by WebAIM |
| | * [[WAI-ARIA]] <-- this totally doesn't belong here but I'm not sure where to put it yet |
| | * [http://webaim.org/resources/ WebAIM Resources page] |
|
| |
|
| [http://webaim.org/techniques/acrobat/converting PDF Accessibility] by WebAIM | | [[Category:Design]] |
| | |
| == Web Content Accessibility Guidelines ==
| |
| | |
| Don't have time to read through all of them? Try reading [https://24ways.org/2017/wcag-for-people-who-havent-read-them/ Web Content Accessibility Guidelines—for People Who Haven't Read Them] by Alan Dalton at 24 Ways. Category: WCAG Content:
| |
| | |
| * [http://www.perpendicularangel.com/kb/design/accessibility/principle-1-perceivable/ 1. Perceivable]
| |
| ** 1.1 Text Alternatives
| |
| *** 1.1.1 Non-text Content
| |
| ** 1.2 Time-based Media
| |
| *** 1.2.1 Audio-only and Video-only (Prerecorded)
| |
| *** [http://www.perpendicularangel.com/kb/design/accessibility/principle-1-perceivable/1-2-2-captions-prerecorded/ 1.2.2 Captions (Prerecorded)]
| |
| *** 1.2.3 Audio Description or Media Alternative (Prerecorded)
| |
| *** 1.2.4 Captions (Live)
| |
| *** 1.2.5 Audio Description (Prerecorded)
| |
| *** 1.2.6 Sign Language (Prerecorded)
| |
| *** 1.2.7 Extended Audio Description (Prerecorded)
| |
| *** 1.2.8 Media Alternative (Prerecorded)
| |
| *** 1.2.9 Audio-only (Live)
| |
| ** 1.3 Adaptable
| |
| *** 1.3.1 Info and Relationships
| |
| *** 1.3.2 Meaningful Sequence
| |
| *** 1.3.3 Sensory Characteristics
| |
| ** 1.4 Distinguishable
| |
| *** 1.4.1 Use of Color
| |
| *** 1.4.2 Audio Control
| |
| *** [http://www.perpendicularangel.com/kb/design/accessibility/principle-1-perceivable/perceivable-1-4-3-contrast-minimum/ 1.4.3 Contrast (Minimum)]
| |
| *** 1.4.4 Resize text
| |
| *** 1.4.5 Images of Text
| |
| *** 1.4.6 Contrast (Enhanced)
| |
| *** 1.4.7 Low or No Background Audio
| |
| *** 1.4.8 Visual Presentation
| |
| *** 1.4.9 Images of Text (No Exception)
| |
| * [http://www.perpendicularangel.com/kb/design/accessibility/principle-2-operable/ 2. Operable]
| |
| ** 2.1 Keyboard Accessible
| |
| *** 2.1.1 Keyboard
| |
| *** 2.1.2 No Keyboard Trap
| |
| *** 2.1.3 Keyboard (No Exception)
| |
| ** 2.2 Enough Time
| |
| *** 2.2.1 Timing Adjustable
| |
| *** 2.2.2 Pause, Stop, Hide
| |
| *** 2.2.3 No Timing
| |
| *** 2.2.4 Interruptions
| |
| *** 2.2.5 Re-authenticating
| |
| ** 2.3 Seizures
| |
| *** 2.3.1 Three Flashes or Below Threshold
| |
| *** 2.3.2 Three Flashes
| |
| ** 2.4 Navigable
| |
| *** 2.4.1 Bypass Blocks
| |
| *** 2.4.2 Page Titled
| |
| *** 2.4.3 Focus Order
| |
| *** 2.4.4 Link Purpose (In Context)
| |
| *** 2.4.5 Multiple Ways
| |
| *** 2.4.6 Headings and Labels
| |
| *** [http://www.perpendicularangel.com/kb/design/accessibility/principle-2-operable/operable-2-4-7-focus-visible-level-aa/ 2.4.7 Focus Visible]
| |
| *** 2.4.8 Location
| |
| *** 2.4.9 Link Purpose (Link Only)
| |
| *** 2.4.10 Section Headings
| |
| * [http://www.perpendicularangel.com/kb/design/accessibility/principle-3-understandable/ 3.Understandable]
| |
| ** 3.1 Readable
| |
| *** 3.1.1 Language of Page
| |
| *** 3.1.2 Language of Parts
| |
| *** 3.1.3 Unusual Words
| |
| *** 3.1.4 Abbreviations
| |
| *** 3.1.5 Reading Level
| |
| *** 3.1.6 Pronunciation
| |
| ** 3.2 Predictable
| |
| *** 3.2.1 On Focus
| |
| *** 3.2.2 On Input
| |
| *** 3.2.3 Consistent Navigation
| |
| *** 3.2.4 Consistent Identification
| |
| *** 3.2.5 Change on Request
| |
| ** 3.3 Input Assistance
| |
| *** 3.3.1 Error Identification
| |
| *** 3.3.2 Labels or Instructions
| |
| *** 3.3.3 Error Suggestion
| |
| *** 3.3.4 Error Prevention (Legal, Financial, Data)
| |
| *** 3.3.5 Help
| |
| *** 3.3.6 Error Prevention (All)
| |
| * [http://www.perpendicularangel.com/kb/design/accessibility/principle-4-robust/ 4. Robust]
| |
| ** 4.1 Compatible
| |
| *** 4.1.1 Parsing
| |
| *** 4.1.2 Name, Role, Value
| |
A-bad-designer-accessibility.jpg 500 × 713; 97 KB
Jameswilliamsaccessibilityquote.jpg 1,200 × 672; 80 KB
