Pronounce “DoIT” as “do it” for screen readers and

Question

I'm working on an interesting problem and would like some input.

The problem is thus: 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.

I thought I would ask the great Stack Overflow community how they think I should approach this problem. 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>

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

Just looking for a place to start. The great Google didn't offer much …

Answer 1

You could use an attribut aria-label

<h3 aria-label="Test for do it">Test fir Doit</h3>

Answer 2

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