A presentation at AccessU 2022 in 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
AccessU is a week-long conference for accessibility specialists who want in-depth learning.
During usability testing for a major national project, Andrew and I discovered that a fix we had applied to support screen reader users had created a new problem for text-to-speech users. This led us to explore how digital products which comply with WCAG can still present problems to user groups who have different but equally necessary needs.
The following resources were mentioned during the presentation or are useful additional information.
Use the second method (redundant click) for maximum accessibility
Chancey Fleet describes in a Twitter thread how she wanted to use Google Translate with her Braille reader to watch some Spanish Netflix to practice her Spanish. The Translate service blocked her, thinking it would be talking over screen reader announcements.
Several of the W3C taskforces are researching how to help people with needs that are not widely understood or supported. There are also taskforces for emerging technology which may help meet conflicting needs or create new problems.
for free. You
can too.