7. Page Layout

7.1 Associate labels explicitly with their controls

Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.

Guide to this standard

Use the HTML LABEL tag to explicitly associate.

Every descriptive label should be tagged as <label> and associated with the name of the field. The “for” attribute of the label tag is used by modern screen readers to identify a field reached by tabbing. Without this, tabbing between fields is completely disorienting.

The label should immediately precede the control in code. Screen readers read left to right. This will make it easy to read the form, and make sense of it with a screen reader - as stated from Irish National Disability Authority:

http://accessit.nda.ie/it-accessibility-guidelines/web/guidelines/priority-3/3-11

This standard covers the W3C WAI checkpoints 10.2 (http://www.w3.org/TR/WCAG10-TECHS/#tech-unassociated-labels) and 12.4 (http://www.w3.org/TR/WCAG10-TECHS/#tech-associate-labels) for NZ government agencies.

Rationale for this standard

Poor label and control layout is potentially ambiguous to all users. Likewise, with assistive technologies such as screen readers, and more so for users with visual impairment.

W3C gives a good example (Example 3) of potential ambiguity for users (and for screen readers) with a poor label/control layout

http://www.w3.org/WAI/wcag-curric/sam78-0.htm

7.2 Create a logical tab order through links

Create a logical tab order through links, form controls, and objects.

Guide to this standard

Refer to the definition of tab order in the Glossary of Key Concepts.

Tabbing through form controls is possibly the most common navigation method for web site users, so it is important to ensure the tab order follows the visual placement of controls on a web page. For NZ Government agency web sites, the logical order is left to right, top to bottom.

This standard covers the W3C WAI checkpoint 9.4 (http://www.w3.org/TR/WCAG10-TECHS/#tech-tab-order) for NZ government agencies.

Rationale for this standard

Not all users utilise a mouse or other “pointing” device for navigational purposes and rely on “tabbing” (usually via the “TAB” key) to move the cursor. The tab order is expected to follow the structural order of the web page elements. Not doing so gives a poor user experience from disorientation within the site, and can create confusion for assistive technologies such as screen and Braille readers.

7.3 Include non-link, printable characters between adjacent links

Include non-link, printable characters (surrounded by spaces) between adjacent links and also have a space between links.

Guide to this standard

The WAI Accessibility Guidelines recommend putting a printing character like a “ | ” between adjacent links.

This standard is necessary until user agents (including assistive technologies) render adjacent links distinctly.

This standard covers the W3C WAI checkpoint 10.5 (http://www.w3.org/TR/WCAG10-TECHS/#tech-divide-links) for NZ government agencies.

Rationale for this standard

Apart from being difficult to distinguish visually for users even with no visual impairment, some assistive technologies (generally older) have difficulty differentiating between hyperlinks when they have no visual (and correspondingly, textual) separation.

This can also help people with motor impairments.

7.4 Web pages are able to be printed in whole

Web pages are able to be printed in whole. Any page which requires landscape orientation to achieve this must be made clear to the user.

Rationale for this standard

A user can expect to capture any part of a web site in hard copy, without losing any information or significant layout from that experienced in the browser.