Skip to main content

Secondary navigation:

Using Structurally Correct HTML Elements

creating an easily scannable page

Using Headings

  • Use section heads in correct order: h3, then h4, then h5. Using headings this way gives a web page a machine-readable structure that reveals the topics discussed on a page and how they are hierarchically related to one other. Properly used Section Heads enable a visually impaired user to quickly "scan" a page for specific content or relevant topics much like a sighted person would. The Section Head options are available in the "Format" drop down menu in the BC Text Component and the BC Text Image Component. Please reference images below for specific usage examples.
  • Avoid misrepresenting the page structure by using headings out of place/order. This is extremely valuable when done correctly as  it makes the page easily navigatable by mark major sections.
  • Avoid misusing structural markup for formatting effects, such as using headings to change appearance of text; keep the page in a logical order and avoid using headings to achieve a visual style.

Screen shot of Section Heading drop down menu in CQ Text Component
Screen shot of Section Head examples in CQ Text Component

Using Lists

  • Use lists to identify a series of related items. Screen readers identify the number and type of items in a list and enable users to easily skip all or part of the list if desired.
  • Avoid using numbers and text to organize lists of information.
  • Lists options are located in top menu of Text and Text Image components. (see below)
Screen shot of list options in Text and Text Image component