2.8 Break up large blocks of information where appropriate

Rationale

People are generally uncomfortable with reading large tracts of text on screen and tend to skim through content by scanning headings, subheadings, lists, etc. This is easier to do if the content has been broken down in to easily digestible chunks.

More complex elements, such as forms or other interactive features, are easier to comprehend and navigate if they are broken into logical sections. For example, an online form might be broken up into logical sections such as personal information, employment details, and so on.

Breaking content into small chunks helps everyone, including users who are in a hurry and need to find information quickly, such as call centre staff, users with reading difficulties, non-native speakers and users of screen readers. Grouping form elements, such as form fields and selection lists using correct HTML is very important for providing screen reader users with important contextual information which helps them to navigate through forms.Breaking complex forms into groups with correct HTML also makes error recovery a lot easier for users of screen readers as it simplifies the task of navigating back through a form to correct mistakes. It is important that groups of information are divided logically. Randomly created groups of elements will confuse users.

Directions and Techniques

Use section headings (H1 to H6) to create structured documents and break up long stretches of text

Section headings improve navigation through content and comprehension of content. See paragraph 1.2.1 "Section headings" in the WAI recommended techniques for grouping content items

Break up lines of text into paragraphs with the P element

Use the "P" element to define paragraphs in HTML.

Group related links

A navigation bar at the top of a web page is an example of grouping related links. Another example is a site map containing lists of links organised under site section headings. See paragraph 1.2.1 "Section headings" in the WAI recommended techniques for grouping links

Use UL, OL, and DL tags to nest list elements correctly

See the WAI recommended techniques for nesting lists

Use tables for tabular data and describe the table with CAPTION

Provide a caption for tables, using the CAPTION element. A table caption provides a short description of the table's contents, usually in one to three sentences. It could be considered as being similar to the title of a page. The "Caption" tag must be inserted immediately after the "Table" tag. You can specify only one caption per table. See the WAI recommended techniques for using tables for tabular data.

Group table rows and columns with THEAD, TBODY, TFOOT, and COLGROUP

These elements facilitate grouping of rows and columns in a table. This element is only valid inside the "Table" tag. It facilitates navigation and understanding by screen reader users and makes visually scanning, perceiving and printing information easier. See the WAI recommended techniques for grouping table rows and columns

Group form controls, elements and menu options into logical groups

HTML tags are available for grouping form elements and other interactive elements into logical groups. The resulting groupings are not always displayed in a standard browser, but they help ensure compatibility with assistive technologies. See the WAI recommended techniques for grouping form elements.

Use OPTGROUP to organize long lists of menu options into smaller groups

The OPTGROUP element can be used to group SELECT items (defined by OPTION) into a hierarchy. See the WAI recommended techniques for grouping menu options

How you could check for this:

There are no specific test methods recommended for this guideline.

- View WAI checkpoint 12.3