WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Reference to not add formatting attributes to Heading tags

for

From: Elizabeth Thomas
Date: Apr 29, 2022 2:34PM

I don't have a reference but here's my understanding of it. Strong and em mean “hey, this is important.” A heading tag already says “hey, this is important because it's what this section is about.” So it's redundant to style a heading as strong or em; just use b or i.

For documents authored in Microsoft Office, I have found that strong and emphasis often override the heading tag, particularly when exported to PDF. So it looks like a heading, but isn't consumed by the technology as a heading (in PDF- strong headings often come into the PDF as p tags.)

-Elizabeth Thomas

Sent from my iPhone

> On Apr 29, 2022, at 1:07 PM, Vaibhav Saraf < <EMAIL REMOVED> > wrote:
>
> 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
>>
>> -----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 >>>
>> >> >> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&amp;data%7C01%7Cjoann.piscitelli%40yale.edu%7C344856bbab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e87abeb5c%7C0%7C0%7C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata8B7%2FTpPxKCrIA1275TzELsrQLoer8hH7%2BQqq4NNYg0%3D&amp;reserved=0
>> List archives at
>> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cjoann.piscitelli%40yale.edu%7C344856bbab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e87abeb5c%7C0%7C0%7C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=tLuamiTyZOs0ifgfjOdMUBOcGWHn9d%2BtG%2FG7Ic2yDOE%3D&amp;reserved=0
>> >> >> >> at http://webaim.org/discussion/archives
>> >> >> >> >> >>
>