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 12, 2015 2:55PM

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.
>> >> >> >
>
> --
> Work hard. Have fun. Make history.
> > >