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

Web Accessibility Lesson 4

By makzan

Web Accessibility Lesson 4

  • 417