Headers

Headers can be a vital tool for organizing and structuring the content on a page. We see headings all over web pages and we can understand how headers help to create visual organization. The same is true for cognitive organization for users of assistive technology. Two common mistakes that are made with headers are simply styling text with things like bold and larger text size to give the desired look rather than using proper code and to use the header code out of order because it is being used once again, just for styling purposes. The goal is to use headers appropriately rather than create them with styling in mind.

Using Headers Correctly

Headers should not be used for styling effect and they should be used in the proper order. This means that if you have a main topic listed as an h2, then any sub topics to that section should follow sequentially as an h3 and so on down to h6. You should not skip h3 and use h4 for the sub topic simply because it styles the text in a way you find to be more appropriate. Going from a h2 to a h4 will cause a user of assistive technology to wander what information they are missing because they do not have access to the content under heading 2 when in reality, there is no h2 or content for it. Once we have coded headers properly, we can go back to the CSS and visually style each of them as we please. Using things like bold and a larger text size effectively will make a web page one big continuous string of content. This method would not allow the visual headings to translate into audible headings.

Headers For Content Structure

Another important thing to do for accessibility reasons is to think as the whole page as a container of all information including content, navigation, and all other elements. When coding a page using headings, there is only supposed to be one h1 tag for a page that everything else falls under. What this means for the way you use headers, is that the top level header tag (h1) should always be used for the page title, and everything else on the page would fall under that header. This means that each page should only have one h1 tag. A good example of this would be to take this course into consideration. This page falls under the ACC 100: Accessible Course Design hierarchy. So the headings on this page would be shown as follows:

• ACC 100: Accessible Course Design (h1)
  • Left Navigation (h2)
    • Instructor Tools (h3)
    • Authoring Tools (h3)
    • Staff Tools (h3)
  • Content Area Title: Structure and Styles (h2)
    • Main Topic 1: Headers (h3)
      • Sub Topic 1.1: Using Headers Correctly (h4)
      • Sub Topic 1.2: Headers For Content Structure (h4)
    • Main Topic 2: Non Existent (h3)
      • Sub Topic 2.1: Non Existant (h4)
      • Sub Topic 2.2: Non Existant (h4)

For designers, what this means is that any headings they use, they will need to start with a h3 tag because the h1 and h2 tags are used by the course template as a container to the content that the design teams create.