Protiviti / SharePoint Blog

SharePoint Blog

December 19
Accessibility Tips: Understanding SharePoint Headings

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.

carmen blog 12.19.14.PNG

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

 


Quick Launch


© Protiviti 2019. All rights reserved.   |   Privacy Policy