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