Proper Headings
WHY? Headings, like newspaper headings, add STRUCTURE and MEANING to a page and allow both the sighted and visually impaired users (blind, low vision) to quickly read the topic of interest to them.
For visually impaired users: Screen readers use headings to compile a complete list of headings on a page so that visually impaired users can easily navigate to a particular heading without having the whole page read to them by a screen reader. JAWS will make an announcement about the headings at the start of the page (i.e., “page has 3 headings and 7 links” )
For sighted users: Headings make it easier for sighted users to “focus” on main topics of interest to them.
Mitigation Technique: Add proper headings
- Keep heading titles short because long titles make it harder to scan a page quickly.
- Use HTML heading elements (i.e., <h1> - <h6>) in their correct order.
NOTE: Incorrect headings order makes the page confusing to read because it is not structure logically. - HOW? To create headings, you define or apply heading styles to existing text. There are several ways to apply a heading style:
- Select the text you wish to make as a heading and then select a predefined heading style (i.e., H1, H2, etc.) from the Properties panel.
- Select some existing text you want to style and then CTRL + 1, CTRL+ 2, etc. that will correspond the a heading level (CTRL+1 = H1, CTRL+2 = H2, etc.)
- CAUTION: Do not style a paragraph tag (<p>) to look like a heading tag because the screen reader will not compile it in its list of headings because the tag is not a heading tag but a paragraph tag. However, you can style a heading tag to be bigger, use different font, etc. Heading tag has semantic meaning for structure and use with AT technologies like JAWS.