Pronounce “DoIT” as “do it” for screen readers and the visually impaired

眉间皱痕 提交于 2019-12-10 00:12:30

问题


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 …


回答1:


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




回答2:


You could use an attribut aria-label

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


来源:https://stackoverflow.com/questions/29465033/pronounce-doit-as-do-it-for-screen-readers-and-the-visually-impaired

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!