WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Reference to not add formatting attributes to Heading tags

for

Number of posts in this thread: 14 (In chronological order)

From: Piscitelli, JoAnn
Date: Fri, Apr 29 2022 9:18AM
Subject: Reference to not add formatting attributes to Heading tags
No previous message | Next message →

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

From: Patrick H. Lauke
Date: Fri, Apr 29 2022 9:19AM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

On 29/04/2022 16:18, Piscitelli, JoAnn wrote:

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

Not aware of any reason why this would be bad practice, to be honest.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Ryan E. Benson
Date: Fri, Apr 29 2022 9:22AM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

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

From: Piscitelli, JoAnn
Date: Fri, Apr 29 2022 9:25AM
Subject: Re: Reference to not add formatting attributes to Headingtags
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
Date: Friday, April 29, 2022 at 11:22 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
> > > > >

From: Mark Magennis
Date: Fri, Apr 29 2022 10:33AM
Subject: Re: Reference to not add formatting attributes toHeadingtags
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Piscitelli, JoAnn
Sent: 29 April 2022 16:26
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf of Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
Date: Friday, April 29, 2022 at 11:22 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 >

From: Vaibhav Saraf
Date: Fri, Apr 29 2022 11:07AM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Piscitelli, JoAnn
> Sent: 29 April 2022 16:26
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf of
> Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
> Date: Friday, April 29, 2022 at 11:22 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
> > > > > >

From: glen walker
Date: Fri, Apr 29 2022 12:03PM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

Mark, that's an interesting situation. I understand the desire to have
consistent heading levels and the last troubleshooting section is indeed at
an h3 level compared to the other h3s, but I would probably make *all* the
troubleshooting sections h4s so that I can always find them using the '4'
screen reader shortcut key, even if that means a heading level is skipped
(an h2 followed by an h4). That's just a personal choice but I would find
it easier to use the '4' shortcut to find a troubleshooting section then
use Shift+H to hear the heading that is immediately previous to the
troubleshooting section so that I have context.

But to address JoAnn's original question, I agree with Patrick that, in
general, <strong> or <em> can be used in a heading without any trouble and
I have never heard that it shouldn't be done. But I presume the text you
want to emphasize with <strong> has a particular meaning? That is, you
want to emphasize part of the heading more than the other parts of the
heading? Depending on *why* you want to emphasize part of it, you might
have to convey that same importance to assistive technology too. While
<strong> is a semantic element, by default, a screen reader doesn't do
anything special with it so the user might not know it's there. The user
can certainly turn on formatting options with the screen reader so that
changes in fonts can be announced, but I don't know how often that's done.

I hate the "it depends" answers but that seems to apply here. It depends
on why you want to emphasize part of the heading.

<h2>some heading text <strong>that is really important</strong> that you
should pay attention to</h2>

<h2>some heading text <span class="sr-only">(please read carefully)</span>
<strong>that is really important</strong> that you should pay attention
to</h2>

The second example tries to convey the importance with screen reader text
but you almost need an "important text starts here" and an "end of
important text" segment.

But maybe that will spark some ideas.

From: Piscitelli, JoAnn
Date: Fri, Apr 29 2022 12:08PM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

Thanks so much!

The situation would be a header line, regardless of h2 or h3 being bolded and sometimes both bold and italics such as:

<h2><strong><em>This is my double formatted header line of text</em></strong></h2>

The above would be an example (which I should have included in my initial note) of what I was trying to say.

I thank all for the input!!

Jo

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of glen walker < = EMAIL ADDRESS REMOVED = >
Date: Friday, April 29, 2022 at 2:03 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] Re: Reference to not add formatting attributes to Heading tags
Mark, that's an interesting situation. I understand the desire to have
consistent heading levels and the last troubleshooting section is indeed at
an h3 level compared to the other h3s, but I would probably make *all* the
troubleshooting sections h4s so that I can always find them using the '4'
screen reader shortcut key, even if that means a heading level is skipped
(an h2 followed by an h4). That's just a personal choice but I would find
it easier to use the '4' shortcut to find a troubleshooting section then
use Shift+H to hear the heading that is immediately previous to the
troubleshooting section so that I have context.

But to address JoAnn's original question, I agree with Patrick that, in
general, <strong> or <em> can be used in a heading without any trouble and
I have never heard that it shouldn't be done. But I presume the text you
want to emphasize with <strong> has a particular meaning? That is, you
want to emphasize part of the heading more than the other parts of the
heading? Depending on *why* you want to emphasize part of it, you might
have to convey that same importance to assistive technology too. While
<strong> is a semantic element, by default, a screen reader doesn't do
anything special with it so the user might not know it's there. The user
can certainly turn on formatting options with the screen reader so that
changes in fonts can be announced, but I don't know how often that's done.

I hate the "it depends" answers but that seems to apply here. It depends
on why you want to emphasize part of the heading.

<h2>some heading text <strong>that is really important</strong> that you
should pay attention to</h2>

<h2>some heading text <span class="sr-only">(please read carefully)</span>
<strong>that is really important</strong> that you should pay attention
to</h2>

The second example tries to convey the importance with screen reader text
but you almost need an "important text starts here" and an "end of
important text" segment.

But maybe that will spark some ideas.

From: Elizabeth Thomas
Date: Fri, Apr 29 2022 2:34PM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Piscitelli, JoAnn
>> Sent: 29 April 2022 16:26
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf of
>> Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
>> Date: Friday, April 29, 2022 at 11:22 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>> >> >> >> >> >>
>

From: Laura Roberts
Date: Sat, Apr 30 2022 7:07AM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

It's interesting that skipping heading levels will fail PAC3 in a PDF, but
not WCAG (although it is strongly discouraged).

On Fri, Apr 29, 2022, 2:03 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> Mark, that's an interesting situation. I understand the desire to have
> consistent heading levels and the last troubleshooting section is indeed at
> an h3 level compared to the other h3s, but I would probably make *all* the
> troubleshooting sections h4s so that I can always find them using the '4'
> screen reader shortcut key, even if that means a heading level is skipped
> (an h2 followed by an h4). That's just a personal choice but I would find
> it easier to use the '4' shortcut to find a troubleshooting section then
> use Shift+H to hear the heading that is immediately previous to the
> troubleshooting section so that I have context.
>
> But to address JoAnn's original question, I agree with Patrick that, in
> general, <strong> or <em> can be used in a heading without any trouble and
> I have never heard that it shouldn't be done. But I presume the text you
> want to emphasize with <strong> has a particular meaning? That is, you
> want to emphasize part of the heading more than the other parts of the
> heading? Depending on *why* you want to emphasize part of it, you might
> have to convey that same importance to assistive technology too. While
> <strong> is a semantic element, by default, a screen reader doesn't do
> anything special with it so the user might not know it's there. The user
> can certainly turn on formatting options with the screen reader so that
> changes in fonts can be announced, but I don't know how often that's done.
>
> I hate the "it depends" answers but that seems to apply here. It depends
> on why you want to emphasize part of the heading.
>
> <h2>some heading text <strong>that is really important</strong> that you
> should pay attention to</h2>
>
> <h2>some heading text <span class="sr-only">(please read carefully)</span>
> <strong>that is really important</strong> that you should pay attention
> to</h2>
>
> The second example tries to convey the importance with screen reader text
> but you almost need an "important text starts here" and an "end of
> important text" segment.
>
> But maybe that will spark some ideas.
> > > > >

From: Jim Homme
Date: Mon, May 02 2022 9:10AM
Subject: Re: Reference to not add formattingattributes to Heading tags
← Previous message | Next message →

Hi,
Better yet, style with Cascading Style Sheet.

Thanks.

Jim

=========Jim Homme
Senior Digital Accessibility Consultant
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/
Support the dreams of independence through employment for students with disabilities with your Amazon purchases.
https://smile.amazon.com/ch/83-0988251

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Elizabeth Thomas
Sent: Friday, April 29, 2022 4:35 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] Re: Reference to not add formatting attributes to Heading tags

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf
>> Of Piscitelli, JoAnn
>> Sent: 29 April 2022 16:26
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > on behalf
>> of Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
>> Date: Friday, April 29, 2022 at 11:22 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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%7C34485
>>> 6b
>>> bab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e87abeb5c%7C0%7C0
>>> %7
>>> C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQ
>>> Ij
>>> oiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=3
>>> 8B
>>> 7%2FTpPxKCrIA1275TzELsrQLoer8hH7%2BQqq4NNYg0%3D&amp;reserved=0
>>> List archives at
>>> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fweb
>>> ai
>>> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cjoann.piscitelli%40
>>> ya
>>> le.edu%7C344856bbab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e
>>> 87
>>> abeb5c%7C0%7C0%7C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoi
>>> MC
>>> 4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7
>>> C%
>>> 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%7C34485
>> 6bbab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3e87abeb5c%7C0%7C
>> 0%7C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLC
>> JQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdat
>> a8B7%2FTpPxKCrIA1275TzELsrQLoer8hH7%2BQqq4NNYg0%3D&amp;reserved=0
>> List archives at
>> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fweba
>> im.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cjoann.piscitelli%40
>> yale.edu%7C344856bbab874526009b08da29f41808%7Cdd8cbebb21394df8b4114e3
>> e87abeb5c%7C0%7C0%7C637868425601254600%7CUnknown%7CTWFpbGZsb3d8eyJWIj
>> oiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
>> C%7C%7C&amp;sdata=tLuamiTyZOs0ifgfjOdMUBOcGWHn9d%2BtG%2FG7Ic2yDOE%3D&
>> amp;reserved=0 >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>

