If web accessibility isn’t already on your radar, it should be. At the heart of accessible design are the Web Content Accessibility Guidelines (WCAG), a central element of a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.
While many of the accessibility standards will include items you’ll never see, such as modifications and updates to the code your websites run on, there are several items that must be addressed on the content management level.
The good news is regardless of technical skill level, these are something everyone can address.
Today’s installment will focus on how to properly use headings within page content.
By design, headings are used to organize content in hierarchical, or nested, structure. They rank from Heading 1 (H1), which is typically used for something like the page title, down through Heading 6 (H6).
For most content management tasks, using H1 through H3 is sufficient. As a result, it became common practice to begin using the lesser used H4 through H6 headers more for style and formatting than hierarchical ordering of content.
The bad news is while that shortcut provided extra options for content styling, it made navigating page content frustrating for web visitors using assistive technologies.
W3C maintains a fabulous reference tutorial that explains how to go about using headers that comply with accessibility standards. While there’s reference material there directed more toward developers (you don’t need to worry so much about the navigation structure), the material most valuable to content managers related to using headers inside the main content area
As a content manager, here are some rules of thumb based on those guidelines to help begin forming good habits for header use:
Keep Everything In Numerical Order
Never use H3 unless it’s preceded by H2, never use H4 unless it’s preceded by H3, etc.
Good Header Structure
All of the headers are arranged in numerical order with the H1 element applied to the page title.
H1 Page Title This is some intro text using standard paragraph formatting. [begin body content] H2 Section Header The is section text using standard paragraph formatting. H3 Sub-Section Header The is sub-section text using standard paragraph formatting. H3 Sub-Section Header The is sub-section text using standard paragraph formatting.
Here’s a visual representation of good header structure:
Bad Header Structure
Here, everything is mixed up and the H1 element is used for styling instead of content ordering.
[begin body content] H3 Sub-Section Header The is section text using standard paragraph formatting. H1 Big Section Header This is some intro text using standard paragraph formatting. H3 Sub-Section Header The is sub-section text using standard paragraph formatting. H2 Section Header The is section text using standard paragraph formatting.
Here’s a visual representation of bad header structure:
Here Is Your Accessibility Through Content Management Action Item
Review your existing web content and look for any instances where headers are used for style instead of hierarchical ordering of content.
If you find any, it shouldn’t’ be difficult to begin making necessary changes. The only conundrum you may encounter is how to reproduce your desired the header formatting (font size, weight, color, etc.) without running afoul of accessibility standards.
Depending on the publishing platform you use, you may need to reach out to your web developer for assistance or consider changing the way your content is displayed.
