WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Speaking text through screen reader on webpage?

for

From: Joe Chidzik
Date: Apr 27, 2016 7:35AM

Hi Alex,

I suspect this is related to the CSS display: none declaration, which means this content will be removed from the reading order for your screenreader.

I suggest removing this display: none declaration to see if this allows the values to be announced by your screenreader. If this fixes it, then you can use some alternate CSS to hide the content visually, but leave it screenreader accessible. I typically use the following CSS declaration which you may find useful:

.sr-only {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

I picked this up from http://snook.ca/archives/html_and_css/hiding-content-for-accessibility which gives a breakdown of the CSS class and how it works.

Cheers
Joe


>