Good Document Structure Via Headings

When you go about writing a document, you quite naturally break it into sections and subsections, with a heading identifying each. You do this without thinking because it makes it much easier to take in the content, organise it, find specific pieces of information etc. Whenever you’re working on a webpage, adopting the same technique and thought process results in a well-structured, clear, accessible document.

As a quite aside on accessibility, this aids in a couple of ways that I know about directly (probably others I’m not aware of). I spent some time using Jaws a while back, and there were two main techniques I ended up using to try and navigate a document. One was the headings dialog – this brings up a list of the headings on the page, and reads each. You can then click to go directly to one of them. The other technique was hitting the ‘H’ key to skip between headings on a page. In a well structured document this made it extremely easy to skip over sections that weren’t of interest.

It’s a good idea to define each new section of your page with a heading, even if visually you don’t want to display it. Often when content is rendered, there are many visual cues that give you a good idea of what something is without an explicit heading. If you identify the headings added to aid document structure with a class name, you can style these to be hidden when the visual design is applied. Note that styling with display: none will mean that headings are also hidden to screenreaders. Instead, use absolute positioning to position the elements to the side of the visible page. These will still be treated as valid content to readers, but will effectively be hidden to everyone with CSS applied.

If you fail to identify a new section with a heading, it’s content will appear to sit in the section defined by the previous heading – think about a word document. If you have a section defined by a heading, and you start a new paragraph that isn’t related, it still appears to be within the same section.

To get a feel for how good a job you’ve done, briefly disable CSS (Ctrl-shift S in Firefox web developer toolbar). If the document makes sense without CSS applied and is simple to take in, chances are you’ve built a well-structured, accessible document.