A Digital Accessibility Quick Reference Guide

Heading tag

Faux Headings

—

by

ltrayers
in

A faux heading is text that looks like a heading in size, weight, or color but is not formatted with an HTML heading tag or a document heading style. Webpage Headings Do this: <h2>Impact on Accessibility</h2>Not this: <span style=”font-size:1.5rem;font-weight:bold;color:#0000FF”>Impact on Accessibility</span> Document Headings Do this: Use Styles to format headings. Not this: Font formatting applied…

A faux heading is text that looks like a heading in size, weight, or color but is not formatted with an HTML heading tag or a document heading style.

Webpage Headings

Do this: <h2>Impact on Accessibility</h2>
Not this: <span style=”font-size:1.5rem;font-weight:bold;color:#0000FF”>Impact on Accessibility</span>

Document Headings

Do this: Use Styles to format headings.

Screen shot of formatting options in Microsoft Word with Heading 2 selected in the Styles options.

Not this: Font formatting applied to Normal text.

Screen shot of formatting options in Microsoft Word with Normal selected in the Styles options.

Impact on Accessibility

Screen readers turn all headings into a menu so users can navigate the page or the document more quickly. When text is not formatted as a heading, the screen reader will not include it.

Think about how sighted users flip through a book and quickly scan the table of contents to get an overview. Proper heading formatting allows people with visual disabilities to do the same with a screen reader.