components
Input Search
v.1.0.0 | SaturnAccessibility is a crucial consideration when designing and developing components, as it ensures that all users, regardless of their abilities or limitations, can interact effectively with your project. In this section, we will explore how our inputSearch has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.
The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Text
They needs a visible text labels that clearly indicate their purpose. Helper texts and error messages must clearly indicate the information. In error messages, when possible, include information about how to correct them.
Icon
- Error icon needs an accessible text label, such as "Error". The icon will be indicated as decorative when the message itself indicates to the user that it is an error message.
- Glass icon and ther decorative icons should be hidden for screen reader users.
Screenreader and Keyboard interactions
To support screen reader users, this component should include WAI ARIA attributes (the alt and aria specific props) to have a correct semantic markup. Screen reader and keyboard users should be able to operate with all the interactive elements.
The fields that are disabled must be indicated by programming. These disabled fields do not receive keyboard or screen reader focus. When an input has an error and/or help text, it is necessary to associate these texts to the input so that the screen reader user is informed. If there is an error in the inputSearch, this error information has to be announced to screen reader users.
Required fields identified with an asterisk may not always being announce for screen reader users. Use semantic markup in order to screen readers could identify required fields.
Search field
The field should act as a button that opens a modal. Some behaviours have to be followed to gurantee total accessibility:
- The field must be labelled as a button.
- The screen reader should be informed that the search field opens in a modal.
- Once the modal is displayed, the keyboard or screen reader focus must be positioned over the search field.
- The user of the screen reader must be informed that the search field has an autocomplete option. Also communicate the selected options.
- If the user selects an option, the modal should be closed and the focus should return to the search button.
Autocomplete
If the search engine has autocomplete, the navigation with the keyboard focus should be the following:
- When the input receives the keyboard focus, the autocompletion options should be automatically displayed.
- To access and move through the different autocompletion options, use the up and down arrows.
- The value of the search input changes based on the focused option in the autocomplete dropdown.
- If a vertical scroll appears in the dropdown options, the dropdown should move depending on the focused option.
- If you want to exit the autocompletion options dropdown, you must press the ESC key. The focus will once again be positioned on top of the input search.
- To select an option, press the "Enter" key. The autocomplete options dropdown will close, the input will be completed with the selected option, and the focus will return to the input search.
- If the keyboard focus is over the input or any dropdown option and the "TAB" key is pressed, the keyboard focus should move to the next interaction element on the page.
- Once a term has been entered or selected with the keyboard focus positioned on the input search, pressing the "Enter" key will perform the search.
- Once a term has been entered or selected with the keyboard focus positioned on the input search, if the "tab" key is pressed the keyboard focus would be positioned on top of the magnifying glass icon labeled as a button. To start the search the user must press the "Enter" key on the search button.
Visual design
Color contrast
- For text labels in links needs a color contrast of at least 4'5:1 for regular text and 3:1 for large scale (18pt) or bold text (14pt).
- For the rest of elements and the focus indicator at least of 3:1 color contrast ratio is needed.
Target Size
The area for clicking and tapping buttons must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.
Related components
Check other components specific accesibility recommendations:
