Use heading elements appropriately

Headings should be used to organize the structure of a page. When headings are correctly implemented users can find information easily and understand relationships between sections of the page.

Benefits of properly using headings:

  • Users navigating with screen readers can rely on an organized page structure.
  • Users with cognitive disabilities benefit from predictable sections of content.

To use heading elements properly:

  • Use only one h1 per page.
  • Use headings in a logical sequence.
  • Don’t skip heading levels.
  • Use simple and clear heading labels.


Design to enhance legibility

Text should be presented in a way that it can be perceived without its layout interfering with its readability.

Users with cognitive disabilities, or low vision can’t comprehend text if it’s difficult for them to read.

To ensure text is legible:

  • Use left-aligned text for left-to-right languages, and right-aligned text for right-to-left languages.
  • Keep the width of content to 80 characters maximum. Although, Odyssey typography recommends a maximum of 55 for our fonts.
  • Line height should be at least 1.5 times the font size.


Use simple and predictable organization

Users should be able to navigate sequentially through a page in the order that aligns with the intent of the page. This also allows navigation with a keyboard and other assistive devices.

To ensure the page is predictable:

  • Use single column layouts for linear content such as forms.
  • Place inline help in context of the section it’s referencing instead of in a separate column.
  • Place consistent UI elements across pages in the same relative order.
  • Use clear page regions such as header, footer, navigation, and main content so they can be identified by assistive technologies.


Account for fluid and responsive layouts

Users with low vision can use their browser's zoom feature to scale the content and make it easier to read. Scaling with zoom shouldn’t cause a loss of information or functionality.

To ensure content can be scaled:

  • Remove horizontal scrolling if unnecessary.
  • Ensure the layout works in both portrait and landscape orientations.