Chloe Typert-Morrison

Semantic Headings

Semantic headings are one of the accessibility integrations common in CMS tools but are not used correctly. Because CMS platforms generally combine text styling with the heading tags, people associate them more with the visual design of the page rather than the content structure. Content creators may choose to use headings out of order if they stylistically look better without understanding that it completely changes how a screen reader understands the content.This interface provides detailed explanations of what semantic headings are, how they work, and why the order of them is important. There are guides for choosing the correct headings and an example web page that shows all of the heading levels.The accessibility checker will create an error if a heading level is skipped or a Heading 1 tag is missing from the page. The checker will also generate a warning message if the text is formatted to look like a heading but not tagged as one. For example: if the text is larger than the body copy, in a different font, or in a separate paragraph, the system will ask if this should be marked as a heading.To remove the stigma that people need to sacrifice the styling of their page to create accessible content, the Heading Levels are separate from the other text styling options. This separation allows content creators to design their text as they see fit while ensuring the proper semantic structure is used.