Skip to content
Switch branches/tags
Go to file
- [x] Update references in README
- [x] Update references in ``
- [x] Update references in src
- [x] Update references in test
- [x] Update references in examples
- [x] Update references in BEM CSS [Breaking]
- [x] Update references in package.json
- [x] Update references in webpack
- [x] Update references in app.json
- [x] Update references in CONTRIBUTING
- [x] Rebuild dist, remove old ones
1 contributor

Users who have contributed to this file

42 lines (31 sloc) 1.93 KB

Accessibility Acceptance Criteria

Authors: Theodor Vararu, Léonie Watson, Ed Horsford.

What's this?

This describes the necessary behaviours that an autocomplete needs to meet to be usable by assistive technologies.

They are useful if you are evaluating accessible-autocomplete, or a different autocomplete solution.

User story

As an Assistive Technology (AT) user, I want to be able to search using autocomplete, so I can find and choose a matching result easily and accurately.

Acceptance criteria

The field with autocomplete must:

  1. Be focusable with a keyboard
  2. Indicate when it has keyboard focus
  3. Inform the user that it is an editable field
  4. Inform the user if there is a pre-filled value
  5. Inform the user that autocomplete is available
  6. Explain how to use autocomplete
  7. Inform the user that content has been expanded
  8. Inform the user when there are matches, or if there are no matches
  9. (Optional) Inform the user how many matches are currently available
  10. Inform the user as the number of matches changes
  11. Enable the user to navigate the available matches using touch or keyboard
  12. Inform the user when a match is selected
  13. (Optional) Inform the user which number the currently selected match is (1 of 3 for example)
  14. Inform the user if a match is pre-selected
  15. Enable the user to confirm the selected match
  16. Inform the user when a match is confirmed
  17. Return focus to the editable field when a selected match is confirmed

Helpful definitions:

  • navigate: When the user selects between matches
  • selected: When one of the matches is highlighted, and ready to be confirmed, for example by pressing enter
  • pre-selected: When an item is selected on the user's behalf without them navigating to it
  • confirmed: When one of the matches has been confirmed, and will be submitted as a value of the parent form