Web Accessibility Through Content Management: Using Headers The Right Way

By:
,

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:
Image illustrating 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:
Image illustrating 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.

About Drew McManus

In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower.

With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists.

For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.

Don't Stop Hacking The Arts Yet...

  • Level Up Your Logo Design

    Is logo design something you love to hate? Serving as a crown jewel for your branding, it shows up in nearly everything you do but how many organizations consider…

  • website ux mistakes

    The Nielsen Norman Group is made up of researchers who have literally written the books on user experience and usability. Their website is full of helpful articles that you can…

Leave a Comment

Send this to a friend