0

I'm working on a website that uses an acronym across the board ("DoIT", pronounced "do it"). Unfortunately, screen readers for the visually impaired read the acronym wrong ("duh-I.T.").

I'm thinking there are one of two solutions:

  1. find every element ever across the website (HTML5) that uses "DoIT" and somehow add something that says to the screen reader to not read the displayed text but an alternative text which replaces "DoIT" with "do it" … Which I have no idea how that would be even done …

  2. add some type of script that, when a screen reader is being used, replaces the word "DoIT" with "do it" → something that I don't know how to do.

There is a lot of text throughout the site, paragraphs, headers, pictures, etc. I know I could use an alt attribute in some places, but not all, like:

<h3 alt="Test for do it">Test for DoIT</h3>

Should I use some combo of tags (span, label, alt), or does something better exist already that I couldn't find immediately?

TylerH
  • 20,799
  • 66
  • 75
  • 101
katiea
  • 223
  • 1
  • 5
  • 19

2 Answers2

4

If "DoIT" is an acronym, you should, for start, mark it as such (we'd use <acronym> but it has been deprecated in HTML5, so let's use the alternative: <abbr>DoIT</abbr>).

Then you can use the title attribute to: a) mark what the acronym actually means, or b) mark it how you want it to be read (<abbr title="Do it">DoIT</abbr>).

Screen reader users can typically set how they want their acronyms and abbreviations be read to them (either by "trying to pronounce it", letter-by-letter, or by its title attribute).

In case you don't want to change the look for normal website viewing, just add some CSS rule like: abbr[title] { border-bottom-width: 0; font-variant: none; }

Jcl
  • 27,696
  • 5
  • 61
  • 92
  • I attempted to use the tag. The screen reader simply paused before reading it, and hitting tab simply read the displayed text, not the title... I'm using NVDA, which I am new to. Would this be because I did not set it properly - like you are suggesting can be done? – katiea Apr 06 '15 at 05:39
  • @katiea I honestly don't know... I did something similar (using and not ) many years ago, and was told that screen reader users could make it change the way it was read to them: I have never used them myself – Jcl Apr 06 '15 at 05:41
  • 1
    @katiea according to [this url](http://community.nvda-project.org/ticket/3828), it seems it won't work as you expect it with NVDA, According to [this one](http://webaim.org/discussion/mail_thread?thread=6142), JAWS has an option ("expand abbreviations"). I guess it all boils down to the screen reader specific implementation... I doubt there's a default that does it as you expect in all readers: best you can do is provide the most appropiate markup. Most documentation says to use `` (instead of ``) for your specific case, but it has sadly been deprecated, so I don't know. – Jcl Apr 06 '15 at 11:03
  • I was reading about , it's too bad it's been deprecated. I'm going to stick with for now and test changing the default settings for NVDA.. I'll leave this question up for another day just in case someone else thinks of a better solution, but it does seem like would be the best approach currently. – katiea Apr 06 '15 at 16:28
  • @katiea "deprecation" doesn't instantly mean "don't use it if there's no alternative"... I mean... if `` does work for now, use it and expect screen readers update. That's why browsers have retro-compatibility :-) – Jcl Apr 06 '15 at 16:39
  • 2
    Customer was happy with tag. Thank you for your help in understanding more about ARIA standards and versus tags, @Jcl! – katiea Apr 08 '15 at 16:00
3

You could use an attribut aria-label

<h3 aria-label="Test for do it">Test fir Doit</h3>
halna frédéric
  • 238
  • 2
  • 3
  • 11
  • I'm using NVDA - adding the aria label did not result in the correct reading. I'm unsure as to the reason why.... But thank you for the suggestion - It looks very promising, and I'm wondering if I am simply missing something obvious... – katiea Apr 06 '15 at 05:48
  • try to use an aria-hidden true on the text `

    `     – halna frédéric Apr 07 '15 at 16:19