Design

Guidance for people wanting to create an inclusive web space for everyone.

User Experience

• expand_more Headings

  Blind users rely heavily on clear, properly structured headings to understand and navigate content (via a screen reader). The heading structure provides an outline so blind users can quickly understand the organization and contents of the page.

  Best practices

  • Accurately describe content with succinct headings

  • Indicate heading levels; avoid skipping a level

  • Use only one H1 per page

  

  Annotate headings in wireframes, and use only one H1 per page, which is typically the page title.

• expand_more Accordion inactive

  Accordion text example

  • item 1
  • item 2
  • item 3

Visual

• expand_more Headings

  Blind users rely heavily on clear, properly structured headings to understand and navigate content (via a screen reader). The heading structure provides an outline so blind users can quickly understand the organization and contents of the page.

  Best practices

  • Accurately describe content with succinct headings

  • Indicate heading levels; avoid skipping a level

  • Use only one H1 per page

  

  Annotate headings in wireframes, and use only one H1 per page, which is typically the page title.

• expand_more Accordion inactive

  Accordion text example

  • item 1
  • item 2
  • item 3