The third item in the W3C’s Easy Checks accessibility
review focuses on the use of headings on your content page. (See previous blog
posts for other Easy Checks topics.)
One long unbroken page of text is difficult to scan and
read, so headings help users more easily grasp the content on the page. These
headings should follow a logical hierarchy, dividing the text into meaningful
blocks.
Screen Readers and Headings
Sighted users scan the web page text looking for styling
cues such as bolding and larger font size to identify the sections of the text.
Screen readers for the blind, however, follow markup, not styling, so visually
styled text without the underlying heading markup is treated as normal
paragraph text. This can make reading a web page much more difficult for
sight-impaired users.
For this reason, accessibility standards are met only by
applying the correct HTML markup to the headings on your page. In SharePoint, the
text editor can apply the appropriate heading markup to your content.
SharePoint Page Title Markup
Standard SharePoint master pages adhere to the W3C standards
by wrapping page titles in H1 tags.
The v4 master page in SharePoint 2010 used this markup:
<h1 name=”onetidProjectPropertyTitle”>
SharePoint 2013’s Seattle master page changed the class
names but still uses the H1 tags:
<h1 class=”ms-core-pageTitle”
id=”pageTitle”>
Best Practices for creating custom master page designs would
be to follow this format as well, using the H1 tags even if your CSS class
names differ.
SharePoint Web Part Markup
In SharePoint 2010, all web part titles are marked with H3
heading tags.
<h3 class=”mas-standardheader
ms-WPTitle”>
For SharePoint 2013, the markup has been changed and now web
part titles use H2 heading tags.
<h2
class=”ms-webpart-titleText”>
Keep this markup in mind when structuring content on your
web page. Think about how this hierarchy of headings will be parsed by screen
readers and whether it makes sense.
Fortunately, accessibility standards allow for missing levels
in the heading hierarchy, so a SharePoint 2010 web page with only a few
paragraphs of text and some web parts can still be compliant, even if no H2
headings have been added to the content.
<h1>Page Title</h1>
<h3>Web part title</h3>
<h3>Web part title</h3>
<h3>Web part title</h3>
References
JAWS Functionality
VIDEO: Importance of HTML Headings for Accessibility
https://www.youtube.com/watch?v=AmUPhEVWu_E
Web Content Accessibility Guidelines 2.0
For more background on the specific accessibility guidelines
being addressed by these tips, review these sections:
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
1.3.1 Info and Relationships: Information, structure, and relationships
conveyed through presentation can be programmatically determined or are
available in text. (Level A)
H42: Using h1-h6 to identify headings