Venturing into Unmapped ARIAs

⬅️ who is this person?

What does the map look like?

screenshot of the ARIA spec heading and first half page

screenshot of the top half of the resources page of a11yproject.com

screenshot of the title on the home page of the Inclusive Components site

Specs

Blogs, websites

Framework accessibility docs

screenshot of the material UI accessibility docs for its data grid, claiming complete accessibility support

screenshot of the Fluent best practices for its peoplepicker combobox component, showing advice for mobile accessibility and truncation

screenshot of the accessibility section of Adobe's React ARIA package, showing generic intro to accessibility text

Compare sources

screenshot of the ARIA Practices example of using a menubar role for site navigation, showing a warning about using menubar for site navigation

screenshot of Adrian Roselli's blog, showing the article titled Don't Use ARIA Menu Roles for Site Nav

Well-mapped components

Comboboxes

Tables

screenshot of my blog, showing a post titled to Grid or not to Grid

screenshot of the ARIA Practices example of a sortable table

screenshot of Adrian Roselli's website showing multiple search results for the word table

Form errors

article from WebAim titled usable and accessible form validation and error recovery

article titled Error message guidelines from the Nielson Norman Group

The outer wilds

a combobox where the trigger is select-only, and the dropdown is expanded to show a text input within it, above the other options

Where components look familiar, but with a twist

example of a selectable grid labelled Files, showing one file selected, and the second file name currently being edited within the cell

the same combobox from the previous slide, with a text input inside the dropdown

a treeview where each item has an edit and delete button next to the tree item text, with the heading tree with buttons inside treeitems

Planning your expedition

Examine existing maps
Prior art from further afield
Interpret your sources, consider context
What information is missing?

Find everything you can that resembles what you want to make, even if it isn't exactly the same
Remember that all existing maps are made by someone trying to solve a specific problem. It may not be the same problem you're trying to solve now. Consider where the similarities and differences lie.
Make an actual itemized list of what you need to know but can't find
Look at native desktop and mobile UX patterns to supplement web sources. Or literally any reference for how people interact with similar interfaces, even physical things if you get creative. (radio buttons came from literal radios, after all, and design systems use physical "elevation" as reference. You can look at how people touch and move things in the real world to understand what is intuitive in a touch UI)

File selection

Step 1: inspect our maps

screenshot of the ARIA spec for the grid role

Step 2: Prior art

screenshot of macOS finder, showing the table view for files for this presentation repository

screenshot of Windows File Explorer, showing the table view for the same files for this presentation repository

screenshot of the recent files section of the MS Word home screen, showing three sample files with one column for file name and a second column for date modified

Evaluating Prior Art

web is not desktop, and desktop is not web

Windows: lists have... columns?

Finder: lists also have columns

Step 3: weigh sources

screenshot of a files grid with a file selected, sitting over a drawing of a kitchen scale

Step 4: what's missing?

Focus target: checkbox, cell, or row?
Checkbox name
Checkbox columnheader name

Circle back on design

Grid

✅ exposes columns
❌ navigate through all cells separately
❌ not a selection-focused pattern

Listbox

❌ no columns, all one string
✅ selection control
✅ linear focus, similar to other file lists

Checking assumptions

🔲 Navigate by cell, not row
🔲 Put focus on the cell, but include a checkbox
🔲 Selection does not follow focus

The studies

Round 1:

screenshot of a grid with the first row checked, and the entire third row focused

Round 2:

screenshot of a similar grid with the first row checked, checkboxes in the first column, and the third checkbox in the first column focused

Participant ATs:

Round 1:

VoiceOver (2 people)
JAWS (2 people)
NVDA (2 people)
Narrator
Narrator + Refreshable Braille
ZoomText at 12x
Magnifier at 200%
Smartbox Grid 3 Switch
Dragon Professional

Round 2:

JAWS
JAWS + switch for typing
NVDA (2 people)
Narrator
No AT, but 2 users had a mobility impairment
Adesso ergonomic keyboard
Switch
Dragon Professional

Takeaways

✅ Navigate by cell, not row
✅ Put focus on the cell, but include a checkbox
✅ Selection does not follow focus

Takeaways: oops I didn't think of that

Validation and confirmation messages are necessary
Details matter: pay extra attention to naming
Needing to switch screen reader modes can build up annoyance
Bugs with virtual cursor table nav will make people abandon the task
Double scrollbars when searching for info can be a huge burden

Death by 1000 Cats Cuts

clowder of black cats hissing at eachother at night

Efficiency vs. Discoverability

How many hours do users spend on this UI at a time?
How many days per week to users visit?
How tech-savvy are they?

(a shallow learning curve is almost always more important than you think)

The cursèd ARIAs

BEWARE:

is this place cursed because no users return?

A brief example

a flowchart that shames you for thinking you have time. Start with a decision to take on a new project. Ask if you have time to do this. If no, don't do it. If you said yes, no you don't.

Step 1: start small

sketchy illustration of a single node in a flowchart

Begin with one basic interaction, and define it

Step 2: break down keyboard navigation

Sketchy illustration of a flowchart with three levels of nodes labelled A, B, and C

How do you get from node A to node C?

Is the keyboard model similar to any existing patterns?

stylized simple icons of a tree, a treegrid, and a listbox

Step 3: zoom out

a text input with a filter icon and placeholder text that says filter

Search, find in page, filter

Focus on the basics

Labels, headings, page structure, user feedback

Changing the map

screenshot of the VS Code editor tab UI showing close buttons on file tabs

a single file list item UI, showing the file name with share, favorite, and more options buttons

a group call interface showing a single participant with mute and more actions buttons next to their name

Is this button inside the tab? Next to it? Tab-accessible?

screenshot of a single VS Code file tab for index.html with a close button next to the file name

screenshot of a github issue on the ARIA repository for secondary actions on composite issue roles, #1440