A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 18KB

4 years ago
12345678
  1. title: Accessibility according to actual people with disabilities
  2. url: https://axesslab.com/accessibility-according-to-pwd/
  3. hash_url: b8c48710bfa47017b012c6bcd961ec11
  4. <p>In this article I’ll summarize and group the main topics that people bring up in the thread.</p><p>But do click on the tweet and read through all the answers. It’s an awesome read for anyone interested in making the web a better place for all. And, in my opinion, a far better place to learn about accessibility than reading any checklist or standard.</p><h2 tabindex="-1" id="lack-of-captions">Lack of captions</h2><p>Videos without captions (subtitles) was by far the obstacle that most people commented on. Here is what a few had to say:</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Being deaf, got to say captioning videos is number one issue for me</p><p>— Jay Jackson (@jjackson) <a href="https://twitter.com/jjackson/status/871209439856009216">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Video/audio with no captioning or transcript.</p><p>— Katelyn Reilly (@k_hack) <a href="https://twitter.com/k_hack/status/871189568187322368">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">I’m hard of hearing so big pain for me is video with no captions. tweet or article just says “can u believe he said this?” &amp; no summary</p><p>— Carol Carpenter (@carolmcarpenter) <a href="https://twitter.com/carolmcarpenter/status/871067344038219776">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Also, my sister says that she hates it when she comes across videos that are not closed captioned. She’s Deaf.</p><p>— Erica Boleyn (@radcrochetqueer) <a href="https://twitter.com/radcrochetqueer/status/871104664544137216">3 juni 2017</a></p></blockquote><p/><p>Non-existing captions is something that can completely exclude users who are deaf or hard of hearing. But it affects many others as well. Anyone on the bus who forgot their headphones. Or some autistic users:</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">I’m Autistic and when I get overloaded, it’s harder to process auditory input. Especially if the person talking is offscreen or something</p><p>— act up, fight back (@UntoNuggan) <a href="https://twitter.com/UntoNuggan/status/871063283951960064">3 juni 2017</a></p></blockquote><p><br/>
  5. Many are hoping that automatic captioning solves this problem. But alas, not yet!</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Not really YouTube’s auto subtitling is not accurate enough.</p><p>— Robin (@tohereknowswhe) <a href="https://twitter.com/tohereknowswhe/status/871067630165270528">3 juni 2017</a></p></blockquote><p><br/>
  6. And the auto-captioning feature sadly isn’t available for most languages. So it’s still up to the video creators to caption.</p><h2 tabindex="-1" id="motion-animations-and-cluttered-pages">Motion, animations and cluttered pages</h2><p>Motion and animation can be annoying to anyone, but is extra frustrating to many users with cognitive impairments:</p><blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-lang="sv"><p dir="ltr" lang="en">ADHD: If there’s a “subtle” animation always running, I cannot focus. Biggest offender: <a href="https://t.co/KgfCA4a7lB">https://t.co/KgfCA4a7lB</a>‘s header gradient</p><p>— Taylor Hunt (@tigt_) <a href="https://twitter.com/tigt_/status/871061419600510978">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Assuming ADHD counts, it’s hard to locate content on overly busy pages and animations are a nightmare of distraction. <a href="https://twitter.com/hashtag/clickthemonkey?src=hash">#clickthemonkey</a></p><p>— mkb (@mojinations) <a href="https://twitter.com/mojinations/status/871173727601307648">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">related, I’m also autistic and can get frustrated with, or repelled by, glitzy mouseover effects/animations, sudden autoplay, etc.</p><p>— back at the holler (@elementnumber46) <a href="https://twitter.com/elementnumber46/status/871065807165558786">3 juni 2017</a></p></blockquote><p/><p>Do your users a favor by not distracting them with autoplaying videos, advertisements or image carousels.</p><h2 tabindex="-1" id="wall-of-text">Wall of text</h2><p>Many replies, especially from people with dyslexia or cognitive impairments, were about large chunks of text.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Dyslexic – not really seen as a disability, but large walls of text is painful.<br/>
  7. Also never ending sentences and over complicated language.</p><p>— Mustafa Kurtuldu (@Mustafa_x) <a href="https://twitter.com/Mustafa_x/status/871138503408615428">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">When ppl type large blocks of text w/ no spaces added</p><p>— Dead Ass (@MeBeShe4815) <a href="https://twitter.com/MeBeShe4815/status/871082326578548736">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Huge paragraphs. A page on Wikipedia often consists of many long paragraphs with long sentences. I lose my place within seconds.</p><p>— Ava Jarvis Art (@AvaJarvisArt) <a href="https://twitter.com/AvaJarvisArt/status/871057896267694080">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">ADHD + large, uninterrupted blocks of text or small bits of animation not part of the main content of a page</p><p>— back at the holler (@elementnumber46) <a href="https://twitter.com/elementnumber46/status/871064762481872897">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Large paragraphs, too many moving images, too much content as videos (especially help files), no subtitles, pages with too much going on.</p><p>— Polenth Blake (@Polenth) <a href="https://twitter.com/Polenth/status/871080703370424321">3 juni 2017</a></p></blockquote><p/><p>The solution is so simple. Just create more paragraphs and sub-headings! And throw in more bullet-lists. Voilà!</p><h2 tabindex="-1" id="small-font-size">Small font size</h2><p>Amazingly there’s no minimum font size requirement in the Web Content Accessibility Guidelines. Even though it affects so many low-vision users.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Nearly blind in my left eye. Tiny, thin font with low contrast to the background</p><p>— ⚡️Andrew So⚡️ (@AndrewDixonSo) <a href="https://twitter.com/AndrewDixonSo/status/871062142799142913">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Fonts are often too small and sites break when I increase font sizes.</p><p>— Brandon Savage (@brandonsavage) <a href="https://twitter.com/brandonsavage/status/871067906414608387">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Tiny font size and certain animations.</p><p>— Morgan Estes (@morganestes) <a href="https://twitter.com/morganestes/status/871070319129145348">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="zooming-problems">Zooming problems</h2><p>Some users with low vision point to layout and navigation problems when zooming or increasing font-size.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">My daughter has low vision and has to use 300-500% magnification. Many web sites are hard to navigate at this level</p><p>— Kir Kolyshkin (@kolyshkin) <a href="https://twitter.com/kolyshkin/status/871118386754801664">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Neurological vision problems due to CFS/ME. Small fonts, I browse everything with fonts enlarged, but sometimes it screws up the layout.</p><p>— Maija Haavisto (@DiamonDie) <a href="https://twitter.com/DiamonDie/status/871064350097854464">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">for visually challenged, it is understanding the layout</p><p>— VAMSI KRISHNA (@VamsiJKrishna) <a href="https://twitter.com/VamsiJKrishna/status/871081499608588288">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="low-contrasts-and-image-of-text">Low contrasts and image of text</h2><p>One of the cornerstones of accessibility, color contrast, is still a major problem in a lot of interfaces.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Lack of contrast between font color and background color. Photo backgrounds that overpower the text on top of them.</p><p>— Megan Lynch (@may_gun) <a href="https://twitter.com/may_gun/status/871175194328539136">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Text rendered as graphics instead of text with no alt tags, no image description. From websites to memes.</p><p>— Megan Lynch (@may_gun) <a href="https://twitter.com/may_gun/status/871175540849364992">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">That’s definitely lack of contrasts in colors</p><p>— charles dominic (@gamescharlie79) <a href="https://twitter.com/gamescharlie79/status/871069372655087617">3 juni 2017</a></p></blockquote><p/><p>So it is vital for web designers and art directors to understand how to measure and create accessible color schemes. Check out our list of <a href="http://axesslab.com/top-color-contrast-checkers/">seven great, free color contrasts tools</a>.</p><h2 tabindex="-1" id="bright-color-schemes">Bright color schemes</h2><p>Bright color schemes can be a big problem for users with low vision and is something that gets too little focus in accessibility discussions. It was interesting how many commented on it in the thread, and the different strategies they had to get around the problem:</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">(cont) so this is fairly simple but I really appreciate the “night” modes that some things have. Less eye strain that way.</p><p>— Callie 🌈 (@cxllielayne) <a href="https://twitter.com/cxllielayne/status/871211274582937601">4 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">re: frequent &amp; debilitating migraines, so many sites are coded with light color scheme&amp;I can’t use them even w/ sunglasses on &amp; monitors dim</p><p>— Pyrrh-T900XV1 (@xpyrrh) <a href="https://twitter.com/xpyrrh/status/871085248250957824">3 juni 2017</a></p></blockquote><p/><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">I need to be able to get the article onto my Kindle Oasis to avoid backlight. I’ve also found the reader feature to be hit-and-miss.</p><p>— Kal Cobalt (@kalcobalt) <a href="https://twitter.com/kalcobalt/status/871192692310409216">4 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="relying-only-on-color">Relying only on color</h2><p>This is also a cornerstone of accessibility that so many miss.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Colourblind. Text on background is usually fine, but things like colour-coded toggles, heatmaps, etc can be hard.</p><p>— Dan 🇪🇺 (@phrawzty) <a href="https://twitter.com/phrawzty/status/871279577758392321">4 juni 2017</a></p></blockquote><p/><p>It’s really easy to test, just view your site in greyscale. Here’s an example of a toggle that’s really difficult to understand when you take colors away. Which one is on and which one is off?</p><p/></div><div class="grid site-content"><p>And it’s not only people who are color-blind who need information to be conveyed in other ways than color:</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Sleep disorder: I have to read after 5pm with f.lux cranked up all the way, so sites that assume hyperlinks can be blue w/no underline…</p><p>— Taylor Hunt (@tigt_) <a href="https://twitter.com/tigt_/status/871061632155340800">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="mouse-focused-sites">Mouse-focused sites</h2><p>Even in this day of the touch-screen-revolution, too many sites still rely on mouse interaction. Especially for navigation on large screens. That needs to change.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">I don’t have one but my mother has Parkinson diseas and mouse Interactions are really hard for​ her</p><p>— A dev has no name (@KodierKroete) <a href="https://twitter.com/KodierKroete/status/871175620146982912">4 juni 2017</a></p></blockquote><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">The number of sites which insist on using mouse over as the only means of menu triggering.</p><p>— Zack (@zkline) <a href="https://twitter.com/zkline/status/871063757715193856">3 juni 2017</a></p></blockquote><p>For some users with motor impairments that navigate using only their keyboard, a clear <a href="http://www.outlinenone.com/">focus outline</a> is vital to being able to navigate the web.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Lack of focus outlines. Especially on links (they look ugly to most designers so they remove them) and custom components (eg dropdowns).</p><p>— nuton.dev (@NutonDev) <a href="https://twitter.com/NutonDev/status/871096476423925761">3 juni 2017</a></p></blockquote><p/><h2 tabindex="-1" id="too-small-touch-targets">Too small touch-targets</h2><p>This topic is related to the mouse-focused heading above. Many people bring up the problem with too small touch targets.</p><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">My brother-in-law has cerebral palsy, buttons and links are too small for him to use. He can only use touch because he can’t hold a mouse.</p><p>— Gary Rozanc (@garyrozanc) <a href="https://twitter.com/garyrozanc/status/871061173545963522">3 juni 2017</a></p></blockquote><blockquote class="twitter-tweet" data-conversation="none" data-lang="sv"><p dir="ltr" lang="en">Mobile twitter is also rly hard bc I have a tremor + visual-spatial processing issues. Often will click on the wrong thing by mistake.</p><p>— (((self crytptid))) (@plathituudes) <a href="https://twitter.com/plathituudes/status/871083069008228352">3 juni 2017</a></p></blockquote><p>A great new insight for me came from Dave Ross who brought up the problem of too large click targets:</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">(Sometimes I have hand tics that make precise mouse control hard or I tap a touchscreen screen unnecessarily)</p><p>— Dave Ross (@csixty4) <a href="https://twitter.com/csixty4/status/871116621548486657">3 juni 2017</a></p></blockquote><p>Multi-touch gestures are also a deal-breaker for some users.</p><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">Yes! Kindle app has this “tap twice &amp; hold” to get to the menu 4 display settings on books and it is super difficult. (Hand deformity)</p><p>— Kristen Anne Strater (@KristenAnneSF) <a href="https://twitter.com/KristenAnneSF/status/871230651357331460">4 juni 2017</a></p></blockquote><h2 tabindex="-1" id="captchas">CAPTCHAS</h2><p>Finally, we end with a classic accessibility failure: the dreaded CAPTCHA. Annoying everyone who comes across it, but completely locking out many with visual impairments or learning disabilities.</p></div><div class="grid site-content"><blockquote class="twitter-tweet" data-lang="sv"><p dir="ltr" lang="en">As to what drives her nuts, non-accessible captchas are the top. It can severely limit which services are available to her.</p><p>— Danny Does Code (@DannyDoesCode) <a href="https://twitter.com/DannyDoesCode/status/871083590456492032">3 juni 2017</a></p></blockquote><h2 tabindex="-1" id="final-thoughts">Final thoughts</h2><p>Reflecting on the answers to this thread, a few things become clear:</p><ul><li>Web accessibility is about so much more than just blind people with screen readers.</li><li>Basically everything that people with disabilities comment on are things that annoy everyone, so fixing these issues makes your interface better for all users!</li><li>A lot of what people comment on is not covered by the <a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines</a>. So you need to <a href="http://axesslab.com/skip-the-wcag-user-test-with-people-with-disabilities-instead/">test with users with disabilities</a>!</li></ul><p>So thank you Safia Abdalla for tweeting your question. And thanks for everyone who responded and taught me (<a href="https://twitter.com/hampelusken">@hampelusken</a>), and many others, a lot about accessibility.</p><h2>Get notified when we write new stuff</h2><p>About once a week we write an article about accessibility or usability, that’s just as awesome as this one (#HumbleBrag)!</p>