A personal collection of resources, notes, and references for web accessibility
- Links & Resources
- Screen Readers
- Concepts
- Patterns
- Attributes
- Focus
- Elements
- Components
- Abbreviations
Resources
- WAI ARIA
- ARIA Authoring Practices Guide
- Techniques for WCAG 2.2
- a11ysupport
- Check the support of various features across screen readers, browsers, and devices
- https://github.com/scottaohara/accessible_components
Blogs
- https://adrianroselli.com/
- https://sarahmhigley.com/
- https://www.scottohara.me/
- https://tink.uk/
- https://www.a11yproject.com/
- https://inclusive-components.design/
Tools
Videos
Talks
- https://talks.hiddedevries.nl/7336XA/slides
- Approaching accessibility from an organization
- How to move accessibility earlier on in the process
Newsletters
Design Systems
| Name | Homepage | Repo |
|---|---|---|
| GOV.UK Design System | https://design-system.service.gov.uk/ | https://github.com/alphagov/govuk-design-system |
| U.S. Web Design System | https://designsystem.digital.gov/ | https://github.com/uswds/uswds |
Getting started
Training
| Command | Description | Source |
|---|---|---|
| Press JAWS Key + Spacebar, then press H | View JAWS speech history | Link |
| Press Shift + JAWS Key + F1 | Announce accessibility info from DOM | Link |
Links & Resources
- https://www.freedomscientific.com/training/jaws/getting-started/
- https://mobile.twitter.com/aardrian/status/1516755145622794244
- The Focus Highlight add-on is incredibly useful
Links & Resources
- https://www.youtube.com/watch?v=Jao3s_CwdRU
- https://addons.nvda-project.org/addons/focusHighlight.en.html
Links & Resources
Links & Resources
This section contains information around different concepts as they relate to web accessibility. These are broader techniques that should be supported or considered when building for the web.
Checklist
- Enable Windows High Contrast Mode
- Verify that the piece of UI that you're testing for is visible, including any interactions
- Make sure to adjust the Windows High Contrast Mode theme to verify that the keywords adapt to user preference
When authoring focus styles, in particular with box-shadow, it's important to note that Windows High Contrast Mode will ignore these changes (Reference). One recommendation from Sarah Higley is to use a transparent outline along with box-shadow (or other custom focus styles). This transparent outline should match the width of your custom focus styles and will be visible when WHCM is turned on.
Links & Resources
- https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/
- https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
- https://sarahmhigley.com/writing/whcm-quick-tips/
- https://adrianroselli.com/2017/11/os-high-contrast-versus-inverted-colors.html
- https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/
- https://www.maxability.co.in/2021/06/13/windows-high-contrast-mode-and-accessibility-testing/
Forced colors mode is an accessibility feature intended to increase the readability of text through color contrast. Individuals with limited vision often find it more comfortable to read content when there is a particular type of contrast between foreground and background colors.
Techniques
forced-colorsmedia queryforced-color-adjustCSS property- CSS system colors
Links & Resources
- https://www.youtube.com/watch?v=vlx70ABSAP0
- https://a11ytalks.com/posts/2022-APR
- https://polypane.app/blog/forced-colors-explained-a-practical-guide/
- https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/
A user may enable a setting on their device to minimize the amount of non-essential motion. This can be detected using the prefers-reduced-motion CSS media feature.
It's important to note that this setting does not necessarily mean that all motion needs to be disabled if reduce is set. Instead, this setting represents a spectrum that indicates if a user experiences distraction or nausea from animated content.
Links & Resources
Software that helps to control the device with one's voice
Tools
| Tool | Operating System | Integration |
|---|---|---|
| Dragon Naturally Speaking | Windows | Third-party |
| Speech Recognition | Windows | Built-in |
| Voice Control | macOS | Built-in |
| Voice Control | iOS | Built-in |
| Voice Access | Android | Built-in |
Interaction Patterns
- Dictation command
- Voice command
- Mouse Grids
- Show labels or names
Techniques
Links & Resources
Links & Resources
This section contains information around ways in which a component, or set of components, may be used and how that pattern may or may not be problematic.
A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
Links & Resources
- https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
- https://adrianroselli.com/2020/05/disclosure-widgets.html
Links & Resources
- https://www.scottohara.me/blog/2022/02/05/are-we-live.html
- https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/
- https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/
- https://www.scottohara.me/blog/2022/02/05/dynamic-results.html
Links & Resources
Often related to this violation: https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable
Links & Resources
Links & Resources
Links & Resources
- https://www.tpgi.com/the-ballad-of-text-overflow/
- https://yatil.net/blog/text-overflow-ellipsis-harmful
Visually Hidden
Links & Resources
Links & Resources
This section contains information around ways in which an attribute may be used on an element in a way that may or may not be problematic.
Links & Resources
Generally, having a UI element be disabled is unhelpful. It does not indicate why the control is in a disabled state. If possible, find a way to communicate why the current state is invalid and how to remedy it.
In situations where you would like to communicate why something is conditionally not available, one may use aria-disabled. It's important that the UI element looks and acts disabled and that there is a clear explanation as to why the control is not available.
Links & Resources
Links & Resources
- w3c/aria#1024
- https://www.matuzo.at/blog/2023/aria-haspopup/
- https://html5accessibility.com/stuff/2021/02/02/haspopup-haspoop/
Usage of the title attribute is problematic as the information is not exposed in an accessible way. From the HTML Spec:
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute
Links & Resources
- https://www.tpgi.com/using-the-html-title-attribute-updated/
- https://developer.yoast.com/blog/dont-rely-title-attribute/
Links & Resources
- https://www.nngroup.com/articles/form-design-placeholders/
- https://www.maxability.co.in/2016/01/03/placeholder-attribute-and-why-it-is-not-accessible/
- https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/
- https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
https://w3c.github.io/aria/#managingfocus
- Tab order
- Roving tabindex
aria-activedescendant- Determining initial focus
- Sometimes it's helpful to have the "selected" item be the initial focus candidate
- It's important to remove
disabled, hidden, or otherwise unavailable items from initial focus candiates
- Restoring focus
- It's important to remember what the last active element was in order to restore focus to it
- When swapping out or removing a button, make sure to restore focus to a previous item or add it to the item that has replaced the button
- e.g. a follow button that is swapped out for a unfollow button
Generally, the structure of an svg icon should match the following:
<svg aria-hidden="true" focusable="false">
<!-- ... -->
</svg>aria-hiddenis set to"true"to hide the decorative iconfocusableis set to"false"to make this element inert in IE11 and Edge
An <svg> element may use an aria-label along with role="img" if used as the contents of a control, like a <button>, where the label should be communicated.
If interactive, the <svg> element must provide a label, tabindex, and use role="img":
<svg aria-label="Icon label" role="img" tabindex="0" focusable="true">
<!-- ... -->
</svg>An <svg> element may use aria-labelledby with <title> to provide a label instead of aria-label.
References
This section contains information around specific components and how they might be built accessibly or challenges that one may run into.
Links & Resources
Links & Resources
Features
- Variants
- Primary
- Secondary
- Outline / Ghost
- States
- Default
- Focus
- Active
- Hover
- Disabled
- Content
- Text-only
- Icon-only (with tooltip)
- Text and icon
- Interesting combinations
- Disabled button plus tooltip
Links & Resources
Links & Resources
Features
- Row expansion
- Filtering
- Sorting
- By single column
- By multiple columns
- Selection
- Keyboard shortcut: Shift+DownArrow to select a row
- Pagination
- Inline editing
- Virtualization
- Batch actions
- Inline actions
Links & Resources
- https://inclusive-components.design/data-tables/
- https://adrianroselli.com/2017/11/hey-its-still-ok-to-use-tables.html
- https://tink.uk/how-screen-readers-navigate-data-tables/
- Sorting
- Expansion
- Responsiveness
- Grid vs table roles
- Changing CSS display properties on tables
- https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/
- https://adrianroselli.com/2020/10/a11yto-conf-css-display-properties-versus-html-semantics.html
- https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-safari-still-break-accessibility-via-display-properties.html
- Screen Readers
Behavior
- When dialog is activated focus is moved to the dialog.
- Default initial focus is on the first interactive element in the dialog.
- The dialog should have an accessible name and announce itself as a "dialog".
- The dialog should be dismissable by
- activating a "close" button inside the dialog
- pressing the escape key
- blurring the dialog by clicking or tapping outside of it
- If the dialog is modal obscured contents should be inert and inaccessible via keyboard and virtual cursor by constraining focus to the dialog in a "ring".
- If the dialog is non-modal keyboard and virtual cursor focus is not constrained to the dialog and can leave the dialog causing it to close.
- When the dialog is closed focus should return to the triggering element unless the dialog is non-modal and was closed by focus or virtual cursor leaving the dialog.
Links & Resources
- https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
- https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/
- https://www.scottohara.me/blog/2019/03/05/open-dialog.html
- https://www.youtube.com/watch?v=JS68faEUduk
- https://svinkle.github.io/launchy/
- https://github.com/WICG/inert
- https://github.com/scottaohara/accessible_modal_window
- Implementations
Links & Resources
Links & Resources
- https://github.com/scottaohara/accessible_modal_window
- https://www.scottohara.me/blog/2016/09/07/revised-modal-window.html
- https://www.scottohara.me/blog/2019/03/05/open-dialog.html
- https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/
- https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html
- https://github.com/KittyGiraudel/a11y-dialog
Links & Resources
- https://www.youtube.com/watch?v=W5YAaLLBKhQ
- https://adrianroselli.com/2020/01/defining-toast-messages.html
- https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html
- https://sheribyrnehaber.medium.com/designing-toast-messages-for-accessibility-fb610ac364be
- Use a surrounding
<nav>with an appropriatearia-label - For Previous and Next links:
- Make sure any direction visuals (like icons for arrows) are hidden (either through
aria-hidden="true"orrole="presentation") - Make sure they use
<a>tags - Make sure they use
rel="prev"andrel="next", respectively
- Make sure any direction visuals (like icons for arrows) are hidden (either through
- For page links:
- If possible, wrap in a surrounding
<ul>or<ol> - Each item is within a
<li>and uses a<a> - Each item should have an
aria-labelwith contents set to the localized text representing: "Page {number}" - If the item is the current page, it shoudl set
aria-current="page"
- If possible, wrap in a surrounding
Example
<nav aria-label="Pagination">
<ul>
<li>
<a href="..." rel="prev" aria-label="Previous page">Previous</a>
</li>
<li>
<a href="..." aria-label="Page 1">1</a>
</li>
<li>
<a href="..." aria-label="Page 2" aria-current="page">2</a>
</li>
<li>
<a href="..." aria-label="Page 3">3</a>
</li>
<li>
<a href="..." rel="next" aria-label="Next page">Next</a>
</li>
</ul>
</nav>Links & Resources
- https://designsystem.digital.gov/components/pagination/
- https://design-system.service.gov.uk/components/pagination/
Usage
- A switch may have an immediate effect upon activation (
button) - A switch may have an effect upon form submission (
<input type="checkbox">)
Links & Resources
- https://www.scottohara.me/note/2019/04/03/switch-script.html
- https://adrianroselli.com/2021/10/switch-role-support.html
- https://adrianroselli.com/2019/08/under-engineered-toggles-too.html
- https://adrianroselli.com/2019/03/under-engineered-toggles.html
Links & Resources
- https://sarahmhigley.com/writing/tooltips-in-wcag-21/
- https://github.com/scottaohara/a11y_tooltips
- https://www.youtube.com/watch?v=lb0_v7D4kbs
Scenarios
- Selection (single, multi)
- Navigation
- Leading and trailing visuals and labels
- Dynamically loading in sub-trees
Discussions
Design Systems
| Name | Guidelines | CSS | Web Components | React | Angular |
|---|---|---|---|---|---|
| Carbon Design System | Link | Link | |||
| Clarity Design System | Link | ||||
| Spectrum | Link |
| Abbrevation | Word or phrase |
|---|---|
| APG | Authoring Practices Guide, see Link |
| ARIA | Accessible Rich Interactive Applications, see Link |
| WAI | Web Accessibility Initiative, see Link |
| WHCM | Windows High Contrast Mode |