Exercise 21: Making an accessible autocomplete - start

List of all exercises

Our aims are:

  1. Add role="searchbox"
  2. Add aria-describedby="instructions"
  3. Add aria-owns="results"
  4. Add aria-expanded="false"
  5. Add aria-autocomplete="both"
  6. Add id="results"
  7. Add role="listbox"
  8. Add tabindex="-1"
  9. Add role="option"
  10. Add aria-selected="false"
  11. Add class="sr-only"
  12. Add aria-live="assertive"
  13. Add class="sr-only"

Example

When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.

List of all exercises