My.EOU Portal Current Students Faculty/Staff
Headings provide both visual and structural organization to the content. Using defined heading elements (sometimes called Semantic headings), versus taking regular text and styling it to merely look like a heading, allows assistive technologies like screen readers the ability to jump between page sections and easily identify the content most relevant to them.
Following is an example of how a digital version of a newspaper might structure the headings on their page.
This example demonstrates using keyboard characters and whitespace to create the visual appearance of a bullet list, without using a defined list element.
My favorite dog breeds:
– Rhodesian Ridgeback
– Irish Wolfhound
– English Bulldog
This would get read by some screen readers as:
My favorite dog breeds space space hyphen Rhodesian Ridgeback space space hyphen Irish Wolfhound space space hyphen English Bulldog
If I used the proper defined unordered list tool, my list would look like this:
This would get read by the same screen reader as:
My favorite dog breeds, unordered list of three items. Item 1: Rhodesian Ridgeback, Item 2: Irish Wolfhound, Item 3: English Bulldog
Heading structure can be tested both manually and with automated testing tools. Lists and other structured content can be tested manually. Right-click or ctrl-click on a piece of structured content and open up the developer console (inspector) in a web browser. Verify that the content is indeed a heading/list/other structured element, and not generic paragraph text with added styling. If it’s a heading, verify that it is nested appropriately within the heading hierarchy.Automated testing tools like WebAIM WAVE can also check for the correct heading structure. Some automated tools produce false negative results for heading hierarchy errors, so while automated tools can help you easily identify legitimate heading hierarchy errors, if the tool reports no errors, it’s still worthwhile to manually check headings on the page.