This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.
Title
Building a web with accessibility in mind
Description
<img attachment="web-accessibility.jpg" align="left">The documentation page <a href="https://www.w3.org/WAI/people-use-web/user-stories/" author="W3C" source="WAI (Web Accessibility Initiative)">Stories of Web Users / How People with Disabilities Use the Web</a> describes nine users, each of whom describes how they work with the Internet, as well as which assistive technologies they use to access text, audio, and video content. Each of them also has a list of use cases ("Barrier examples"), accompanied by solutions that would work for them and their particular restrictions.
<h>Stories</h>
The people range widely in capability.
There's <a href="https://www.w3.org/WAI/people-use-web/user-stories/story-seven/">Marta</a>, who is deaf and blind and who is <iq>taking classes in fashion design and knows she will need to discuss her unique needs with the college since she will likely need class materials to be available on her braille display.</iq>. I mean, she's nearly blind and wants to be a fashion designer? Are we just not even trying to match capabilities to dreams anymore? I'm sure she has a sense of style but her ability to communicate it is not just limited, but just not efficient, no matter how accessible you make web sites or tools.
<a href="https://www.w3.org/WAI/people-use-web/user-stories/story-three/">Lakshmi</a>, who is completely blind, is a more typical example of a user who is completely dependent on a screenreader that only really works well with well-structured, semantically sound pages that clearly label all elements (either in the content itself or using <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a>), with headings and a logical structure that can be easily navigated.
There's also <a href="https://www.w3.org/WAI/people-use-web/user-stories/story-one/">Ade</a>, who has limited use of his arms (and thus a pointing device). This the kind of ailment that could happen to anyone, should an accident temporarily rob you of the use of one or both arms. Keyboard navigation is paramount for Ade---and a lot of users at various times.
<a href="https://www.w3.org/WAI/people-use-web/user-stories/story-nine/">Elias</a> has low vision, hand tremor, and mild short-term memory loss (he's 85). This comes for all of us, if we're lucky. Tiny text, silly contrasts, squirrelly fonts, and designers self-pleasuring themselves are the death of the web for these people. Large tables can be nearly unusable when zoomed beyond the size at which they were designed. <a href="https://www.w3.org/WAI/people-use-web/user-stories/story-four/">Lexie</a>, who has <iq>deuteranopia and protanopia</iq>, also has problems with contrasts that other people can easily distinguish.
<a href="https://www.w3.org/WAI/people-use-web/user-stories/story-two/">Ian</a> is autistic, for whom <iq>[w]ebsites that spell everything out and don’t use metaphors are easier for me to understand.</iq> This is one I'd not considered in terms of a disability, but only because much of the world speaks English, but at B2 level or much less. They will understand basic-to-intermediate communication but you can't be breaking out idioms (there's one right there) that are highly culturally dependent, or even generationally dependent. Ian's not going to understand your clever quips.
This is where things get quite difficult. To what degree do you dilute your presentation? Do you want to make art or something that everyone can use? Or is it good to keep Ian and non-native readers/listeners in mind, just in case you can quickly and easily think of a way of making something that is both artistic and accessible. A win-win.
That also applies to users like <a href="https://www.w3.org/WAI/people-use-web/user-stories/story-five/">Sophie</a>, who has Down's Syndrome and gets <iq>confused and overwhelmed when I’m on a page that has a lot of text.</iq> Look, maybe not everything is for Sophie, but this whole section makes me remember that non-native readers are also very limited in their ability to absorb text quickly---or at all. If the writing style is too complex, then they'll be unable to use your site.
This doesn't mean that you should <i>write down</i> to the lowest common denominator! It just means that you should keep it in mind, wielding your rapier wit and demonstrating your erudition where appropriate rather than <i>partout</i>. If you can't control yourself---or don't want to---then you can make sure that text is selectable and extractable so that LLM-based summarizers can manipulate it. This is a form of progressive enhancement as well---some readers will see the high-falutin' version, while others will read a bare-bones summary, according to their needs and wishes.
This same need also comes from <a href="https://www.w3.org/WAI/people-use-web/user-stories/story-six/">Dhruv</a>, who is deaf. He needs accurate captions in order to participate in classes or watch videos. Controls that allow him to slow down the content or easily pause/restart it are also immensely helpful. This goes for people watching content who are either not so quick on the uptake, who tire more quickly than others, or who are viewing content in a non-native language.
<a href="https://www.w3.org/WAI/people-use-web/user-stories/story-eight/">Stefan</a> has ADHD and dyslexia and falls somewhat into the same camp. I am much less a fan, though, of the rainbow-colored, karaoke-style-animated, and hard-coded captions right in the middle of the video that have begun appearing in many places, especially in short videos intended for dissemination on social-media networks like TikTok. This is not a progressive enhancement I find them incredibly distracting, pulling attention away from the actual video, which, for me, is often a demonstration of a programming technique.
<h>We all need accessibility sometimes</h>
Honestly, this is required reading for anyone building user interfaces. It really makes you think about what you're building. My main takeaway is that we all have varying capabilities at various times. Throughout our lives, we will acquire and lose capabilities. Sometimes our abilities range throughout the day, or from day to day. Are you holding a baby in one hand? Can you navigate the site with the keyboard? Did you break an arm? Did you have surgery on your eye? Are you tired? Sick? Is your screen really small? Really big? Did you get interrupted while filling out a form? Are you working in a non-native language? This stuff affects us all, to varying degrees and at varying times.
<h>Takeaways</h>
My technology and design takeaways are,
<ul><b>Rely on the platform</b> as much as possible. It has excellent assistive support for built-in elements.
This <b>goes double for forms</b> and form elements. <b>Be declarative</b> (is it required?) and provide input examples (<b>placeholders</b>).
<b>Keep it simple</b> wherever possible.
<b>Animation</b> and effects should be <b>optional</b>.
Consider <b>color and shape contrasts</b> when grouping elements.
<b>Respect user preferences</b> for less animation, high contrast, or anything else that you can set in a modern browser. Leaning on the platform of HTML/CSS will give you a lot of these things for free.
<b>Presentation</b> should be <b>consistent</b>.
Everything should be <b>zoomable and responsive</b>.
Lean on <b>well-established presentation conventions</b> for the culture or cultures you're addressing.
Provide <b>alternatives</b> for images (captions) and videos (transcripts).
Content should be well-written, in that it should not run on and should be <b>divided into easily navigated, logical sections.</b>
<b>Keyboard support</b> is vital.
Longer <b>processes should be resumable</b> (e.g., return to a form in-progress).
Be <b>careful with session timeouts</b>. They're usually unnecessary and may be far too short for some years, effectively blocking them from using your site.
</ul>