Heading Structure For Accessibility

Headings play a crucial role in structuring a web page. Headings help the users to skim through the page and find the information they need. Especially in case of large documents headings are highly recommended to enhance the user experience.

While improving user experience, proper heading structure increase search engine optimization (SEO) and accessibility.

Using HTML headings

When we say providing headings, content authors visually make the content look like a heading by increasing the font-size and other styling methods. Though this method brings the intended visual output it is not semantic and will make the page inaccessible for screen readers. HTML headings (h1 to h6) need to be used for structuring the webpage. Content authors are in general worried that using HTML headings change the look and feel of content. <h1> may be very large in size and <h6> maybe very much small. Content authors can get the required font-size and style using appropriate CSS. A hierarchical heading structure helps the screen reader users to jump from one portion of the page to another portion of the page. External WebsiteWeb AIM user survey4 says headings are very useful (47.4%) and somewhat useful (34.7%) for navigating the webpage. Though finding content on the page using headings is an old technique, even today 65% of screen reader users prefer heading to find the content on the web page says External WebsiteWeb AIM survey 5 results.

Best practices in using HTML headings for accessibility

The points listed below are best practices for providing HTML headings on a web page. In few cases it may be difficult to follow these practices though.

  • Provide only HTML headings.
  • Provide logical heading structure. Eg: H2 should follow h1, H2 or H3 should follow H2, H3 or H4 should follow H3 and so on.
  • Page should at least have one H1 and it should represent the title of the webpage.
  • The H1 of the page should be at the beginning of the main content.
  • Only one level one heading on a webpage is recommended and maximum two level one headings if the website name also needs to be marked in every page of the website.
  • If another H1 is placed in the web page it should represent the title of the website.
  • It is better to start the page with higher level of heading.
  • Never skip any level of heading.
  • The primary and secondary navigations also can have headings but should be below the level of main heading. Ideally they should be H2 considering level one for main heading.
  • Never use HTML heading for visual appearance.

Sample code for heading structure

<h1>Vitamins in fruits and vegetables</h1>
<h2>Fruits</h2>
<h3>Apple</h3>
<p>Content for apple goes here.</p>
<h3>Orange</h3>
<p>Content for orange goes here.</p>
<h3>Banana</h3>
<p>Content for bananas goes here</p>
<h2>Vegetables</h2>
<h3>Potato</h3>
<p>Content for potato goes here</p>
<h3>Ladies Finger</h3>
<p>Content for ladies finger goes here.</p>
<h3>Tomato</h3>
<p>Content for tomato goes here.</p>

Sample Heading structure

Vitamins in fruits and vegetables

Fruits

Apple

Content for apple goes here.

Orange

Content for orange goes here.

Banana

Content for bananas goes here

Vegetables

Potato

Content for potato goes here

Ladies Finger

Content for ladies finger goes here.

Tomato

Content for tomato goes here.

Techniques for HTML headings

1 Comment to "Heading Structure For Accessibility"

  1. Aparna's Gravatar Aparna
    August 25, 2014 - 10:43 am | Permalink

    Good write up Rakesh. Additionally, if I may add, text of the heading plays a vital role. As a blind user navigates a web page using a screen reader, it is very important to have meaningful and contextual text for headings. One can have a heading for the side navigation bar, specifying it’s action. CSS can always do the trick of hiding the text for visual pleasure but at the same time blind users can benefit as the screen reader reads out the heading. Also, use of HTML 5 semantics (article, hgroup, section, header, footer) is good in ensuring the structure of the webpage and at the same time being accessible.

Comments are closed.

1 Trackback to "Heading Structure For Accessibility"

  1. on September 1, 2014 at 10:05 pm