Search
How it works
The search Carbon component contains a collection of items and objects that, as a whole, combine to create search functionality to content on the website. WAI ARIA labels are used on each button so users of assistive technologies understand the purpose of the button.
Accessibility considerations
- Provide a search function to help users find content.
- If a page includes more than one search landmark, each search field should have a unique label.
- If you change any of the default labels, be sure the new label is clear and concise.
Resources
- W3C WAI-ARIA Landmarks Example covers the usage of ARIA landmarks on a search widget.
- IBM Accessibility Checklist Checkpoint:
- 1.3.1 Information and Relationships (WCAG Success Criteria 1.3.1)
- 3.3.2 Labels and Instructions(WCAG Success Criteria 3.3.2)
- 4.1.2 Name, Role, Value (WCAG Success Criteria 4.2.1)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations
- No violations
MacOS screen reader tests
Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Tab to the Search Custom Button component. VO announces, "Search edit text main".
- Enter text in the text field. VO announces each letter as its entered.
- Tab to the X button. VO announces, "Clear search input button."
- Press the Enter key and the text box is cleared.
- Tab back to the text box.
- Enter text in the text field. VO announces each letter as its entered.
- Tab to the X button and then Tab back. VO announces the previously entered text.
- Press Tab twice. VO announces the Search button.
- Press Tab again. VO announces the Filter button.
Windows screen reader tests
Environment
Results
- Microsoft Windows 10
- JAWS 19.1810.64
- Firefox version 67
- Carbon React version 7.7.1
- JAWS 19.1810.64
- Firefox version 67
- Carbon React version 7.7.1
JAWS test:
- Tab to the Search Custom Button component. JAWS announces, "Main region. Search edit type and text."
- Enter text in the text field. JAWS announces each letter as its entered.
- Tab to the X button. JAWS announces, "Clear search input button."
- Press the Enter key and the text box is cleared and focus moves back to the text field.
- Enter text in the text field. JAWS announces each letter as its entered.
- Tab to the X button and then Tab back. JAWS announces the previously entered text.
- Press Tab twice. JAWS announces the Search button.
- Press Tab again. JAWS announces the Filter button.
iOS Screen Reader Tests
Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
- Swipe Right to the Search Custom Button component. VO announces, "Search Search text field. Double tap to edit. Insertion point at end."
- Enter text in the text field. VO announces each letter as its entered.
- Swipe Right to the X button. VO announces, "Clear search input button."
- Double tap and the text box is cleared.
- Swipe Left to go back to the text box. Note: There is an open issue of iOS because focus moves to browser address bar.
- Navigate back to the Search input and enter text in the text field. VO announces each letter as its entered.
- Swipe Right twice. VO announces the Search button.
- Swipe Right again. VO announces the Filter button.