Accessibility Tip: Header Tags

As good information practitioners, we all know to put “alt” tags on our images and make our text legible for users with disabilities. But one aspect of accessibility often overlooked by the producers of web content is the structure of individual webpages. We’re more concerned with the alignment of a paragraph under a title than we are the association of that paragraph to the title. We create long blocks of text separated into flat paragraphs, without marking where one section ends and another begins. If we do use header tags to mark pages and sections, we think of them as style elements: they make certain text bigger and more visible. But header tags are not merely decorative: they are an essential element that denote the organization and meaning of the content on your webpages to screen readers.

If you use font styles or sizes to mark your section headers, this is what the page looks like to a sighted user:

Page Title

Section 1
Text text text text text.

Section 2
Text text text text text.

It seems nice and hierarchical, with a clearly defined structure, doesn’t it? But this is how a screen reader processes it:

Page Title. Section 1. Text text text text text. Section 2. Text text text text text.

In order to find “Section 2,” the user has to wade through the rest of the page. Since all of the text has equal weight, they can’t use the handy features of their screen reader software to scan the page quickly for a sense of its structure and contents. However, if you mark up “Page Title” as header 1, “Section 1” as header 2, and “Section 2” as another header 2, users with screen readers could read the page the same way a sighted user would.

Beyond accessibility, proper structuring of webpages takes us one step closer to the semantic web we all love to talk about. <strong> means “strong.” <em> means “emphasis.” Neither of them mean “I start a new section.” This is what headers are for!

With this in mind, make sure your headers follow the proper order when you apply them to your webpages. Another issue that arises from thinking about headers as styling elements is that people are sometimes tempted to skip over <h1> and use <h2> or <h3> because they’re smaller and fit what the designers want it to look like on screen. This makes as much sense as putting a title in the “subtitle” field of a book record because it looks prettier that way in the online catalog! If you put an <h2> tag in your webpage, you must have an <h1> before it. Then you can use CSS or the “style” attribute to modify the font size and looks, e.g. <h1 style=”font-size:120%”>.

Note: In the IU Libraries Content Manager, the title you enter for your webpage (the “page name”) will always be in <h1>. Each webpage should have only one <h1>, so begin your page content headers with <h2> and go down the line.

For more information on structuring webpages with headers, see the W3C’s HTML Techniques for Web Content Accessibility Guidelines. The Accessibility and Usability Guide for Penn State also offers practical advice and examples, with nods to other common pitfalls in structuring HTML documents.