WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: speaking string when element gets focus?

for

From: Alex Hall
Date: May 11, 2016 8:00PM

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 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 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.
> > > >