WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: simple example of 3 input items which are to be addedtogether

for

From: Jonathan Avila
Date: Jan 13, 2015 1:30PM

Here is an article I found useful on some aria-live tricks from Steve Falkner.
http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/

Jonathan

-- 
Jonathan Avila 
Chief Accessibility Officer
SSB BART Group 
<EMAIL REMOVED>
Phone 703.637.8957  
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Monday, January 12, 2015 5:22 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] simple example of 3 input items which are to be added together

Greetings.

aria-live works on the inner span certainly, but for a live region you probably want the context as a user ((i.e. screen reader saying "sum 6" rather than "6").
Ideally this should be configurable by the user of course.
My main point was that role="status" does not respect the aria-atomic property for some reason, and the screen reader support appears spotty, so aria-live="polite" and aria-atomic="true" is better supported.
Cheers

On 1/12/15, Jonathan Avila < <EMAIL REMOVED> > wrote:
> Birkir and Suzzie, I've run into situations where I had to use
> aria-live on the inner span and the outer div
>
> Jon
>
> Sent from my iPhone
>
>> On Jan 12, 2015, at 3:45 PM, Birkir R. Gunnarsson
>> < <EMAIL REMOVED> > wrote:
>>
>> This is actually the recommended way to present the status role,
>> where one element on a page updates in response to changes in other
>> elements on the page.
>> Tehre are a few drawbacks:
>> role="status" does not work so well for Jaws unfortunately.
>> aria-labelledby, while semantically valid, is not going to be
>> announced by most screen readers, because usually aria-labelledby or
>> aria-label are not considered to be used on divs or spans without a
>> specific role.
>>
>> For the output span I would put it inside a div, and put
>> aria-live="polite" and aria-atomic="true" on it
>>
>> <div aria-live="polite" aria-atomic="true" role="region"
>> aria-labelledby="Result">
>> <span id="sumLabel">Sum: </span>
>> <span id="outputId"> </span>
>> </div>
>>
>> This is just from quickly glancing over the code, not testing it.
>> hth
>>
>> On 1/12/15, Stanzel, Susan - FSA, Kansas City, MO
>> < <EMAIL REMOVED> > wrote:
>>> Hi Listers,
>>>
>>> I have been asked to look at a simple example which is supposed to
>>> have the tester key in 3 numbers which are to be added together. I
>>> am not an html expert. When I try this it reads the whole thing and
>>> I hear the edit boxes.
>>> The cursor is placed at the "s" of the word "Sum:". I then have to
>>> shift tab to get back into the first box. After I have keyed in the
>>> numbers 1, 2, and
>>> 3 nothing seems to happen. I am told by a sighted user he sees the
>>> number 6.
>>>
>>> If anyone has a minute to look at the following lines of code the
>>> problems might be evident.
>>>
>>> I am using Windows 7 with JAWS 15.
>>>
>>> The code follows my name.
>>>
>>> Thanks in advance for any assistance. I am supposed to meet with the
>>> author tomorrow.
>>>
>>> Susie Stanzel
>>>
>>> 1. <!DOCTYPE html>
>>> 2.
>>> 3. <html>
>>> 4.
>>> 5. <head>
>>> 6.
>>> 7. <title>Output test</title>
>>> 8.
>>> 9. </head>
>>> 10.
>>> 11. <body>
>>> 12.
>>> 13. <form method="post" action="#">
>>> 14.
>>> 15. <label for="input1Id">Input
>>> 1:</label>
>>> 16.
>>> 17. <input id="input1Id"
>>> aria-controls="outputId" type="text"> 18.
>>> 19. <br>
>>> 20.
>>> 21. <label for="input2Id">Input
>>> 2:</label>
>>> 22.
>>> 23. <input id="input2Id" type="text"
>>> aria-controls="outputId" >
>>> 24.
>>> 25. <br>
>>> 26.
>>> 27. <label for="input3Id">Input
>>> 3:</label>
>>> 28.
>>> 29. <input id="input3Id" type="text"
>>> aria-controls="outputId">
>>> 30.
>>> 31. <hr>
>>> 32.
>>> 33. <span id="sumLabel">Sum:</span>
>>> 34.
>>> 35. <span id="outputId" role="status"
>>> aria-live="polite" aria-labeledby="sumLabel"> 36.
>>> 37. </span>
>>> 38.
>>> 39. </form>
>>> 40.
>>> 41. <script type="text/javascript">
>>> 42.
>>> 43. var inputIds = ["input1Id",
>>> "input2Id",
>>> "input3Id"];
>>> 44.
>>> 45. function handleBlur()
>>> 46.
>>> 47. {
>>> 48.
>>> 49. var output =
>>> document.getElementById("outputId");
>>> 50.
>>> 51. var sum = 0;
>>> 52.
>>> 53. for (var i = 0; i <
>>> inputIds.length; i++)
>>> 54.
>>> 55. {
>>> 56.
>>> 57. var inputId =
>>> inputIds[i];
>>> 58.
>>> 59. var input =
>>> document.getElementById(inputId);
>>> 60.
>>> 61. var value =
>>> parseInt(input.value, 10);
>>> 62.
>>> 63. if (! isNaN(value))
>>> 64.
>>> 65. {
>>> 66.
>>> 67. sum += value;
>>> 68.
>>>
>>>
>>>
>>>
>>>
>>> This electronic message contains information generated by the USDA
>>> solely for the intended recipients. Any unauthorized interception of
>>> this message or the use or disclosure of the information it contains
>>> may violate the law and subject the violator to civil or criminal
>>> penalties. If you believe you have received this message in error,
>>> please notify the sender and delete the email immediately.
>>> >>> >>> list messages to <EMAIL REMOVED>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> list messages to <EMAIL REMOVED>
> > > list messages to <EMAIL REMOVED>
>


--
Work hard. Have fun. Make history.