E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

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

Number of posts in this thread: 7 (In chronological order)

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Mon, Jan 12 2015 1:19PM
Subject: simple example of 3 input items which are to be added together
No previous message | Next message →

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.

From: Paul J. Adam
Date: Mon, Jan 12 2015 1:37PM
Subject: Re: simple example of 3 input items which are to be added together
← Previous message | Next message →

The span#outputId element's accessible name is overridden by span#sumLabel because it says that outputId should be aria-labelledby="sumLabel". I'm not sure the screen reader would read that correctly if it's not an input. Since it's a span it likely has to reference itself also like <span id="outputId" aria-labelledby="sumLabel outputId">6</span>

Live demo would be easier to debug or a code snippet without all the line number so I could paste into a test page.

Hard to know for sure without a working demo to test.

Paul J. Adam
Accessibility Evangelist
www.deque.com <http://www.deque.com/>;
> On Jan 12, 2015, at 2:19 PM, Stanzel, Susan - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = > wrote:
>
> <span id="sumLabel">Sum:</span>
> 34.
> 35. <span id="outputId" role="status" aria-live="polite" aria-labeledby="sumLabel">
> 36.
> 37. </span>

From: Birkir R. Gunnarsson
Date: Mon, Jan 12 2015 1:43PM
Subject: Re: simple example of 3 input items which are to be added together
← Previous message | Next message →

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

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Mon, Jan 12 2015 2:32PM
Subject: Re: simple example of 3 input items which are to be addedtogether
← Previous message | Next message →

Thank you to both Paul and Birkir. We are going to play with the code. I got it by simply going to the view and getting the source.

We might have more questions before our meeting tomorrow.

Susie Stanzel

From: Jonathan Avila
Date: Mon, Jan 12 2015 2:55PM
Subject: Re: simple example of 3 input items which are to be addedtogether
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Mon, Jan 12 2015 3:21PM
Subject: Re: simple example of 3 input items which are to be added together
← Previous message | Next message →

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

From: Jonathan Avila
Date: Tue, Jan 13 2015 1:30PM
Subject: Re: simple example of 3 input items which are to be addedtogether
← Previous message | No next message

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 ADDRESS REMOVED =
Phone 703.637.8957
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter