WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: speaking string when element gets focus?

for

From: Birkir R. Gunnarsson
Date: May 11, 2016 6:32PM

Hi

What you are asking is a little bit tricky actually.
It is easy to associate a focusable element with a string, you do this
by using the aria-describedby attribute pointing to the ID attribute
of the element containing the string you wish the screen reader to
announce.
E.g.
<a href="#" aria-describedby="foo">Website</a>
<span id="foo">I recommend this website</div>
Screen readers will announce the text in the link followed by "I
recommend this website", in this case.
"Foo I recommend this website".
Make sure never to use aria-describedby to provide the accessible name
for an element (in the example above, you cannot provide an empty link
with aria-describedby pointing to foo), an accessible description is
different from an accessible name.
Also note that aria-describedby will cause screen readers to announce
the content of your element, even when you hide it using display:
none.

The problem in your case is that screen reader users exploring a table
rarely do so using the tab key.
aria-describedby is valid on td cells, and some screen readers might
announce it when the users use screen reader navigation keys
(ctrl-alt-arrow keys) to navigate between cells in the table, but
others will probably not.
If user navigates the table in the screen reader virtual buffer with
the arrow keys it is highly unlikely that the aria-describedby target
is ever spoken.
You can try to use aria-describedby="id of string element" on your th
or td cells and see if they get spoken.
Just put aria-describedby="foo" on your table cells, create an element
with id="foo" and put some text in it, then test away.

A very quick test showed that it works in Jaws with Firefox, but I
have not yet had time to look at other a.t./browser combinations.
hth
-Birkir


On 5/11/16, Alex Hall < <EMAIL REMOVED> > wrote:
> Hey all,
> I was just wondering if there's a way to have a string spoken when focus
> lands on a certain element. For instance, I have a webpage that displays
> the results of a database lookup. It color-codes the table rows--red for
> errors in the shipment, blue for overweight boxes, etc. It struck me that
> having the screen reader say "has errors" when focus lands on a row with
> errors, for instance, would be useful for me.
>
> My first thought is something like:
> $("tr.hasErrors").on("focus", function() {
> $(divForSpeaking).val("has errors");
> });
>
> But I don't know if that would do what I'm after. I don't want this per
> cell, only per row. That is, if I move to the row, no matter on which cell
> I land, I'd hear "has errors". As I move from cell to cell within that row,
> though, I hear nothing. I also don't know if there's a better way to do
> this, something like an img tag's alt attribute, but for screen readers to
> speak when they land on an item?
>
> --
> Alex Hall
> Automatic Distributors, IT department
> <EMAIL REMOVED>
> > > > >


--
Work hard. Have fun. Make history.