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


> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
> On Behalf Of Alex Hall
> Sent: 27 April 2016 14:29
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Speaking text through screen reader on webpage?
>
> Hello list,
> I'm making an internal webpage for the place I work, and I'm the only screen
> reader user. To make my life easier, I'd like to speak messages through my
> screen reader as Ajax-driven events happen. I can't get this to work, though.
> My div looks like this:
>
> div id="announcement" style="display: none;" aria-live="assertive"
> role="log" aria-relevant="additions" aria-atomic="true"></div
>
> (I've removed the first and last symbols so this doesn't render in this
> email.) I then use this in JS, having already included JQuery:
>
> $("#announcement").empty();
> $("#announcement").append("Test message.");
>
> But I hear nothing. I know I must be missing something simple, but what?
> Ideally, once this works, I'd like to attach my two datepickers to it so I can
> hear the date being selected as well. Thanks for any ideas.
>
> --
> Alex Hall
> Automatic Distributors, IT department
> <EMAIL REMOVED>
> > > http://webaim.org/discussion/archives
>