OpenEugene / little-help-book-web

Human service resource guide powered by White Bird Clinic
MIT License
6 stars 4 forks source link

Accessibility #46

Open ArthurSmid opened 3 years ago

ArthurSmid commented 3 years ago

The design from the get-go has a basic accessibility feature for the vision-impaired in that we use no images. All text content can be read by a screen-reader. And I gather that a website without images can help people with limited data plans as well as anyone using a feature phone—a more basic device than a smartphone but that often does have Wi-Fi and internet access—that's an additional accessibility feature.

This checklist uses the Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments. https://www.a11yproject.com/checklist/

When working through the checklist, please add a comment here to let everyone know what part of the guidelines you're working on.

One possible place to begin, in considering how screen readers interpret the website html, we need to double-check to confirm all semantic tags are correctly used. Then anywhere the page a wordless visual element on-screen that is essential for navigation or understanding the content, we need to find those and add an alt tag that concisely describes the element in plain language. Ah, the White Bird logo in the header would need an alt tag to says that it's an image of a bird with its wings spread as it's perched on the branch of a tree, then mention that you can press here to enter or return to the table-of-contents.

Please watch this video to better understand how a blind person uses a mobile device—this is amazing: https://twitter.com/Kristy_Viers/status/1287189581926981634

As seen in the video, part of accessibility can be in the hardware itself: "It's a separate keyboard on the phone that shows Braille dots on the screen. So you type in Braille with different combinations of fingers depending on which dots you type. The phone recognizes what dots you are typing." https://twitter.com/Kristy_Viers/status/1288299431708831746

https://www.fastcompany.com/90535264/meet-the-youtuber-whos-schooling-developers-on-how-blind-people-really-use-tech

And here's a note from a user-experience specialist and member of the Code for America brigade in Oakland: "Watching my legally blind friend use her iPhone is always mind-opening for me. She doesn’t adapt to tech easily (largely because of her vision), but her approach is totally different. She hates voiceover. Because she has partial vision, she zooms into screens instead — often to where she’s only seeing 1-2 letters at a time on the screen. She struggles to understand content hierarchy/context as a result, so she does a lot of zooming in/out. It doesn’t keep her off social media, which she uses to promote her business, but she’s constantly apologizing for all her typos because she can’t see the keypad.As a content strategist, I wish every designer in the world could would watch these sorts of interactions—when we mentally and structurally uncouple content from its visual presentation, it frees us up to deliver it more appropriately for these use cases."

Additional resources:

https://material.io/design/usability/accessibility.html

https://support.google.com/accessibility/android/answer/7101858?hl=en

ArthurSmid commented 3 years ago

Note the accessibility features along the top of the page—the font increase size button is an especially nice feature: https://oakfirescience.com/cross-timbers-fire-ecology/

ArthurSmid commented 3 years ago

Another example of a menu of accessibility options, click the human figure in the upper-right: https://oregonlawcenter.org/how-to-get-help/olc-offices/state-support-unit/