0

How can I force a screen reader to read M as Monday? (using https://www.nvaccess.org) I would like to have it more WCAG friendly

Problems:

  1. div don't support aria-label (https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/)
  2. M isn't clickable (so I shouldn't use button etc.)
  3. no space for full name (Monday)

code and visual:

<section>
  <div  aria-label="Monday">M</div>
  <div  aria-label="Tuesday">T</div>
  ..
</section>

enter image description here

QuentinC
  • 12,311
  • 4
  • 24
  • 37
Tomas Kanok
  • 105
  • 10
  • 2
    This question is perfectly valid as is. It's asking about hidden text for screen readers which is a common question. I have a solution for this but there's not enough room in the comment section to provide it. Please reopen the question. I up-voted it. – slugolicious Mar 04 '22 at 17:10
  • 1
    `
    Monday
    ` See https://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3 for a definition of the `sr-only` class.     – slugolicious Mar 04 '22 at 17:12
  • 1
    I have voted to re-open this question. I don't understand well why it has been closed in the first place, as it's a perfectly valid one. – QuentinC Mar 04 '22 at 17:22
  • I have also voted to re-open—it's clear and valid. – Sean Mar 04 '22 at 17:39
  • It could do with more information about which screen readers this was being tested in. – Quentin Mar 04 '22 at 17:42
  • Probably cause to use `` here, but I don't know how screen readers handle it. – Quentin Mar 04 '22 at 17:43
  • I edited a question to be more specific. That's why it looks fine now – Tomas Kanok Mar 05 '22 at 18:18

1 Answers1

1

The wording of your question suggests using <abbr>. You may use it, but in this case you cannot force screen readers to always read the full expanded text instead of the abbreviation.

Screen readers generally provide options whether to expand abbreviations all the time automatically, only on demand, depending on context, or never. This is something under control of the user, who can choose what is the best for him/her. You shouldn't dictate it at his/her place.

However, looking at your particular case, you are in fact probably not looking for abbreviation and <abbr>. As you have well identified, you are more looking for a kind of label that has to be read full text all the time.

As you have well identified too, you can't use aria-label, since aria-label is reserved for interactive elements, what your element is precisely not.

IN that kind of circunstances when you need a kind of label outside of interactive elements, a good solution is to use visually hidden text, like this:

<div>
<span aria-hidden="true">M</span>
<span class="sr_only">Monday</span>
</div>

Where sr_only is a CSS class which puts the text off screen. You can find the CSS code of .sr_only in bootstrap. Many other frameworks have similar visually hidden text CSS classes with other names.

QuentinC
  • 12,311
  • 4
  • 24
  • 37