WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Reference to not add formatting attributes to Heading tags

for

From: Vaibhav Saraf
Date: Apr 29, 2022 11:07AM

Hi,

In my view it is okay to style a heading in a particular way as long as it
is semantically correct.

Though I have one opposition to <em> as it italicized the text and is not
so consumable for all.

Thanks,
Vaibhav



On Fri, 29 Apr 2022 at 12:33, Mark Magennis < <EMAIL REMOVED> >
wrote:

> 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
>
>