WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: role="alert" now in div but still not being read by NVDA

for

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

From: Angela French
Date: Thu, May 16 2013 3:48PM
Subject: role="alert" now in div but still not being read by NVDA
No previous message | Next message →

>Subject: Re: [WebAIM] Another example of role="alert" not being read by NVDA
>
>I would question the use of a role in a span tag.
>
>Have you tried replacing it with a block element like <p> or <div> and see if it
>works then? We have come across issues when employing the span tag, which is
>really more for styling, for purposes other than style.
>
>
Susan,
We put the error in a <div> tag and still it does not alert the user. Is there any way that the user can discover this error message by have the screen reader read what is on the page? I tried with NVDA (IE9 and FF 20) but I am having trouble making it read anything outside of the form once it is in it.
Would it be possible to test it for me?
http://168.156.9.250/GEDVerify/default.aspx

From: Paul J. Adam
Date: Thu, May 16 2013 4:06PM
Subject: Re: role="alert" now in div but still not being read by NVDA
← Previous message | Next message →

I think you may need to inject the error text into the alert container AFTER they do a bad submit, currently the text is always present there, just set to display:none.

Paul J. Adam
Accessibility Evangelist
www.deque.com

On May 16, 2013, at 4:48 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

>
>> Subject: Re: [WebAIM] Another example of role="alert" not being read by NVDA
>>
>> I would question the use of a role in a span tag.
>>
>> Have you tried replacing it with a block element like <p> or <div> and see if it
>> works then? We have come across issues when employing the span tag, which is
>> really more for styling, for purposes other than style.
>>
>>
> Susan,
> We put the error in a <div> tag and still it does not alert the user. Is there any way that the user can discover this error message by have the screen reader read what is on the page? I tried with NVDA (IE9 and FF 20) but I am having trouble making it read anything outside of the form once it is in it.
> Would it be possible to test it for me?
> http://168.156.9.250/GEDVerify/default.aspx
>
>
>
> > >

From: Greg Wocher
Date: Thu, May 16 2013 6:21PM
Subject: Re: role="alert" now in div but still not being read by NVDA
← Previous message | Next message →

Hello,
I am using the latest versions of NVDA and JAWS14 and I can see an error
when I first navigate to the fields as well as when I put in a wrong
address or password. Also, I keep getting an script error on the page.
I keep having to tell it to run inspite of the script error.

Thanks,
Greg Wocher

Follow me on Twitter @GWocher

On 5/16/2013 5:48 PM, Angela French wrote:
>> Subject: Re: [WebAIM] Another example of role="alert" not being read by NVDA
>>
>> I would question the use of a role in a span tag.
>>
>> Have you tried replacing it with a block element like <p> or <div> and see if it
>> works then? We have come across issues when employing the span tag, which is
>> really more for styling, for purposes other than style.
>>
>>
> Susan,
> We put the error in a <div> tag and still it does not alert the user. Is there any way that the user can discover this error message by have the screen reader read what is on the page? I tried with NVDA (IE9 and FF 20) but I am having trouble making it read anything outside of the form once it is in it.
> Would it be possible to test it for me?
> http://168.156.9.250/GEDVerify/default.aspx
>
>
>
> > > >

From: Greg Gamble
Date: Fri, May 17 2013 9:23AM
Subject: Re: role="alert" now in div but still not being read by NVDA
← Previous message | Next message →

Greg,
What script error are you getting? I'm not seeing any errors when I test and validate ...

The error message when entering the text field is probably from the describedby tag, which I was under the impression that using display:none it will not be read by AT?

Greg

From: Greg Gamble
Date: Fri, May 17 2013 9:53AM
Subject: Re: role="alert" now in div but still not being read by NVDA
← Previous message | Next message →

I'm now inserting the text and making the div visible via jQuery ... html is solid but still no notification. The alert is showing and is both readable by NVDA and visible. Very frustrating ..

Greg

From: Bryan Garaventa
Date: Fri, May 17 2013 11:30AM
Subject: Re: role="alert" now in div but still not being read by NVDA
← Previous message | Next message →

If you would like to use the script I mentioned earlier, it does work for
this purpose.
This is the one at http://whatsock.com/tmp/unobtrusive_announce.js.txt

No problem if not, but it's quite easy to use.

E.G

This is a jQuery script, so you just load it normally...
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="unobtrusive_announce.js"></script>

Since this is a pared down version, you can then use the announce method
like so:

announce("Error message one");

Or

announce( errorContainerDOMNode );

Or to suppress repeats

announce( "Whatever", null, true);

All of the AccDC modules work this way.

Or you can take it apart and make something else, whatever you like.

This technique does work reliably in IE, FF, Chrome, and Safari however.





----- Original Message -----
From: "Greg Gamble" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, May 17, 2013 8:53 AM
Subject: Re: [WebAIM] role="alert" now in div but still not being read by
NVDA


> I'm now inserting the text and making the div visible via jQuery ... html
> is solid but still no notification. The alert is showing and is both
> readable by NVDA and visible. Very frustrating ..
>
> Greg
>

From: Greg Gamble
Date: Fri, May 17 2013 4:30PM
Subject: Re: role="alert" now in div but still not being read byNVDA
← Previous message | No next message

Bryan

I got it to work ... kind of.



I'm using jQuery as shown ... $('#ErrorMsg').attr('role', 'alert').show('').html('Email or password incorrect');



$('#ErrorMsg') is the hidden div I'm showing: <div id="ErrorMsg" class="alert alert-error hide"></div>



The show() is taking the hidden div tag and bringing it to visibility with a display:block. Only after I added an empty string to the show() method does NVDA now recognize the div tag and read the role=alert.



I'm still trying to find out what the difference is between .Show() and .Show('') is.



Looking at your code from unobtrusive_announce.js.txt, I see your basically creating a hidden alert box, and injecting the text to be announced. That got me thinking on why my code was not working. I guess I should see if I can create some kind of helper method for all the validator functions so they do something along the same lines ....



Thanks for the help ...



Greg Gamble
Information ServicesWashington State Board for Community & Technical Colleges
1300 Quince St SE | PO Box 42495 | Olympia, Washington 98504
p: (360) 704-4376
e: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | www.sbctc.edu<;http://www.sbctc.edu/>;