CODEWITHSUNDEEP
accessibilitywai-aria
J P
J P

Reputation: 551

Making headings that have interesting formatting readable by screen readers

Say you want to stylise some heading tags to make them "01_Hosting" instead of "1. Hosting", how do you make this accessible to screen readers?

Take the snippet:

<div class="section">
  <div class="section__title">
    <h2>04_Hosting</h2>
    <h3>speedy</h3>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

With styling like:

small 04_HOSTING tag black background, above speedy title

I initially thought to do

<h2 aria-label="4. Hosting">04_Hosting</h2>

but afaik aria-label is meant for interactive elements only. I also tried it with my screen reader (Orca) and it ignored the label.

Upvotes: 1

Views: 141

Answers (2)

J P
J P

Reputation: 551

It's probably not a good idea to tell the numbers to screen reader users as the heading number will be read out as well, and the number is not likely to be hugely relevant.

If it is really important you can do

<h2 class="accent-heading">
  <span aria-hidden=true>0</span>4<span aria-hidden=true>_</span>
  Hosting
</h2>

Otherwise, this can probably be solved simply with

<h2 class="accent-heading"><span aria-hidden="true">04_</span>Hosting</h2>

Upvotes: 1

J P
J P

Reputation: 551

<h2 class="accent-heading" aria-hidden="true">04_Hosting</h2>
<h2 class="sr-only">4. Hosting</h2>

.sr-only {
  height: 1px; 
  width: 1px; 
  position: absolute; 
  overflow: hidden; 
  top: -10px; 
}

Seems like a possible solution inspired by https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/C7

However, this seems to be bad practice as I get the warning

A11y: h2 element should not be hidden | svelte(a11y-hidden)

Upvotes: 0

Related Questions