Meeting Conflicting Access Needs

John Slatin AccessU 2022 Julie Grundy Senior Consultant Andrew Arch Principal Consultant May 2022

The clickable card saga of 2021

The clickable card saga of 2021

Clickable cards, a common UI feature

Original card markup

<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>

Recommended card markup

<div class=”card”> <h2> <a class=”primary” href=”public/supporters/2021_CS.html”>Census Supporters</a> </h2> <div class=”text”> <p>Information and resources about the Census Test and ways to help people who might have questions.</p> <div class=”au-card__footer”><span class=”au-cta-link”></span></div> </div> Plus CSS pseudo elements to extend hit target over div.card https://inclusive-components.design/cards/

Usability testing

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

Video transcript part 1

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?”

Video transcript part 2

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.”

Back to the team

Back to the code

The solution must: • Keep the large clickable area • Sound useful in a screen reader • Have selectable text

Original article

“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/

New card method

https://codepen.io/intopia/pen/oNYwOpL

WCAG isn't enough

Other situations • Menu systems and user expectations • Multiple fonts and colours • Speech recognition vs speech impairment

No assumptions

How to meet multiple needs?

Responsive design

• Any screen size • Any orientation (even for native apps) • Mouse, touch, keyboard

https://web.dev/learn/design/

Respect user settings for colour

• Basic WCAG contrast • Test in high contrast themes • Dark mode?

Respect user settings for motion

• Reduced motion • Every platform • CSS and JavaScript media queries

Allow multiple inputs/outputs

https://mobile.twitter.com/ChanceyFleet/status/1460023280983842821

Where to from here?

WCAG extras for design

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)

WCAG extras for developers

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)

WCAG extras for everyone

Check the taskforces: • Cognitive and Learning Disabilities • Low Vision • Pronunciation

https://www.w3.org/WAI/about/groups/taskforces/

Research the tools

• What happens when multiple tools are running? • Project Euphonia and Common Voice • Emerging tech like VR and AR

Learn from users

• Usability testing • Chat online with people with disabilities • Then do more usability testing

Let’s chat

Remember there is more to accessibility for users than just meeting WCAG! • Julie: julie@intopia.digital • Andrew: andrew@intopia.digital

hello@intopia.digital