Invental/Review lessons/Accessibility and UI behaviour

2 lessons · 9 checks

Accessibility and UI behaviour

Accessibility bugs rarely show up in a demo with a mouse. They show up when someone tabs through the page, listens through a screen reader, or clicks what the menu said was available. Each lesson is one place where the interface promised something the code did not keep.

Major

The menu and the command must share one rule

If a UI shows a command as available, check it against the same rules the command will run with. Otherwise the menu offers actions that throw.

Read the lesson →
Major

A div posing as a button owns its keyboard

Replacing a <button> with a div to avoid nesting means you now own everything the button did for free: focus, Enter and Space, disabled state, and not swallowing events meant for the real buttons inside it.

Read the lesson →

The checks, with the lesson behind each

For each toggle in your editor or UI, does "is it on?" use the same code path as "turn it on", and is there a test that toggles twice?+
If a UI shows a command as available, check it against the same rules the command will run with. Otherwise the menu offers actions that throw.
Can a keyboard-only user remove a chip or tag in your UI without opening the menu it sits in?+
Replacing a <button> with a div to avoid nesting means you now own everything the button did for free: focus, Enter and Space, disabled state, and not swallowing events meant for the real buttons inside it.

More checks from the same reviews

Yes/no questions from other reviews on this theme. Each one is quick to answer for your own app.

  1. If a user has no name set, what does a screen reader announce for their avatar in your app?
  2. Does any of your menu items or dropdown triggers render a <button> inside another <button> or link?
  3. If you trigger two toasts within 100 ms, does a screen reader announce both?
  4. When a form field fails validation, does the cursor jump to it?
  5. In your search or command menu, does pressing Enter right after results load open the first result?
  6. On your clickable cards, hover over the title, the body text and any checkbox inside: does the whole card still highlight every time?
  7. If your app adds a query param (a modal, a panel, a tab) on top of the current page, does the navigation still show the right item as active?

Want a senior reviewer to run these checks on your code? Ongoing pull-request review capacity →

Want these checked on your code?

We run reviews like these on real codebases. Tell us what you are building and we confirm scope before anything starts.

— Get in touch
hi@invental.co ↗
— Or
— What to include

A link or short description of the code or system, what you want checked, your stack, and when you need the answer. No repository access is needed until scope is agreed.

— Or leave a note
We reply within one business day.