Day: August 7, 2020

Written by Adam Kosakowski, M.Ed., ATP, Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center

Headings are an incredibly important accessibility element on websites as well as digital documents such as Microsoft Word, Google Docs, and Microsoft Outlook emails. Visually, headings are those big bold words on screen at the top of every section of text. Think of them like chapter or section titles. They draw in the eyes of sighted users and give them a sneak peek of what they’re about to read below. But, if you’re blind or otherwise use a screen reader, unless headings are created correctly, they’ll just be read like normal text. This column will help you do Headers right!

Screen readers don’t announce to the user the size of text, so if a heading is only a heading due to its visual size, that’s considered an accessibility fail. Accessible headings need to be tagged as a heading, behind the scenes, in the coding of the document or website. If tagged appropriately, a screen reader user will know it is a heading and will be given access to a plethora of screen reader shortcuts empowering the user to navigate the document by those headings similar to how sighted readers do so with their eyes.

Creating Headings

Luckily, you do not need coding knowledge to create tagged headings in documents and websites. You just need to know where to look:

Does this screen shot look familiar? If not, open up Microsoft Word, go to the Home tab and look for the “Styles” ribbon. Normal, Heading 1, Heading, 2, and Heading 3, etc. are all selectable options that change your visual text upon selection. Not only that, if you choose one of the Heading options and start typing, behind the scenes and in the coding your typed text will then have that associated heading tagged! It’s that easy! Many word processing applications have the ability to apply heading tags, you just need to find it! If you’d like to learn how to do headings in your favorite word processor or website builder, you can Google something like “labeling headings in <insert application name here>”

Heading Order

Creating headings is half the battle. Next, headings must have appropriate hierarchical ordering. Heading level 1 is usually reserved for the title of a document or webpage. If there is a section title on that same document or webpage, that would then be a heading level 2. Heading level 3 could be a subsection title that logically belongs under its associated heading level 2, and so on. The idea is to use headings as you logically need them, but do not skip levels, i.e., don’t have a level 3 without having a level 2 associated with it.

Here’s an example to help you think through this and get hungry (for headings)! Think of your favorite restaurant menu and think of how they order their heading text. I love breakfast, so we’ll write a breakfast example:

• Adam’s Breakfast Nook (This is the title of the restaurant, so this should be a Heading level 1, it would be at the top of the page, big and bold AND tagged as a heading 1)
  • Egg Dishes (This is a type of breakfast dish served at the restaurant, it’s a Heading level 2)
  • Pancake Dishes (This is another type of breakfast dish, it’s also a Heading level 2)
    • Savory Pancakes (This is a “subtype” of pancake dishes, so it’s a Heading level 3)
    • “Healthy Pancakes” (This is also a subtype of pancake dishes, so it’s also a heading level 3)
      • Banana Pancakes (This is a specific dish; it could be Normal text or a Heading level 4)
      • Strawberry Pancakes (Another specific dish, same as above)

This column is written by Adam Kosakowski, M.Ed., ATP. Adam works as an Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center. He can be contacted at Adam.Kosakowski@OakHillCT.org and followed on Twitter: @NEATWithAdam.