E-mail List Archives
Thread: speaking string when element gets focus?
Number of posts in this thread: 3 (In chronological order)
From: Alex Hall
Date: Wed, May 11 2016 1:12PM
Subject: speaking string when element gets focus?
No previous message | Next message →
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 ADDRESS REMOVED =
From: Birkir R. Gunnarsson
Date: Wed, May 11 2016 6:32PM
Subject: Re: speaking string when element gets focus?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> > > > >
--
Work hard. Have fun. Make history.
From: Alex Hall
Date: Wed, May 11 2016 8:00PM
Subject: Re: speaking string when element gets focus?
← Previous message | No next message
Thanks. I'm only doing this for myself, though I'd of course like to learn how to do it as universally as possible. I'll give this a try tomorrow. No, I'm not tabbing, I'm using the ctrl-alt-arrows you mentioned. I'm using NVDA with Firefox.
> On May 11, 2016, at 20:32, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >