Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy: Headings

October 15th, 2010

This entry in the “Web Accessibility Made Easy” series addresses the use of headings to add structure to the content of Web pages.

Headings

HTML headings have been part of the structure of an HTML document from the beginning.  The heading elements <h1> through <h6> are meant to give web documents structure. Therefore, headings should be properly nested to assign level of importance in the structure of the Web page. Main topics of a Web page should be represented by <h1> elements.  Sub-topics should be represented by <h2> elements indicating a second level of importance in the structure of the document. The remaining HTML heading elements <h3> through <h6> are used to denote additional topics in descending order of importance.  Each level of HTML headings (<h1> - <h6>) has inherent CSS style rules applied by individual Web browsing software and which control the font size, font weight, padding and margins for each heading element.  Appearance of headings controlled by the inherent browser CSS can be over-ridden by CSS styles chosen by the Web developer.   This enables creation of web sites with specific design to the taste of the Web designer and the purpose of the Web site. However, a Web developer can add CSS style rules to heading elements so these headings fit his or her visual design.

Screen-reader users can discover document structure by creating lists of all the headings of each page of the Web site. The list of headings also enables screen-reader users to navigate around the Web page by selecting headings for topics in which they are interested. Screen-reader users commonly use keyboard commands to accomplish quick movement through a web site to desired content.

Guideline

IU Web Accessibility Guidelines


17.  Use heading elements to convey document structure and use them according to specification.

Tutorial

This tutorial illustrates both the right and wrong way to use headings on Web pages. To do this, the bad example Web page, the good example Web page, along with their associated style sheets will be used.

  1. The bad code – faking headings using visual styling

    The code below is used to make the font of the text bigger and appear  to be  a heading to individuals who are can see. But coded in this manner, the document is given no structure and those visiting the page with screen readers cannot determine the relative importance of page elements/links. Appearance of the page could also be controlled by CSS style rules applied by the developer to control its visual appearance while additionally providing structure for the page.

    <font size=”+4″>Indiana University Web Accessibility Class:</font>
  2. Adding the heading elements to replace the visual styling, <font> element.

    In this example above, the <font> element is replaced with an <h1> element.  As a result, the Web page now has more structure and is easier to navigate using screen-reading software.  If the developer chooses to code the heading style to match the bad example style above, they  create a CSS style declaration with CSS style rules (font-size: 36pt; and font-weight: normal;) and apply it to the <h1> element. In fact, the <font> element has been deprecated for XHTML.1.0 in favor of headings and style sheets.

    <h1> Indiana University Web Accessibility Class:</h1>

    CSS Style declaration:

    h1 {
    font-size: 36pt;
    font-weight: normal;
    }

Wrap Up

HTML Headings are a quick and easy way to improve the accessibility and navigability of a Web site for users of screen reading software, without impacting the visual design.  Unfortunately, headings do not offer explicit benefits to users who don’t use assistive technology. However, they do offer great benefits (structure, and ease of navigation for screen reader users).