Today I Learned - Rocky Kev

TIL using live regions for autocomplete accessibility

POSTED ON:

TAGS: accessibility javascript autocomplete

Every time a user types on the input box, the state of the page changes: the results from autocomplete are updated and presented to your user.

What's the problem:

However, the screen reader does not recognise this as an action to tell the user about. It will announce the header ("Capital Search") and the input box when they gain focus, but not the search results.

The solution is to use "Live Regions".

tl;dr - you have JS update a hidden div, that speaks out the event.

<div role="region" aria-live="polite">0 results found</div>

See the Pen Dev.to: Autocomplete - accessible by Savvas Stephanides (@SavvStudio) on CodePen.

via Savvas Stephanides's The problem with autocomplete and how to fix it

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.