Inclusive Design Tip : Element order

A cognitive tip

Why do it

People with cognitive disabilities need clear and consistent presentation of information.

What to do

  • Disable stylesheets (CSS) so that you just see the content (the HTML) on your site.
    • Chrome: install the Web Developer extension. Select CSS > Disable All Styles.
    • Firefox: View menu > Page Style > No Style.
    • Safari: Enable the Develop menu: Preferences > Advanced > check “Show Develop menu in menu bar”. Then Develop menu > Disable Styles.
    • IE / Edge: Page > Style > No Styles.

Things to check

  • Is the order of elements different with and without your styles?
  • Is the content and the navigation clear and consistent?

Things you could change

  • Change the order of your content for a clearer, more consistent reading experience and flow: use a linear, logical order.
  • Update styles so that they don’t make the visual order very different from the content order.
  • Use headers (h1 to h6 elements). People use them like a table of contents for the page.