SearchLanguageMobile menu

OGCIO

8.17 Level A − WCAG 2.0 Success Criterion 2.4.3 − Focus Order

When writing the HTML code for a webpage, make sure the content is coded in a logical order. It will then be communicated in a logical manner when read by screen readers. This is particularly important for web forms.

Before Rectification

A web form sample where the fields follow a horizontal order in its visual presentation, but are coded with a vertical sequence.

In this example, the form has been coded so that the focus order goes from First Name, to Address, to Phone, then to the Submit button. This is not intuitive to a user.

After Rectification

A web form sample where the visual presentation matches the coding sequence.

With proper coding, the focus order of the form can move in a much more logical manner.

Link to Live Example for 2.4.3

WCAG 2.0 Reference:

http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html