WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Reference to not add formatting attributes toHeadingtags

for

From: Mark Magennis
Date: Apr 29, 2022 10:33AM

Jo,

Sometimes it is necessary to add additional visual styling to a heading. When the semantics of the heading level don't match the semantics of the heading purpose. This needs some explanation so I'll try my best.

Suppose you have a user guide with a number of sections and subsections. And suppose a lot of the subsections contain a Troubleshooting section with some extra info. For visual consistency and aesthetics, every Troubleshooting section should look the same.

Now suppose some sections don't have any subsections but still have a Troubleshooting section. You might have a structure like this:

Toaster Guide
1. Setting up
1.1 plugging it in
Troubleshooting
1.2 Switching it on
Troubleshooting
2. Making toast
2.1 Choosing the right bread
2.2 Setting the timer
Troubleshooting
3. Making waffles
Troubleshooting

Sections are <h2>, subsections are <h3>. The three instances of Troubleshooting are also headings. The first two are <h4> because their parents are h3 subsections but the third one is <h3> because its parent is an h2 section.

So you have h3's that you want to look not like other h3's but like h4's. The only solution is to make them h3 then style them to look the same as the h4's.

The problem is that semantically, these Troubleshooting headings are trying to do two things:
1. Indicate a level in a hierarchy.
2. Indicate a particular type of content.

The first is achieved by using heading levels, the second by text content and presentation.

Mark