Google's Places Auto-Complete widget is extremely popular for finding addresses, but its default implementation is a simple input box that isn't accessible for people using screen-readers or other assistive devices. This leverages the Accessible autocomplete by the UK Government Digital Service and applies it to the Google Places API to make address selection accessible to all. The Accessible Autocomplete follows the WAI-ARIA best practices and is compatible with many assistive technologies.

Get a Google Places API key from Google.

Install it by running:

yarn add more-accessible-google-places-autocomplete

In your React application, you can import a bundle that will use it:

import React from 'react';
import ReactDom from 'react';
import AddressAutoComplete from 'more-accessible-google-places-autocomplete';

ReactDOM.render(
  <div>
    <label for="address_input">Enter your address</label>
    <AddressAutoComplete
      id="address_input"
      googleMapsApiKey="api-key-goes-here"
    />
  </div>,
  document.querySelector('#container')
);

MIT.