WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jan 12, 2015 3:21PM

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


--
Work hard. Have fun. Make history.