Structure

Step 1: Understand your goals

1. Headings 
   1. All pages have one unique <h1> heading that is the main title/topic of the page.
   2. Headings <h2> to <h4> are only used for text that precedes and describes or categorizes a set of content. CTAs and quotes are not headings.
   3. Headings styles are consistent.
2. Languages - Any text on a page that’s in a different language uses the <lang> attribute for that span of text.
3. Lists - Semantics lists use <ul> or <ol> with <li> for a series of related content.
4. Bypass blocks of content - Pages have a way to bypass large blocks of interactive content (such as the main menu) that appear within the first 4 tabs into the site. Examples include 'Skip to Main' and ‘Skip to Chat.’

Structure accessibility resources

Page Structure Tutorial on w3.org

Step 2: Watch the video

Readers and screen readers both need to know how content on a page relates to each other. They rely on the structure of your layout to navigate through it.

Users who tab through a page will hear how it’s organized. Will it make sense to them? Does this piece of content stand alone or does it help explain another piece of content? Should a subhead be an H2, H3, or H4? Is that piece of content truly a list or did the designer just lay it out that way for visual appeal? 

Use the tips in this section to check the structure of any page.

Step 3: Practice your new skill

Basic tests

• Use the ‘structure’ module in ANDI to review the headings on the page to verify:
  • There is one, and only one, <h1> on the page
  • Each heading describes the content beneath it
  • Lower-numbered headings are not nested inside of higher-numbered headings (for example, an <h2> inside an <h4>)
  • Heading styles are consistent on the page and thru the site (for example, H2s looks the same on every page)

• Use the ‘structures’ module in ANDI to identify lists. Check to see that:
  • Lists reported in ANDI are correctly identified
  • There are no errors for lists in the ‘list elements’ section

• Verify lists are correctly marked up.
• Use the keyboard to tab into the page from the very top. Make sure there is a way to ‘skip to content’, bypassing large navigation menus.
• If there is a chatbot on the page, make sure there is a ‘skip to chat’ link as you tab into the page.

Advanced test

Look for non-English content. For example, if there is some text in Spanish, view the HTML and search for ‘lang=”es"’ to verify it has a language tag.

Next lesson: Tables