Headings/Page Structure

This standard applies to any and all Web pages, course content, documents, or interactives developed for learners. It’s also good practice to follow these guidelines for internal documents and those documents or resources shared with external partners. 

Alignment

WCAG

WCAG 2.1 AA standards 2.4.6 and 2.4.10

• Headings and labels must describe the topic at hand or the purpose of a section of the content. 
• Headings should be short. “Short” here is relative to the content in question, but generally speaking, headings should not be sentence length. 
• Section headings must be used to organize the content.

On any course page or document, we must nest headings by their rank (or level) according to the information architecture. The most important heading should have the rank 1 (<h1>), and the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, and headings with a lower rank start new subsections that are part of the higher-ranked section.

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section can follow an <h4> as it closes the previous section.

Notes on Headings in CourseArc

Coursearc has its own native heading structure. Each CourseArc page’s title is automatically set at <h2>. As a result, the highest heading rank that can be used in any block we build in a CourseArc page is <h3>. As of the writing of this entry of the Style Guide, it is common practice, especially for student learning courses built in CourseArc, to use an Icon and Text block as section headers. Because the Icon and Text block doesn’t yet support rich text editing, you must manually change the text to the proper heading rank. To do so: 

1. Add an Icon and Text block to the page.
2. Type any placeholder text into the text box. 
3. Click the source code button in the Icon and Text edit panel.
4. Replace the <p> and </p> with <h3> and </h3>.
5. Click “OK”.
6. Finally, replace your placeholder text with the section title. 
7. Click “Add Block” or “Save”. 

• W3: G130: Providing descriptive headings
• W3: G131: Providing descriptive labels

Page Structure

• W3: W3C: Page Structure Tutorial
• Youtube: Tutorial on Grackle Docs features from their website