Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility #46

Open
ArthurSmid opened this issue Aug 19, 2020 · 2 comments
Open

Accessibility #46

ArthurSmid opened this issue Aug 19, 2020 · 2 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed html & css

Comments

@ArthurSmid
Copy link
Contributor

ArthurSmid commented Aug 19, 2020

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 ArthurSmid added enhancement New feature or request help wanted Extra attention is needed labels Aug 19, 2020
@ArthurSmid ArthurSmid self-assigned this Aug 19, 2020
@ArthurSmid
Copy link
Contributor Author

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
Copy link
Contributor Author

ArthurSmid commented Sep 11, 2020

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed html & css
Projects
None yet
Development

No branches or pull requests

1 participant