Accessibility Responsibilities as a UX/Product Designer
Materials I gathered from 26 presentations at the 2023 CSUN Assistive Technology Conference
Are you overwhelmed with the long list of WCAG2.1 and WCAG2.2?
Well, you are not alone. When I attended the conference, even the top accessibility specialists mentioned how WCAG is not “accessible”!
WCAG can be vague, complex, and developer-focused. But there are guidelines that designers have to keep in mind, and accessibility is a team effort! Jeff Singleton stated.
The key to learning WCAG is to practice through design! There’s no need to know it all from the start. By getting familiar with practice, it will eventually become natural for you when designing! — Cezary Tomczyk
Here, I will be sharing all the materials I gathered from the conference regarding what designers should keep in mind while designing 👍
A11y Tools That Can Help Designers:
IBM:
- IBM Accessibility Checker (free Chrome extension)
- IBM Equal Access Toolkit
Microsoft:
- Accessibility Insights (free tool by Microsoft)
- ARIA Authoring Practices (guidelines on how to design an accessible custom UI component)
SiteLint:
Converge Accessibility:
WCAG 2.2 — Important Updates for Designers
Note: WCAG 2.2 is still draft version and may change before publishing date.
The highlighted lists on the left are all the WCAG2.2 updates that apply to designers! On the right is how you can meet the criteria!
Let’s become familiar with these design updates through design examples 🎉
How to meet 3.2.6 — Consistent Help
Level A: Help channels are displayed in the same way and place to make it easy for people to find help when they need.
✅ Position “help channels” in the same place across pages
✅ Provide “help channels” that look and are labelled the same across pages
❌Does not apply if a help channel is only provided on one page.
How to meet 3.3.7 — Redundant Entry
Level A: Users do not have to re-enter information they have already provided while completing a task
✅ Design flows that do not ask users for the same information twice
✅ Provide checkboxes or dropdowns for users to select previously entered information
✅ Auto-populate inputs with previously entered information
❌ Does not apply if user closes a session or navigates away from a task. Does not apply if re-entering information is essential (e.g. new password validation)
How to meet 2.4.11 — Focus Appearance
Best way to meet 2.4.11: 1. Provide a solid outline of at least 2px around the whole component 2. Offset the focus indicator from the component 3. Contrast between focus and unfocused state has a contrast ratio of at least 3:1 4. Contrast between adjacent colors has a contrast ratio of at least 3:1
✅ Option 1 — three requirements 1. The entire focus indicator surrounds the interactive component 2. The focus indicator has a contrast ratio of at least 3 to 1 between the focused state and the unfocused state 3. The focus indicator has a contrast ratio of at least 3 to 1 against adjacent colors
✅ Option 2 — three requirements 1. Part of the focus indicator is at least a 1 pixel thick per perimeter or at least 4 CSS pixel thick line along the shortest side of the component 2. The focus indicator has a contrast ratio of at least 3 to 1 between the focused state and the unfocused state 3. The focus indicator has a contrast ratio of at least 3 to 1 against adjacent colors OR is at least 2 CSS pixels
How to meet 2.4.12 — Focus Not Obscured (Minimum)
Level AA: Sighted users always know where they currently are on a page because the focus indicator is easy to see and not fully hidden.
✅ The subscription popup is hiding some of the focus indicator on the linked product image but it is not entirely hidden.
How to meet 2.4.13
Level AAA: Sighted users always know where they currently are on a page because the focus indicator is easy to see and not even partially hidden
❌ The subscription popup is hiding some of the focus indicator on the linked product image and so fails
How to meet 2.5.7 — Dragging Movements
Level AA: Any dragging movements can also be done by a single pointer.
✅ Design interfaces that don’t require dragging functionality or 2. If dragging functionality is present, design alternatives that allow single pointer functionality
❌ Does not apply when the dragging movement is determined by the user agent and not the author (e.g. scrolling a page) The dragging movement is essential
How to meet 2.5.8— Target Size (Minimum)
Level AA: Interactive elements are big enough or far enough apart to be able to easily activate.
How to meet 3.3.7 — Accessible Authentication
Level AA: Users are able to authenticate without having to do a cognitive test such as remember, solve, calculate/spell or transcribe information.
If there is a cognitive test to authenticate, then one of the following alternatives should be provided: An alternate method to authenticate without a cognitive test A mechanism to help someone to complete this task An alternative which is recognising objects An alternative which is recognising personal content
3.3.8 Accessible — Authentication (Enhanced)
Level AAA: Users are able to authenticate without having to do a cognitive test such as remember, solve, calculate/spell or transcribe information.
All presentation slides and words are credited to Andrew Arch and Zoë Haughton from Intopia.
What did you learn from the AT conference as a designer? Let’s connect on LinkedIn and share ideas😊
