WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: adding of three numbers still not working

for

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

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Thu, Jan 15 2015 5:32AM
Subject: adding of three numbers still not working
No previous message | Next message →

Hi Listers,

Birkir and some other people have helped some, but this is still not working. It actually works much better in FireFox. I have JAWS 15 IE 9 with Windows7. Any help would be greatly appreciated.

Susie

Here is the source:

<!DOCTYPE html>
<html>
<head>
<title>Output test</title>
</head>
<body>
<form method="post" action="#">
<label for="input1Id">Input 1:</label>
<input id="input1Id" aria-controls="outputId" type="text">
<br>
<label for="input2Id">Input 2:</label>
<input id="input2Id" type="text" aria-controls="outputId" >
<br>
<label for="input3Id">Input 3:</label>
<input id="input3Id" type="text" aria-controls="outputId">
<hr>
<div aria-live="polite" aria-atomic="true" role="region"
aria-labelledby="Result">

<span id="sumLabel">Sum: </span>
<span id="outputId" >
</span>
</div>
</form>
<script type="text/javascript">
var inputIds = ["input1Id", "input2Id", "input3Id"];
function handleBlur()
{
var output = document.getElementById("outputId");
var sum = 0;
for (var i = 0; i < inputIds.length; i++)
{
var inputId = inputIds[i];
var input = document.getElementById(inputId);
var value = parseInt(input.value, 10);
if (! isNaN(value))
{
sum += value;
}
}
output.removeChild(output.firstChild);
var text = document.createTextNode(sum);
output.appendChild(text);
}



var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)
{
inputs[i].addEventListener("blur", handleBlur);

}
document.getElementById("input1Id").focus();
</script>
</html>






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: Lynn Holdsworth
Date: Thu, Jan 15 2015 6:57AM
Subject: Re: adding of three numbers still not working
← Previous message | No next message

Hi Suzie,

Try this. It's a bit draconian as it uses the ALERT role, but it seems
to work in the AT/browser combo you're using.

Your ARIA label wasn't working, so I removed it and added the word
"Sum" to the text node that gets created at the end, and applied the
ALERT role to that node's container.

It still needs a bit of work to make it behave just how you want it
to, but it kind of works.



http://behindtheyellowline.org.uk/addNumbersAlert.html

... And here's a polite version:

http://behindtheyellowline.org.uk/addNumbersPolite.html

Cheers, Lynn

On 15/01/2015, Stanzel, Susan - FSA, Kansas City, MO
< = EMAIL ADDRESS REMOVED = > wrote:
> Hi Listers,
>
> Birkir and some other people have helped some, but this is still not
> working. It actually works much better in FireFox. I have JAWS 15 IE 9 with
> Windows7. Any help would be greatly appreciated.
>
> Susie
>
> Here is the source:
>
> <!DOCTYPE html>
> <html>
> <head>
> <title>Output test</title>
> </head>
> <body>
> <form method="post" action="#">
> <label for="input1Id">Input 1:</label>
> <input id="input1Id" aria-controls="outputId"
> type="text">
> <br>
> <label for="input2Id">Input 2:</label>
> <input id="input2Id" type="text"
> aria-controls="outputId" >
> <br>
> <label for="input3Id">Input 3:</label>
> <input id="input3Id" type="text"
> aria-controls="outputId">
> <hr>
> <div aria-live="polite" aria-atomic="true"
> role="region"
> aria-labelledby="Result">
>
> <span id="sumLabel">Sum: </span>
> <span id="outputId" >
> </span>
> </div>
> </form>
> <script type="text/javascript">
> var inputIds = ["input1Id", "input2Id", "input3Id"];
> function handleBlur()
> {
> var output =
> document.getElementById("outputId");
> var sum = 0;
> for (var i = 0; i < inputIds.length; i++)
> {
> var inputId = inputIds[i];
> var input =
> document.getElementById(inputId);
> var value = parseInt(input.value, 10);
> if (! isNaN(value))
> {
> sum += value;
> }
> }
> output.removeChild(output.firstChild);
> var text = document.createTextNode(sum);
> output.appendChild(text);
> }
>
>
>
> var inputs = document.getElementsByTagName("input");
> for (var i = 0; i < inputs.length; i++)
> {
> inputs[i].addEventListener("blur", handleBlur);
>
> }
> document.getElementById("input1Id").focus();
> </script>
> </html>
>
>
>
>
>
>
> 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.
> > > >