WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Speaking text through screen reader on webpage?

for

Number of posts in this thread: 4 (In chronological order)

From: Alex Hall
Date: Wed, Apr 27 2016 7:29AM
Subject: Speaking text through screen reader on webpage?
No previous message | Next message →

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 ADDRESS REMOVED =

From: Joe Chidzik
Date: Wed, Apr 27 2016 7:35AM
Subject: Re: Speaking text through screen reader on webpage?
← Previous message | Next message →

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 ADDRESS REMOVED = ]
> On Behalf Of Alex Hall
> Sent: 27 April 2016 14:29
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> > > http://webaim.org/discussion/archives
>

From: Jonathan Avila
Date: Wed, Apr 27 2016 7:48AM
Subject: Re: Speaking text through screen reader on webpage?
← Previous message | Next message →

> But I hear nothing. I know I must be missing something simple, but what?

Three comments:
* JAWS 17 I believe fixes a an issue with prior versions of JAWS in IE not announcing some live regions. So if you are using IE and JAWS it could be related to that. If you are using a different screen reader it may be useful to try different screen readers.
* As Joe pointed out it could be related to how you are hiding the content with display:none (depending on screen reader it should may work with display:none though
* An FYI The role of log is by default a live region a shouldn't require adding aria-live -- but you seem to be wanting to change the default "polite" threshold to "assertive" -- in theory that should work -- but I thought I'd point it out.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Alex Hall
Sent: Wednesday, April 27, 2016 9:29 AM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =

From: Alex Hall
Date: Wed, Apr 27 2016 7:54AM
Subject: Re: Speaking text through screen reader on webpage?
← Previous message | No next message

Thanks guys. The display:none was the problem after all, so I switched to
just using my visual div where I display the progress as the announcement
div. I should have said that I'm using the latest NVDA on the latest
Firefox.

As to datepickers, how do people handle speaking the value? It looks like
the text field to which the picker is attached isn't updated until the user
presses enter, so I can't just use the field as my element to speak. I
could always put the new value in the field by binding to the picker's
onChange event, but would that look odd visually? Is there a way of hiding
divs for use with screen readers only that doesn't involve so much CSS as
Joe sent? I can do it, but it seems like there's be a more elegant way by
now. A special ARIA tag that tells the browser to not display it, but to
keep it in the DOM? Thanks!

On Wed, Apr 27, 2016 at 9:48 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > But I hear nothing. I know I must be missing something simple, but what?
>
> Three comments:
> * JAWS 17 I believe fixes a an issue with prior versions of JAWS in IE not
> announcing some live regions. So if you are using IE and JAWS it could be
> related to that. If you are using a different screen reader it may be
> useful to try different screen readers.
> * As Joe pointed out it could be related to how you are hiding the content
> with display:none (depending on screen reader it should may work with
> display:none though
> * An FYI The role of log is by default a live region a shouldn't require
> adding aria-live -- but you seem to be wanting to change the default
> "polite" threshold to "assertive" -- in theory that should work -- but I
> thought I'd point it out.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Alex Hall
> Sent: Wednesday, April 27, 2016 9:29 AM
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> > > at http://webaim.org/discussion/archives
> > > > > >



--
Alex Hall
Automatic Distributors, IT department
= EMAIL ADDRESS REMOVED =