From: Dave Comeau
Date: Mon, May 02 2022 1:02PM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

I think PDF/UA-2 is planning to relax the strict rules around skipping heading levels, so it should be consistent with WCAG....recommended best practice, but not required.

DC
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Laura Roberts < = EMAIL ADDRESS REMOVED = >
Sent: April 30, 2022 9:07 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] Re: Reference to not add formatting attributes to Heading tags

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe. If you feel that the email is suspicious, please report it using PhishAlarm.


It's interesting that skipping heading levels will fail PAC3 in a PDF, but
not WCAG (although it is strongly discouraged).

On Fri, Apr 29, 2022, 2:03 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> Mark, that's an interesting situation. I understand the desire to have
> consistent heading levels and the last troubleshooting section is indeed at
> an h3 level compared to the other h3s, but I would probably make *all* the
> troubleshooting sections h4s so that I can always find them using the '4'
> screen reader shortcut key, even if that means a heading level is skipped
> (an h2 followed by an h4). That's just a personal choice but I would find
> it easier to use the '4' shortcut to find a troubleshooting section then
> use Shift+H to hear the heading that is immediately previous to the
> troubleshooting section so that I have context.
>
> But to address JoAnn's original question, I agree with Patrick that, in
> general, <strong> or <em> can be used in a heading without any trouble and
> I have never heard that it shouldn't be done. But I presume the text you
> want to emphasize with <strong> has a particular meaning? That is, you
> want to emphasize part of the heading more than the other parts of the
> heading? Depending on *why* you want to emphasize part of it, you might
> have to convey that same importance to assistive technology too. While
> <strong> is a semantic element, by default, a screen reader doesn't do
> anything special with it so the user might not know it's there. The user
> can certainly turn on formatting options with the screen reader so that
> changes in fonts can be announced, but I don't know how often that's done.
>
> I hate the "it depends" answers but that seems to apply here. It depends
> on why you want to emphasize part of the heading.
>
> <h2>some heading text <strong>that is really important</strong> that you
> should pay attention to</h2>
>
> <h2>some heading text <span class="sr-only">(please read carefully)</span>
> <strong>that is really important</strong> that you should pay attention
> to</h2>
>
> The second example tries to convey the importance with screen reader text
> but you almost need an "important text starts here" and an "end of
> important text" segment.
>
> But maybe that will spark some ideas.
> > > > >

From: Duff Johnson
Date: Mon, May 02 2022 1:55PM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | Next message →

> I think PDF/UA-2 is planning to relax the strict rules around skipping heading levels, so it should be consistent with WCAG....recommended best practice, but not required.

This is correct. Insofar as is possible, PDF/UA-2 eschews “content provisions” entirely, and focuses on syntax requirements, effectively deferring to other sources (e.g., WCAG) for recommendations regarding the author's content choices. Accordingly, the current draft of PDF/UA-2 allows a conforming document to include an illogical heading structure (e.g., skipped heading levels).

Duff.


