Meeting Conflicting Access Needs
John Slatin AccessU 2022 Julie Grundy Senior Consultant Andrew Arch Principal Consultant May 2022
A presentation at AccessU 2022 in May 2022 in Austin, TX, USA by Julie Grundy
John Slatin AccessU 2022 Julie Grundy Senior Consultant Andrew Arch Principal Consultant May 2022
Clickable cards, a common UI feature
<a class=”au-card—clickable” href=”public/supporters/2021_CS.html”> <div class=”au-card__inner”> <h3 class=”au-card__title”>Census Supporters</h3> <div class=”au-card__description”> <p>Information and resources about the Census Test and ways to help people who might have questions.</p> </div> </div> <div class=”au-card__footer”><span class=”au-cta-link”></span></div> </a>
Client wanted everything tested by many different users. In particular we found issues for: • Low vision user with ZoomText on Windows • Dyslexic user with Speak on iPhone
A zoomed in view of a website with high contrast styles. Our user’s cursor is large and yellow. He tries to use the cursor to select the text of a heading, then continues to scroll. “So that’s a big thing, I can’t even highlight this top heading. So that would be a big thing for me. Reading this would make me very fatigued, um… And then these census support, work for… I guess keeping your community safe, opportunities, and probably why it happens. Information and resources about the census and then we go…” He attempts to select a different heading, which works. “Oh ok, I can highlight this heading which is good….” He tries to select one of the card-style links and it doesn’t work. Can I highlight this? No. What if I do that?”
He is able to drag the selection from the heading over the card text, which selects some but not all of the cards. “Yeah like some websites that, it’s kind of like a weird thing you can do. If you can highlight one part you can kind of drag it along, but also that means if I wanted to listen to this middle paragraph I would have to listen to the top and that…” He indicates the second and third cards. “… rather than the bits and pieces that I want to.” Andrew: “Right.”
The solution must: • Keep the large clickable area • Sound useful in a screen reader • Have selectable text
“It’s not highly probable the user would choose to select text from a card/teaser when they have access to the full content to which the card/teaser is pointing. But it may be disconcerting to them to find they cannot select the text.” https://inclusive-components.design/cards/
https://codepen.io/intopia/pen/oNYwOpL
Other situations • Menu systems and user expectations • Multiple fonts and colours • Speech recognition vs speech impairment
• Any screen size • Any orientation (even for native apps) • Mouse, touch, keyboard
https://web.dev/learn/design/
• Basic WCAG contrast • Test in high contrast themes • Dark mode?
• Reduced motion • Every platform • CSS and JavaScript media queries
https://mobile.twitter.com/ChanceyFleet/status/1460023280983842821
Check AAA and upcoming criteria when designing: • 1.4.7 Low or No Background Audio • 2.4.9 Link Purpose (Link Only) • 2.4.10 Section Headings • 2.5.5 Target Size • 3.2.6 Consistent Help (coming in version 2.2)
Check AAA and upcoming criteria when building: • 2.3.3 Animation From Interactions • 2.5.6 Concurrent Input Mechanisms • 2.4.12 Focus Appearance (Enhanced) (version 2.2) • 2.5.7 Dragging Movements (version 2.2)
Check the taskforces: • Cognitive and Learning Disabilities • Low Vision • Pronunciation
https://www.w3.org/WAI/about/groups/taskforces/
• What happens when multiple tools are running? • Project Euphonia and Common Voice • Emerging tech like VR and AR
• Usability testing • Chat online with people with disabilities • Then do more usability testing
Remember there is more to accessibility for users than just meeting WCAG! • Julie: julie@intopia.digital • Andrew: andrew@intopia.digital
hello@intopia.digital
