Postcoder address autocomplete gets screen reader support

It's now even easier for people using screen readers to find and select an address using Postcoder.

Postcoder address autocomplete helps people complete forms quickly by suggesting addresses as they type. But for someone using a screen reader, those suggestions need to be communicated clearly - along with what's happening when they navigate the list or select an address.

We've made a set of accessibility improvements to the integrator-js library, which many customers use to add address autocomplete to their forms and websites.

What's changed?

The integration now provides more information to screen readers about the address search field and its suggestions. This helps people understand when suggestions are available and which one is currently highlighted.

When someone first enters the search field, they hear guidance on how to use it:

"Start typing, then use the up and down arrow keys to browse suggestions and press Enter to select. Press Escape to close suggestions."

As suggestions load, a status message announces how many are available:

"4 address suggestions available."

As the user browses the list, the screen reader reads out the highlighted suggestion. For example:

"123 Foxglove Lane, Biddenden, Ashford, Kent, TN27 8BT."

After they select an address, a further announcement confirms what's happened:

"Address selected. Address fields have been filled."

Status messages also let people know when no addresses have been found. The exact announcements can vary depending on the screen reader being used.

Built with existing forms in mind

Customers may have already added accessibility information to their forms. The updated integration preserves existing accessibility attributes on the address search field and adds the information it needs alongside them.

The changes follow the W3C combobox pattern, which provides guidance for accessible inputs with a list of suggestions.

We've tested the integration with NVDA, TalkBack and VoiceOver. Screen readers don't always announce updates in the same way, so we'll continue to review the experience as we improve the integration.

Getting the update

If you're using the integrator with v2 in your CDN URL, the update will be picked up automatically.

<script src="https://cdn.jsdelivr.net/gh/postcoder-api/integrator-js@v2/build/integrator.min.js"></script>

If you've pinned your integration to a specific minor version, you'll need to update the version in your URL to benefit from the changes.

For help adding address autocomplete to your form, see our integration guide. If you have any questions or feedback, the Postcoder support team is always happy to help - just get in touch.