Designing for accessibility

“How We’ve Built Accessibility Research at Booking.com” (https://lnkd.in/eq_3zSPJ), a fantastic case study on how to build accessibility practices and inclusive design into UX research from scratch. Kindly put together by Maya Alvarado.

🚫 Don’t rely on automated accessibility testing alone.
✅ Compliance means that a user can use your product.
✅ But it doesn’t mean that it’s a great user experience.
✅ Manual testing makes sure that users meet their goals.

✅ Start by gathering people interested in accessibility.
✅ Document what research was done, where the gaps are.
✅ Include 5–12 users with disabilities in accessibility testing.
✅ Recruit via testing platforms, non-profits, communities.
✅ Add extra $25–$50 depending on disability transportation.

✅ Run a small accessibility initiative around key flows first.
✅ Then tap into critical touch points and research them.
✅ Extend to components, patterns, flows, service design.
✅ Incorporate inclusive sampling into all research projects.
✅ At least 15% of usability testers should have a disability.

Companies often struggle recruiting testers with disabilities. One way to find participants is to reach out to local chapters, local training centers, non-profits and public communities of users with disabilities in your country. Ask admin’s permission to post your research announcement, and it won’t be rejected.

I absolutely love the idea of extending Microsoft’s Inclusive Design Toolkit (https://lnkd.in/eN5J7EkJ) to meet specific user needs of a product. It adds a different dimension to disability considerations which might be less abstract and much easier to relate for the entire organization.

As Maya noted, inclusive design is about building a door that can be opened by anyone and lets everyone in. Accessibility isn’t a checklist — it’s a practice that goes beyond compliance. A practice that involves actual people with actual disabilities throughout all UX research activities.

Useful resources:

A Comprehensive Guide to Accessible UX Research, by Brian Grellmann
https://lnkd.in/eAwDQPGr

Inclusive User Research: Recruiting Participants, by Ela Gorla
https://lnkd.in/ejXXzcwY

Testing With Blind Users: A Cheatsheet, by Slava Shestopalov
https://lnkd.in/exgtBPi2

Mobile Accessibility Research with Screen-Reader Users, by Tanner Kohler
https://lnkd.in/eb5Y36qZ

How To Conduct UX Research With Participants With Disabilities, by Peter McNally
https://lnkd.in/ezVmB_fu

How To Conduct Accessibility UX Research, by AnswerLab
https://lnkd.in/ec2q-fM8

---

Vitaly Friedman on LinkedIn

UX for older adults

Guidelines For Designing For Older Adults

• Avoid disappearing messages: let users close them.
• Avoid long, fine drag gestures and precision.
• Avoid floating labels and use static field labels instead.
• Don’t rely on icons alone: add descriptive labels.
• Ask for explicit confirmation for destructive actions.
• Add a “Back” link in addition to browser’s “Back” button.
• In forms, present one question or one topic per screen.
• Use sufficient contrast (particularly shades of blue/purple and yellow/green can be hard to distinguish).
• Make error messages helpful and forgiving.

Useful Resources

• How To Write Better Microcopy For Older Adults, by Michal Halperin Ben Zvi (PhD.) and Kinneret Yifrah
• Age-Friendly Digital Design Toolkit (PDF guide, email required)
• Designing Better Error Messages, by yours truly Vitaly Friedman
• What You Can Learn From Older Adults About Accessible Design, by Becca Selah
• A Guide to Interface Design For Older Adults, by Sergei P.
• Designing User Interfaces for an Aging Population, by Jeff Johnson and Kate Finn
• Age-Positive Image Library
• Voice Design Strategies for the Elderly Population, by shyamala prayaga
• Creating Online Environments That Work Well For Older Users, by BARRY RUEGER
• Usability Testing With Older Adults, by Megan Chan

---

From: Vitaly Friedman, Designing For Older Adults

Accessibility-First UI Components

Accessibility-First UI Components (https://lnkd.in/eN9c_jdd), a fantastic example of an accessibility-first library and design system, with 40 ready-to-use components for complex tables, data grids, forms, navigation, drag-and-drop and status updates.

With close attention to internationalization, keyboard and touch accessibility out of the box! A part of the redesigned Spectrum Design System (https://spectrum.adobe.com), and an absolutely fantastic effort by the wonderful Adobe team.

Useful resources:

Accessibility: https://lnkd.in/ekq2q7Zb
Autism: https://lnkd.in/ekujAteM
Colorblindness: https://lnkd.in/eqjvPgSZ
Color contrast: hhttps://lnkd.in/ecWS4ue7
Dyscalculia: https://lnkd.in/e8wyMWp4
Dyslexia: https://lnkd.in/ei9mncR7
Ethical design: https://lnkd.in/eiPdeZcB
Legibility: https://lnkd.in/eEarXzD8
Left-Handed Users: https://lnkd.in/eWyzRdy5
LGBTQI: https://lnkd.in/eumCiYrk
Mental Health: https://lnkd.in/eEaXjs9x
Older Adults: https://lnkd.in/e54f2FT2
Screen readers: https://lnkd.in/eaviMFkf
Sustainability: https://lnkd.in/etGZbrk9
Target sizes: https://lnkd.in/ePuc3mbJ
Templates: https://lnkd.in/ey3ua5b7

Vitaly Friedman on LinkedIn

Helsinki Design System

Helsinki Design System (https://hds.hel.fi), a wonderful design system by the City of Helsinki, focused on accessibility and form design —  with design guidelines, do’s and don’ts and design principles. A wonderful example of a design system to refer to.

When looking for accessible design guidelines, public services are usually the first references I turn to. Statistical offices, employment agencies, cities and localities and governments. Below are a few that might be helpful — but you might need a translation every now and again.

🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scottish Government Design System (based on Gov.uk)
https://lnkd.in/eu-yAmMj

🇨🇦 City of Calgary, Canada Design System
https://lnkd.in/eE83r-QH

🇳🇴 Oslo Design System
Manual: https://lnkd.in/eQ7pumvg
Design System: https://lnkd.in/eeeaCFXP

🇬🇧 UK Office for National Statistics
https://lnkd.in/eEJrcymD

🇸🇪 Swedish Public Employment Service
https://lnkd.in/eS28HQqZ

🇨🇦 City of Winnipeg, Canada Design System
https://lnkd.in/eb6NZxNb

🇩🇰 Denmark Design System
https://designsystem.dk/

🏥 Bonus: Nordhealth, For Healthcare Applications
https://nordhealth.design

Vitaly Friedman on LinkedIn

Designing better Accordions

With usability guidelines and design considerations for better expand/collapse ↓

✅ Accordions help manage complexity, one level at a time.
✅ Show key details first, secondary details on request.
✅ We use it to show an overview and support quick jumps.
🤔 But content within accordions has poor discoverability.
🚫 Don’t use it for content that all/most users need to see.

🚫 Don’t mix different actions for icons and text labels.
✅ Keep entire accordion panel clickable, with 1 single action.
✅ If needed, add a category link within expanded sections.
✅ Help users trigger all sections at once (expand/collapse all).
✅ Allow users to expand multiple accordion sections at once.
✅ Support keyboard tabbing, focus, state change (Enter/Space).

✅ Prefer caret/chevron pointing down ▼ to indicate expansion.
✅ Map icons with the direction of expansion (▼ → ▲, ⊕ → ⊖).
✅ Make icons large enough to avoid mistaps (min 44×44px).
✅ Keep them at exactly the same spot before/after expansion.
🚫 Users often don’t expect right arrow (→) to open a new page.

🚫 Don’t use split buttons for navigation menus.
🚫 Don’t scroll content inside of an individual panel.
🚫 Don’t scroll users automatically upon expansion.
🚫 Don’t keep the state of accordions on page refresh.

Accordion is a reliable workhorse of every UI. But it also has its downsides. Accordions hide content from users. Users want to see many sections open at once, yet with large and nested accordions, they often get lost and refresh the page. So it’s best to default to closed state for all sections, especially on mobile.

And: thoroughly test your accordions. Underlines indicate links, but not expansion. Arrows ↓↑ are perceived as scrolling or sorting. Plus ⊕ is the most ambiguous icon, meaning everything from increasing count to adding to cart. You might be surprised just how poorly seemingly obvious design works.

And when in doubt, use a downward-facing caret icon — it’s the safest bet.

Useful resources:

Accordion Icons (Study), by Page Laubheimer, Raluca Budiu
https://lnkd.in/d8fCpTz9

Designing The Perfect Accordion, by yours truly Vitaly Friedman
https://lnkd.in/eyRfgq5C

Testing Accordion Menu Designs & Iconography, by Viget
https://lnkd.in/eKvphZDh

Accordion Guidelines, by Tess Gadd
https://lnkd.in/e5M2VbHd

Design Better Accordions, by Andrew Coyle
https://lnkd.in/epqEEmax

How To Build An Accessible Accordion, by Heydon Pickering
https://lnkd.in/epvZHSVK

Always Collapse Accordion Steps Into Summaries, by Edward Scott
https://lnkd.in/eu_Q5PDA

Accordions in Design Systems
All: https://lnkd.in/emXxf8Y4
BBC: https://lnkd.in/eZdg99aW
Carbon: https://lnkd.in/g-eiwMb3
City of Helsinki: https://lnkd.in/eTJk_HAt
City of Ontario: https://lnkd.in/efuF3BFx
Goldman Sachs: https://lnkd.in/g_Cxnayz
Gov.uk: https://lnkd.in/gSgA76N3
NHS: https://lnkd.in/ex5mdtWR

Not all accordions have to look as displayed on the image, of course. We can safely place icons both on the left and on the right. However, with icons on the right, users tap/click more on the icon, not the label, so it’s best to keep them large.

Avoid nested accordions if you can, but if you must, use indentation. And consider alternative designs as well: e.g. a zick-zack pattern for a large vertical expansion as it’s done on Ruter journey planner from Norway (https://ruter.no/en/journey-planner/).

Vitaly Friedman on LinkedIn

WCAG 2.2

Source (and link to download): Intopia launches WCAG 2.2 Map

Inclusive design

Lenses

• Why we make
• Who uses it
• How it’s made
• Who makes it
• What we make

Focus

• Who faces the greatest degree of exclusion?
• Who might have the most to lose?
• Whose voice is missing?

Principle

Learn from diversity

From Kat Holmes: Mismatch – How Inclusion Shapes Design

Easy read

Easy read means:

• wide margins
• images on the left
• larger text (14 to 16pt)
• bigger spaces between lines (1.5 spacing in a word processor for example)
• 1 idea per image

Because of this format, easy reads are almost always PDFs.

Easy read is hard to get right (GDS)

High contrast

However, the contrast can be too high in some cases. People with dyslexia have shown to be able to read faster when color pairs have lower contrasts, plus high contrast is known to hurt people with photosensitivity & chronic pain (I can attest to that myself as someone who is suffering from a combination of photosensitivity and migraines).

Twitter’s new font and Last of Us 2: an accessibility lesson to be learned

7 principles of universal design

https://www.bitovi.com/blog/embrace-7-principles-of-universal-design-for-better-website-design

1. Equitable Use
• “The design is useful and marketable to people with diverse abilities.” For example:
• High Contrast: Having high contrast helps both users with weak vision, and users simply standing in the sunlight.
• Alt Texts: Screen readers need alt texts, of course, but they also help users on slow or unstable connections, and act as a fallback if the image path is broken.
• Mouse-Only Interactions: Hiding information behind a mouse-only interaction (like hover or double-click) makes it impossible to access for many users. Devices without pointers are in the majority, which changes the interaction ‘abilities’ of your users regardless of their personal physical state.
2. Flexibility in Use
• “The design accommodates a wide range of individual preferences and abilities.” For example:
• Scroll-Jacking: The arguments against scroll-jacking are often in line with this principle. If you take away the user’s ability to navigate your website at their own speed, they may not have time to take everything in. This can get frustrating, causing them to leave.
• Text Resizing: Allow for the sizing up and down of text in your layouts. A simple browser or OS text adjustment shouldn’t ruin your beautifully crafted application.
3. Simple and Intuitive Use
• “Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.”
4. Perceptible Information
• “The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.” For example:
• Information Organization: Besides having adequate text contrast and sizing, breaking your information down into easily digestible pieces will make your content more accessible. Specifically, things like using subheadings in a long text post will make speed reading and skimming more effective.
• Graphics: A graphic to emphasize a point you’re making in text helps more visual users (and can convince a skimmer to slow down and read more closely).
• Charts and Graphs: Supplying both graph and table views of data allows users not only the flexibility to choose how to get information (#2 Flexibility in Use), but also can help make patterns in the data more discernible. Who doesn’t want that?
5. Tolerance for Error
• “The design minimizes hazards and the adverse consequences of accidental or unintended actions.” For example:
• Avoiding Accidents: Account for these inevitabilities by putting permanent functions inside menus and/or behind “are you sure?” confirmation prompts. This makes them harder (practically impossible) to accidentally execute.
• Allow for Undo: An alternative to prompting users all the time is to give them an “undo” option, or a way to dig into archives to retrieve old items.
6. Low Physical Effort
• “The design can be used efficiently and comfortably and with a minimum of fatigue.” For example:
• Action Grouping: Group actions together in specific areas of the screen. This minimizes the amount of mouse dragging or thumb stretching needed, which is helpful for anyone. It is especially helpful for users with either very large screens, or for users who have super-zoomed into their operating system and have to scroll through interfaces that would normally fit on a “default” screen.
• Minimize Requests: Don’t require users to fill out lengthy forms or jump through multiple ‘hoops’ to gain access to their goal (account creation, a trial period of your application, a sample of a new book etc.). The less effort you require, the more involvement you’ll get.
7. Size and Space for Approach and Use
• “Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.” For example:
• Action Targets: Take into account varying hand size and dexterity, especially for one-handed mobile device use. Make action targets large enough to click or tap easily, and put your primary actions within easy reach.
• Posture: Some users are walking down the street, laying in bed, or doing other things that may make their reach a challenge. We can’t assume all users are sitting in a chair, at a desk, with a keyboard and mouse.
• Dynamic Spaces: Virtual keyboards (and other accessibility tools) cover part of the screen. Keep dynamic space usage in mind through all states of onscreen keyboards, dropdown menus, etc. to avoid causing the user to block their own actions forward.