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 1:43PM

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.