> It's interesting that skipping heading levels will fail PAC3 in a PDF, but
> not WCAG (although it is strongly discouraged).
>
> On Fri, Apr 29, 2022, 2:03 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Mark, that's an interesting situation. I understand the desire to have
>> consistent heading levels and the last troubleshooting section is indeed at
>> an h3 level compared to the other h3s, but I would probably make *all* the
>> troubleshooting sections h4s so that I can always find them using the '4'
>> screen reader shortcut key, even if that means a heading level is skipped
>> (an h2 followed by an h4). That's just a personal choice but I would find
>> it easier to use the '4' shortcut to find a troubleshooting section then
>> use Shift+H to hear the heading that is immediately previous to the
>> troubleshooting section so that I have context.
>>
>> But to address JoAnn's original question, I agree with Patrick that, in
>> general, <strong> or <em> can be used in a heading without any trouble and
>> I have never heard that it shouldn't be done. But I presume the text you
>> want to emphasize with <strong> has a particular meaning? That is, you
>> want to emphasize part of the heading more than the other parts of the
>> heading? Depending on *why* you want to emphasize part of it, you might
>> have to convey that same importance to assistive technology too. While
>> <strong> is a semantic element, by default, a screen reader doesn't do
>> anything special with it so the user might not know it's there. The user
>> can certainly turn on formatting options with the screen reader so that
>> changes in fonts can be announced, but I don't know how often that's done.
>>
>> I hate the "it depends" answers but that seems to apply here. It depends
>> on why you want to emphasize part of the heading.
>>
>> <h2>some heading text <strong>that is really important</strong> that you
>> should pay attention to</h2>
>>
>> <h2>some heading text <span class="sr-only">(please read carefully)</span>
>> <strong>that is really important</strong> that you should pay attention
>> to</h2>
>>
>> The second example tries to convey the importance with screen reader text
>> but you almost need an "important text starts here" and an "end of
>> important text" segment.
>>
>> But maybe that will spark some ideas.
>> >> >> >> >>
> > > > > > > >

From: Laura Roberts
Date: Mon, May 02 2022 4:29PM
Subject: Re: Reference to not add formatting attributes to Heading tags
← Previous message | No next message

That's good to hear. Sometimes it makes sense in a document to skip a
subheading level.

On Mon, May 2, 2022 at 3:55 PM Duff Johnson < = EMAIL ADDRESS REMOVED = > wrote:

> > I think PDF/UA-2 is planning to relax the strict rules around skipping
> heading levels, so it should be consistent with WCAG....recommended best
> practice, but not required.
>
> This is correct. Insofar as is possible, PDF/UA-2 eschews “content
> provisions” entirely, and focuses on syntax requirements, effectively
> deferring to other sources (e.g., WCAG) for recommendations regarding the
> author's content choices. Accordingly, the current draft of PDF/UA-2 allows
> a conforming document to include an illogical heading structure (e.g.,
> skipped heading levels).
>
> Duff.
>
>
> > It's interesting that skipping heading levels will fail PAC3 in a PDF,
> but
> > not WCAG (although it is strongly discouraged).
> >
> > On Fri, Apr 29, 2022, 2:03 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Mark, that's an interesting situation. I understand the desire to have
> >> consistent heading levels and the last troubleshooting section is
> indeed at
> >> an h3 level compared to the other h3s, but I would probably make *all*
> the
> >> troubleshooting sections h4s so that I can always find them using the
> '4'
> >> screen reader shortcut key, even if that means a heading level is
> skipped
> >> (an h2 followed by an h4). That's just a personal choice but I would
> find
> >> it easier to use the '4' shortcut to find a troubleshooting section then
> >> use Shift+H to hear the heading that is immediately previous to the
> >> troubleshooting section so that I have context.
> >>
> >> But to address JoAnn's original question, I agree with Patrick that, in
> >> general, <strong> or <em> can be used in a heading without any trouble
> and
> >> I have never heard that it shouldn't be done. But I presume the text
> you
> >> want to emphasize with <strong> has a particular meaning? That is, you
> >> want to emphasize part of the heading more than the other parts of the
> >> heading? Depending on *why* you want to emphasize part of it, you might
> >> have to convey that same importance to assistive technology too. While
> >> <strong> is a semantic element, by default, a screen reader doesn't do
> >> anything special with it so the user might not know it's there. The
> user
> >> can certainly turn on formatting options with the screen reader so that
> >> changes in fonts can be announced, but I don't know how often that's
> done.
> >>
> >> I hate the "it depends" answers but that seems to apply here. It
> depends
> >> on why you want to emphasize part of the heading.
> >>
> >> <h2>some heading text <strong>that is really important</strong> that you
> >> should pay attention to</h2>
> >>
> >> <h2>some heading text <span class="sr-only">(please read
> carefully)</span>
> >> <strong>that is really important</strong> that you should pay attention
> >> to</h2>
> >>
> >> The second example tries to convey the importance with screen reader
> text
> >> but you almost need an "important text starts here" and an "end of
> >> important text" segment.
> >>
> >> But maybe that will spark some ideas.
> >> > >> > >> > >> > >>
> > > > > > > > > > > > > > > > >
> > > > >


--
Best regards,
Laura Roberts
413-588-8422