Giters

jouni-kantola / learning-a11y

Learning material for web development with accessibility top of mind.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Web Accessibility

Web accessibility tends to be implemented as an afterthought after audits, because of ignorance rather than ill will. a11y should be seen as a basic requirement, we currently are lacking awareness for. Don't exclude people. Start removing physical and/or cognitive barriers people have with software.

This repo is meant as learning material for web development with accessibility top of mind.

Goals

  1. A button does things, a link takes you places
  2. Experiment: Instead of powering smoke tests via XPath and CSS selectors, use the a11y tree (or tab navigation)
  3. Browse a page with NVDA and/or VoiceOver
  4. Develop a custom select
  5. Develop a popup menu

Tutorials

Reading list

  1. Accessibility: Where to start? (added 2021-05-05)
  2. Creating an Accessibility Engineering Practice (added: 2021-05-05)
  3. Introduction to Web Accessibility (added: 2021-05-05)
  4. Constructing a POUR Website (added: 2021-05-10)
  5. The web accessibility basics (added: 2021-05-05)
  6. Five Rules of ARIA (added: 2021-06-03)

Component examples

Reference material

Q & A

Question Answer
Why the name a11y? a11y is a numeronym (words replaced with numbers), in which the word "accessibility" has 11 characters between first and last letter.
What is AT? Acronym of Assistive Technologies; broad range of automation tooling built for people with disabilities to use software. Use accessibility tree to create alternate user interface. AT relays user interactions via APIs to the browser for translation into application actions.
What is a11y tree? The accessibility tree exposes an interface representing a UI's meaning and associations between nodes.
Why semantic HTML? Specified behavior and associations between elements cannot be interpreted by AT if visuals used to describe meaning.
What's the acronym ARIA? Accessible Rich Internet Applications.
What's the use case for ARIA? Set of HTML attributes to directly and intentionally adapt the a11y tree, like hiding or manipulate meaning.
What's a screen reader? An operative level tool that explains content to users

Be helpful

The web offer independent access to information. Instead of seeing a11y as a feature, design for everyone. Simple navigation, helpful illustrations and logically organized content increase usability for all users.

POUR website

  • Perceivable (P)

    Anyone should be able to input information into their brain for further processing. If they can't, the information is inaccessible. In practice, content should be communicate its message with styling disabled.

  • Operable (O)

    Don't expect everyone to use the same input device as you to navigate the web. As a rule of thumb, make the page usable with only a keyboard, as most alternative devices emulate a keyboard's functionality.

    Don't expect others to navigate the way you are. Often overviewing and quick navigation through content is supported.

    Don't commit changes without confirmation, if recovery isn't easy. Include instructions and expect mistakes. For cognitive purposes, make animations optional.

  • Understandable (U)

    Don't separate usability and accessibility. Use simple and concise language, adapted to users and intention. Be consistent and predictable in interactions.

  • Robust (R)

    Validate HTML! Sticking to standards is a safe bet for robustness. Aim to not require specific browsers or devices. At least, use a baseline, where sacrifices in functionality is thought through when using browsers with less capabilities.

Accessibility checks

  • Does a control semantically represent what it's used for? Favor using native elements, and use them as fallback in rich components. Don't override the semantics of native elements.
  • Which actual element has focus when a control is highlighted? Is it directly interactable?
  • Can the whole application be controlled using keyboard, including rich components?
  • Check that <a> is used in navigation and <button> for updating state.
  • Are all images using alt attributes? Valuable when content not loading properly. For purely decorative images, use empty alt.

Tools

  • The W3C Markup Validation Service
  • a11y tree in Edge/Chrome's DevTools: CTRL+SHIFT+P then search for Show Accessibility
  • axe DevTools: Accessibility Checker browser plugin

Log

  1. 2021-05-03: Find study material. Only briefly browsed through.
  2. 2021-05-03: Watched presentation about Getting Started with #a11y: https://www.youtube.com/watch?v=byh6G3vViWM
  3. 2021-05-05: Goal 1-4 defined
  4. 2021-05-05: Read https://blog.danielna.com/creating-an-accessibility-engineering-practice/. It's a keeper 👍
  5. 2021-05-10: Notes from last session
  6. 2021-05-10: Start describing a POUR website
  7. 2021-05-19: POUR principles described
  8. 2021-05-24: Performed first accessibility audit
  9. 2021-05-24: Built breadcrumb component based on https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html
  10. 2021-06-03: Improved description for assistive technologies and accessibility tree
  11. 2021-06-03: Reading list web development basics documented as accessibility checks

About

Learning material for web development with accessibility top of mind.