Page Structure

Headings

Headings are an prominent feature of your page, email or document. They allow your audience to find important information more quickly and allow screen-reading devices—for users with visual impairments—to understand page structure. Plus, headings are critical for search engine optimization, so using them correctly could help your website rank better in Google and other search engines.

Heading tags are used to create structure. They are not for emphasizing text or use because you like—or dislike—the way a heading looks. Each heading style is designated by a number. Larger numbers are subheadings of the previous number.

Look at your page or document structure as an outline. The title you give a page or document is Heading 1; this is the title of the outline. The first section of key information uses Heading 2. A subsection that supports the content under Heading 2 uses Heading 3. A second subsection that supports Heading 2 also uses heading 3. The example below illustrates this concept.

I. Title (Heading 1)

     A. Key Information (Heading 2)

          1. Supporting Information (Heading 3)

               a. Supporting Information Subsection (Heading 4)

          2. Supporting Information (Heading 3)

               a. Supporting Information Subsection (Heading 4)

     B. Key Information (Heading 2)

     C. Key Information (Heading 2)

Lists

Lists are a great way to provide information in a manner that attracts attention supports how we typically read web content. If used correctly, lists can serve as an equally useful tool for people using screen readers. If you’re using a Content Management System (CMS) like Drupal or building a page in HTML, you can create lists that allow screen readers to tell their users all the necessary information.

To apply lists in a CMS, select the bulleted or numbered list option. If you manually type in the number in text editor, it will not be recognized as a list and will be less accessible to those with visual impairments.

Find out more about web writing best practices.

Tables

Tables are useful for displaying a set of data that can be easily scanned and compared. However, the typical method of scanning and comparing relies on visual cues that can make tables inaccessible.

To ensure that screen readers are capable of relaying the relevant information to the user, you should provide proper markup in HTML.

Find out more about HTML markup for tables.

Accessible Rich Internet Applications (ARIA) Landmarks

ARIA landmarks allow assistive devices to access and move to specific sections of a page. Landmarks are defined and inserted into a page, marking the sections and telling the assistive device where to look for the banner, navigation, forms, main content, search, web applications and all other elements of a page.

Find out more about ARIA landmarks.