Inputs and keyboard control
Web Accessibility Lesson 4
4.1 Tab index
4.2 aria-alert
4.1 Configuring focus order with tabindex
4.2 Error notice
4.3 Confirming the form submissions
<details> example
Skip to Content
Example
Tab index
When to use tab index?
- We don’t need to set tab index by default.
- When the default tab order is not ideal.
- AND when we cannot change the tab order by re-arranging items order in HTML.
No change of context
on focus and on input
Dropdown menu example
Mega menu example
Exercise
Can you implement a navigation with dropdown menu?
aria-alert
Showing useful errors
Even better form errors handling:
Provide context-sensitive help (AAA)
Confirmation before form submit
3.3.4 Error Prevention (Legal, Financial, Data)
Dialog example
Exercise
Try to use different gallery. See if you can nevigate the gallery by keyboard.
And if the photo caption works.
Exercise
Try to find a dialog and see if you can correctly focus on the close button. Or if it is keyboard trapped.
How about tabs?
It is complicated.
Bootstrap’s tab
