Headings play a very important role in the accessibility level of any document, whether it is a Word, PDF, or HTML document. Screen reader users use “Headings” for navigation and they provide a clear concept of a document which benefits all users, making it easier to understand the content.
Remember that blind users can’t just look at a web page and immediately learn its layout the
way that a sighted user can.
Screen readers read in a linear style, which means listening to the entire web page, unless there is some other easy way to get to know the page’s layout and structure. And headings are a way to do that.
Real Headings
Headings are about logical structure, not visual effects.
Big bold text may give the impression a heading to visual users, but screen readers pay no attention to the size and font-weight of the text, so blind users cannot know a phrase is a heading unless it is marked up in the HTML code as such, using <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.
Only the good examples create real headings that screen readers can use.
Good Example: Real Headings
The headings in this example are marked with heading tags(<h1> and <h2>)
Begin code:
<h1>Types of Dog Breeds</h1>
<h2>Beagle </h2>
<h2>Bulldog </h2>
<h2>German shepherd </h2>
End code.
Bad Example: False Headings Using Styles
Don’t use styles to create false headings. All of the sentences below are styled to look like real headings, but they’re still just regular paragraphs, so none of them will be announced as headings by screen readers.
Begin code:
<div id=”noHeadingExample”>
<p style=”font-weight: bold; font-size: 200%;”>
Learn Web Accessibility Laws
</p>
<p>Put text here…</p>
</div>
End code.
The font size will be increased but screen reader won’t announce it’s a heading.
Meaningful Text
If you want to have big, bold text for non-heading text, use styles to achieve that effect. If you use heading markup (<h1>, <h2>, etc.) for non-heading text, you will confuse screen reader users.
Bad Example:
In the example below, web developer use fake heading, because there is no more content under the heading tag, giving screen reader users the false impression that there is more content below this heading, when in fact there is not.
“Special rates good until July 31!”
Begin code:
<h1 class=”promotional-item”>Special rates good until July 31!</h1>
End code.
Headings MUST be correct and informative.
Headings should provide users a good understanding of the content they will find within that section of the page. When screen reader users pull up the list of headings, they will hear the level of the heading, plus the text within the heading, including alt text for any graphics inside the heading.
Good Example: Descriptive Headings
Begin code:
<h1>Hospitals </h1>
<h2>Medical Staff </h2>
<h2>Contact us </h2>
End code.
Heading text SHOULD be Short
There is no specific limit on the length of a heading, but a heading should be short, to make it easy for users to browse it.
- Create the structure first, then style the headings
Always think about the structure first, because screen readers and other assistive technologies pay attention to the structure, not the look of the website. If the default size of the headings is too big for the look you have in mind, use styles to change the size, rather than jumping down to a lower heading level.
- Headings SHOULD NOT skip proper heading order.
Good Example:
Each level of heading,<h1>-<h6>, shows the connection from one part of the content to the other parts.
In this way, the heading structure of a page can be used as a system to bring together the document’s contents much like an outline.
Begin code:
<div class=”exampleHeadings”>
<h1>Screen readers </h1>
<p> It helps blind people to read things on the screen.
</p>
<h2>Jaws </h2>
<p> It is the famous screen reader which is used by the blind people.
</p>
<h3>Freedom Scientific </h3>
<p>
Jaws is developed by the Freedom Scientific.
</p>
</div>
End code.
The beginning of the main content SHOULD start with <h1>.
Generally the best practice is to start the main content of a web page with a level 1 heading (<h1>), with no other headings levels.
The sub-sections of the page should be marked as level 2 headings (<h2>). If there are sub-sections within the level 2 sections, they should be marked as level 3 (<h3>) and so on.
One of the main reasons that the <h1> should come at the beginning of the main content is because screen reader users can use keyboard shortcuts to navigate directly to the first <h1>, which should allow them to jump directly to the main content of the web page.
If there is no <h1>, or if the <h1> come somewhere else than at the start of the main content, screen reader users will have to listen to more of the web page to understand it, and waste their time.
Most web pages SHOULD have only one <h1>. But there are few exceptions, in which index pages have articles combined on the same page, in which each blog article on the page starts with <h1>.
Even this example doesn’t have to be an exception to the rule though. The top heading level 1 could be the title of the blog (e.g. “Web Accessibility tips”), and each blog article on the index page could start with <h2>. But if the individual blog articles also appear on pages of their own, those pages should start with <h1> and not <h2>, so realistically it may make more practical sense to use <h1> on both the individual blog article page and on the combined index page with multiple articles. It is easier to maintain the markup that way.
Navigating Headings with Screen Readers
Method 1: List all headings.
Screen Reader & Browser Command
JAWS with Chrome: Insert + F6
NVDA with Firefox, Chrome: Insert + F7 (to open Elements List), then select headings
Method 2: Navigate from one heading to the next.
Screen Reader & Browser Command
JAWS with Chrome: Press H
NVDA with Firefox, Chrome: Press H
Method 3:
Navigate to headings of a certain level
Screen Reader & Browser Command
JAWS with Chrome: Press number 1-6
NVDA with Firefox, Chrome: Press 1-6
Bonus Benefit: Headings Improve Search Engine Optimization
Headings improve S E O by highlighting the important parts of the web page and drawing attention to them. Be careful to not abuse the headings as a way to add search terms into the content though.
If the headings won’t contain meaningful structural information about a page, the headings will not be useful to screen reader users and will ruin the purpose of using them for accessibility reasons.
