Skip to main content

Content Structure

Well-structured content is not only essential for people with disabilities, it ensures that information is easy to process and navigate for every user. Structure your designs and copy with semantic HTML in mind, in order to provide screen readers and other assistive technologies with meaningful information.

Content Structure Considerations

Accessible Content

Can users access your site’s content with a screen reader?
  • Use HTML5 elements to define the structure of your document and the hierarchy of content within it
    • For efficiency and ease of internal communication, your designs and copy documents should follow semantic HTML structure
  • Always publish your content in HTML documents
    • Non-native formats like PDF, Word, etc. require additional steps to make them accessible to screen readers. We strongly discourage using these formats without also providing equivalent content in native HTML text and graphics

Easy Navigation

Can users navigate your site with their keyboard or assistive technology?
  • Navigation menus should be separate from the content of your page using <nav> tags and formatted as list items using <li>
  • Create a clear heading structure (<h1> to <h6>) to denote each section and subsection of the page
  • All links (<a>) should clearly describe the content to which they point and distinguish themselves from other links on the page

Clarity & Purpose

Can users quickly understand page information and purpose?
  • Each page should provide a clear and descriptive page title <title> and heading <h1>
  • Focus the content of each page on a specific topic
  • Landing and category pages may require a summary of other pages found within
  • Users should be able to easily understand and complete key tasks

Touch Targets

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least 44px.

There are a couple ways you can accomplish a large target size.

You can expand the size of the entire button so that it’s at least 44px wide in one direction. You can also make the button smaller but keep the target size large by using a link area or increasing the padding around the button.

Measurements of buttons showing touch area must be at least 44 pixels

Adequate space should surround system icons to allow legibility and touch.

Measurements of icons showing touch area must be at least 44px