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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Piscitelli, JoAnn
Sent: 29 April 2022 16:26
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] Re: [WebAIM] Reference to not add formatting attributes to Heading tags

The reason I was asking is a higher level office that I sometimes help with web do this and I wanted to give them a reference as to why other than me saying not to. We use established header tags but some of those folks add additional styling (and it is not necessary). I guess, too, we have to pick & choose our battles!

Thank you for giving me a shout back so quickly!

Have a good day!

Jo

From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Ryan E. Benson < <EMAIL REMOVED> >
Date: Friday, April 29, 2022 at 11:22 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Reference to not add formatting attributes to Heading tags Only thing I can think of is it may lead to some kind confusion if some look different. Using CSS would be a better solution overall.

--
Ryan E. Benson

On Fri, Apr 29, 2022, 11:18 AM Piscitelli, JoAnn < <EMAIL REMOVED> >
wrote:

> Hi Everyone,
>
> I was hoping someone might have at their fingertips a reference link
> or two about why it is not good practice to put <strong> or <em> tags
> inside <h2>, <h3> tags. I am pretty sure doing so is not good practice
> but I am having trouble finding a reference link about it. Or, am I
> wrong? Looking forward to hearing feedback and a link or two.
>
> Thanks so much!
>
> Jo
> > > https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&amp;data%7C01%7Cjoann.piscitelli%40yale.edu%7C344856b
> bab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e87abeb5c%7C0%7C0%7
> C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIj
> oiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata8B
> 7%2FTpPxKCrIA1275TzELsrQLoer8hH7%2BQqq4NNYg0%3D&amp;reserved=0
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cjoann.piscitelli%40ya
> le.edu%7C344856bbab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e87
> abeb5c%7C0%7C0%7C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC
> 4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%
> 7C&amp;sdata=tLuamiTyZOs0ifgfjOdMUBOcGWHn9d%2BtG%2FG7Ic2yDOE%3D&amp;re
> served=0 >