Accessibility: Headings

By Jamie Witman, OEN

This guide assumes that you have created an OEN Manifold account, have admin access to the backend, have created a project, and ingested a text or plan to ingest a text, or edit or create a text using the Manifold Editor. If you do not have Project Creator status, please review the Request an Account form.

For help creating a project and adding a text, see the Creating a Project Quick Guide.

What are Headings and why are they important for accessibility?

Headings are the titles and subtitles used to organize content on a web page or document. They are crucial for creating accessible content. Using structured headings are key for navigating web pages, websites, or applications with a screen reader like NVDA, JAWS, or VoiceOver.

As a rule, you should have only one Heading 1 (H1) within your document, web page, website, etc. You should then use headings hierarchically, so after Heading 1, you should use Heading 2 (you can use as many H2s as you want.) An H2 should be followed by an H3 and so on.

If you have more than one H1, or if you jump from H1 to H3, you can create accessibility issues for screen readers and other assistive technologies. When structured headings are used improperly readers may miss out on important content.

How to use Headings in Manifold?

Manifold gives you the option to author within the platform as well as ingest pre-authored content from sources like Google Docs or Word Documents. This guide will go over how to implement Headings appropriately both in your own Google Doc/Word Do and within the Manifold Editor.

How to set up Headings in a Word Doc and Google Doc

If you are starting with a Word Doc or Google Doc as your source text, you can use the built-in Styles function to structure your Headings properly. However, Word Docs and Google Docs can be a little confusing because you have the option of selecting a “Title” Heading using the built in Styles function.

In a Word Doc with a “Title” Heading, some Heading 1s, and some Heading 2s, Manifold will automatically restyle the “Title” Heading to a Heading 1, the Heading 1s to Heading 2s, and the Heading 2s to Heading 3s, as needed in order to comply with proper accessibility standards.

However, in a Google Doc this functionality does not translate into Manifold. If you use the “Title” Heading in a Google Doc, some Heading 1s, and some Heading 2s, Manifold will do a 1:1 alignment for the Heading 1s, Heading 2s, etc., but it will not style the “Title” Heading with a structured heading. In this case, you can either use the Manifold Editor (see section below on how to use the Manifold Editor) to correct the structured headings, or you might decide not to use the “Title” Heading in your original Google Doc and only use the Heading 1 for the Title, and proceed with Heading 2s, Heading 3s, etc. for the appropriate text in your document.

This is important to consider because in any web page, you should only have one H1 but you can have as many H2s, H3s, etc. as you need - they just need to be nested properly.

How to use the Style Pane in Word Docs

If you’re starting with your source text in a Word Doc use the Style Pane to create the appropriate structured Headings for your document. To add Headings, highlight the text you want to style as a Heading, then use the drop down menu (defaults to Normal Text) to select the appropriate Heading level. Manifold will then be able to pick up on this formatting and style your Manifold Project accordingly.

In the image example above, The “Title” Heading will be converted to a Heading 1 in Manifold. The Heading 1 will be converted to a Heading 2, the Heading 2 will be converted to a Heading 3, and so on.

How to use the Style Pane in Google Docs

If you’re starting with your source text in Google Docs use the Style Pane to create the appropriate structured Headings for your document. To add Headings, highlight the text you want to style as a Heading, then use the drop down menu (defaults to Normal Text) to select the appropriate Heading level.

In the image example above, the Title uses a Heading 1 followed by Heading 2, Heading 3, and Heading 4.

How to set up Headings in the Manifold Editor

You can use the Manifold Editor to create new texts from scratch and to edit previously ingested texts. The Manifold Editor has two options for authoring content: a Rich Text Editor and an HTML Editor.

To get started creating a new text from scratch, first navigate to the Backend of your Project and select Texts from the left-side menu. From the Texts page, click on the Create New Text button.

A drawer will open from the right-side of the screen. Here you can add the Title for your Text as well as begin creating the different Sections that will be a part of your text. You can always add and edit the Title and number of Sections later on. Then Save and Close.

The landing page for your new Text will load. Click on the Sections button on the left-side menu.

From this new page, you should see the Section you created earlier. This is also where you can add new Sections. Click on the Pencil icon to enter the Manifold Editor.

From here you can begin typing in the Rich Text Editor the content you want to add. Once you’ve added your text, use the Styles Pane to add the appropriate structured Headings. This process is very similar to adding Styles in Word Docs and Google Docs.

If you prefer, you can toggle to the HTML editor and use structured tags to create your Headings.

Once your Headings have been set up appropriately, click on the Save and Close button. Your newly created text from scratch now has structured Headings.

You can use this same process for editing already ingested texts by following the same steps above in the Backend of your project, navigating to the particular Text and Section you want to edit and clicking on the Pencil icon.

Checking Your Work

If you ever want to test that you only have one Heading 1 or whether your headings are nested properly, Accessibility Bookmarklets and the WAVE browser extensions are good tools.