Guides: D4D Accessibility Guide: Heading Levels and Logical Order

Milestone Overview: Heading Levels and Logical Order

Heading levels are used in the body of the text, and the heading levels are nested in logical order.

Heading levels can be used by screen readers like a table of contents for your page, allowing users to scan and skip content more easily.

Accessibility Best Practices

Checking and Editing Heading Levels

Double check that your box titles are all visible (no floating box titles)
Box titles are H2, any subheadings within that content box should go in order starting from H3, H4, H5.
Use the rich text editor to select the proper heading level

LibGuide Help Center Resources:

Using the Rich Text Editor
The Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that works much like a word processor. When editing a Rich Text/HTML content item, it will allow you to easily add and format text, images, and tables. To make advanced customizations, you can even switch to the Source mode to view the underlying HTML code.
Adding and editing Rich Text / HTML content items
The Rich Text/HTML content item is your catch all for pretty much anything. It allows you to add text, images, tables, and even code. Anything you can do in HTML, you can also do in a rich text box. Rich Text /HTML content items are not included in your assets library (Content > Assets), so they can only be reused by reusing the entire box.
System settings: accessibility (good for background info)
The Accessibility tab (CMS only) allows you to enable (or disable) the use of the H1 and H2 heading choices in the rich text editor. By default, these heading choices are disabled so that the first heading choice is the H3 tag. This is done to preserve web-accessible formatting -- and WCAG 2.0 compliance.

Examples

At NYU Libraries, we have set our LibGuides system to have the following default headings (but your organization may not have this so you will see these heading levels in the Rich Text / HTML box):

Heading 1 = Page Title*
Heading 2 = Box Title

There should only be one Heading 1 on the entire page (thus it make sense at NYU to have this set as the Page's heading).

So the first heading in any Rich Text HTML box (at NYU) will be a:

Heading 3

Is the first available heading level in the rich text editor.

You can also include an unstructured list:

List item
List item

Or you can include a numbered (structured) list:

Item 1
Item 2

Heading 4

This will add a sub-section under heading 3.

Heading 3

Additional section

Heading 4

Sub-section

Another list:

List item
- List sub item
- List sub item
List item

Heading 5

Sub-sub section

Heading 6

Sub-sub-sub section

Additional Resources

WebAIM - Semantic Structure: Regions, Headings, and Lists
A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading.
Accessible U: Headings
This article shows you how to format headings to improve the reading experience of all your readers, whether they read with their eyes or with their ears using a screen reader.
Accessible U: Bulleted & Numbered Lists
Summary: Presenting a “wall of text” in a document or Web site can discourage reading. Instead, present key concepts as bulleted lists where possible.

Project Mangagement Suggestion

Custom CSS and Templates can help avoid the issue of authors/editors choosing a heading level for the look rather than the semantic meaning.
Make it clear to your authors/editors if your system forces box titles to be H2 or not. Our training was based off of a forced H2 for box titles.