Headings & Structure

• Headings
• Lists

Semantic Structure

Success Criteria for Headings, Lists, and Structure

• 1.3.1 Information and Relationships (A)
• 1.3.2. Meaningful Sequence (A)
• 2.4.6. Describe Headings and Labels (AA)

Using appropriate semantic elements gives our documents and web content a cleaner and more consistent visual appearance. Semantic elements also provide the necessary structure for assistive technologies like screen readers to meaningfully parse and read page content.

Designing digital information with semantic elements is easy. Virtually every content authoring tool we use includes a graphical toolbar (WYSIWYG) for formatting headings, lists, hyperlinks, tables, and other semantic elements. Apply these structural elements whenever possible.

Techniques for Semantic Structure

• Using semantic elements to mark up structure
• Ordering the content in a meaningful sequence

Headings

Headings create hierarchical structure in web pages and documents. Heading levels include h1, h2, h3, h4, and sometimes h5 and h6. Headings “chunk” content into sections based on importance. Avoid skipping heading levels like jumping from h1 to h3 without an h2.

All heading levels can contain all types of content including paragraphs of text, hyperlinks, lists, images, embedded videos, tables, etc. Headings improve access for people with disabilities, but they also improve readability for everyone.

Techniques for Headings

• Using h1-h6 to identify headings
• Organizing a page using headings
• Providing heading elements at the beginning of each section of content
• Providing descriptive headings

Lists

Use list styles to format lists of information. Like headings, lists create semantic structure that improves readability for everyone and navigation for assistive technology.

• Unordered Lists
  If the list has no particular order or sequence, then use a bulleted list.
  
• Ordered Lists
  If the list does have an order or sequence, then use a numbered list.

Techniques for Lists

• Using ol, ul and dl for lists or groups of links

Resources

• Headings and Semantic Structure
• Headings and Page Structure
• Lists and Content Structure
• Headings for Screen Readers Demo
• Semantic Structure: Regions, Headings, and Lists