Comments on: Easy ARIA tip #3: aria-invalid and role “alert” http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/ Musings, tips and tricks about the accessible software world Wed, 08 Feb 2012 00:45:05 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: From WAI-ARIA to HTML5 and back…or maybe not? « Marco’s accessibility blog http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-259212 From WAI-ARIA to HTML5 and back…or maybe not? « Marco’s accessibility blog Mon, 05 Dec 2011 12:01:21 +0000 http://www.marcozehe.de/?p=42#comment-259212 [...] base for my talk is my third easy ARIA tip, where I enhanced a form with some basic local form validation to help users fill it out and avoid [...] [...] base for my talk is my third easy ARIA tip, where I enhanced a form with some basic local form validation to help users fill it out and avoid [...]

]]> By: Lynn Holdsworth http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-23123 Lynn Holdsworth Thu, 08 Oct 2009 11:59:03 +0000 http://www.marcozehe.de/?p=42#comment-23123 Just a few points to pick up on: Although the alert is semantically more correct here, the ARIA-Live="assertive" attribute currently works better in both Jaws and NVDA. On the error-checking subject, in the interest of data integrity I'd say server-side checking is absolutely essential. If the same server-side code can be reused for client-side AJAX-based checks, so much the better. Just a few points to pick up on:

Although the alert is semantically more correct here, the ARIA-Live=”assertive” attribute currently works better in both Jaws and NVDA.

On the error-checking subject, in the interest of data integrity I’d say server-side checking is absolutely essential. If the same server-side code can be reused for client-side AJAX-based checks, so much the better.

]]> By: Marco http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-22394 Marco Sat, 26 Sep 2009 05:43:50 +0000 http://www.marcozehe.de/?p=42#comment-22394 Well, the alert is basically an assertie live region. This is implicitly implied by the role of "alert". Normally, a screen reader should act the same here: Interrupt anything and speak the assertive live message immediately. NVDA doesn't support that distinction in its current release yet. That's why it works differently right now. Well, the alert is basically an assertie live region. This is implicitly implied by the role of “alert”. Normally, a screen reader should act the same here: Interrupt anything and speak the assertive live message immediately. NVDA doesn’t support that distinction in its current release yet. That’s why it works differently right now.

]]> By: William Gates http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-22352 William Gates Fri, 25 Sep 2009 16:18:50 +0000 http://www.marcozehe.de/?p=42#comment-22352 The alert works well. My concern was that the user doesn't know which input they are in after they have tabbed. A colleague, Lynn Holdsworth, has suggested giving the dynamically created alert div an aria-live attribute as in: newAlert.setAttribute("aria-live", "assertive"); instead of role="alert". We know it's not ideal markup, but both the 'alert' message and the label are announced. What do you think? The alert works well. My concern was that the user doesn’t know which input they are in after they have tabbed. A colleague, Lynn Holdsworth, has suggested giving the dynamically created alert div an aria-live attribute as in: newAlert.setAttribute(“aria-live”, “assertive”); instead of role=”alert”. We know it’s not ideal markup, but both the ‘alert’ message and the label are announced. What do you think?

]]> By: Marco http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-22346 Marco Fri, 25 Sep 2009 13:48:06 +0000 http://www.marcozehe.de/?p=42#comment-22346 @William: The problem is that alerts are usually meant to -- umm -- alert you, meaning interrupt anything that's currently being spoken. So what's happening is that NVDA tries to speak the next label, but gets interrupted by the alert message. The user can always press NVDA+Tab to hear the newly focused item. But the alert is indeed to alert as soon as possible to grab the user's attention. @William: The problem is that alerts are usually meant to — umm — alert you, meaning interrupt anything that’s currently being spoken. So what’s happening is that NVDA tries to speak the next label, but gets interrupted by the alert message. The user can always press NVDA+Tab to hear the newly focused item. But the alert is indeed to alert as soon as possible to grab the user’s attention.

]]> By: William Gates http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-22340 William Gates Fri, 25 Sep 2009 12:16:10 +0000 http://www.marcozehe.de/?p=42#comment-22340 Great article and interesting example. Testing the form in NVDA/Firefox I found that the alert is announced but the label on the next input tabbed to is not, or not consistently. I don't know whether or not this is just my set-up. The effect is a bit disorientating, especially when tabbing and shift-tabbing through several 'required' fields. Great article and interesting example.
Testing the form in NVDA/Firefox I found that the alert is announced but the label on the next input tabbed to is not, or not consistently. I don’t know whether or not this is just my set-up. The effect is a bit disorientating, especially when tabbing and shift-tabbing through several ‘required’ fields.

]]> By: Introduction à WAI ARIA (traduction) | Les intégristes http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-20206 Introduction à WAI ARIA (traduction) | Les intégristes Fri, 14 Aug 2009 17:05:53 +0000 http://www.marcozehe.de/?p=42#comment-20206 [...] Utiliser aria-invalid et role alert [...] [...] Utiliser aria-invalid et role alert [...]

]]> By: Andrea Tarr http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-19412 Andrea Tarr Tue, 21 Jul 2009 17:12:06 +0000 http://www.marcozehe.de/?p=42#comment-19412 Very interesting article! On the question of server-side/client-side error checking duplication question: Even if you assume that everyone has JavaScript, most people also have the ability to turn it off whenever they want. Therefore, if your error checking needs to happen, you have to have server-side error checking as a fall back. It doesn't have to be js, of course. For example, if your web site is a typical PHP/MySQL set up, you could use js to make quick & convenient error checking for your user and PHP server-side error checking as the fall back. If you allow user input, you need error checking that the user can't disable or you set your site up for easy hacking. Very interesting article!

On the question of server-side/client-side error checking duplication question:

Even if you assume that everyone has JavaScript, most people also have the ability to turn it off whenever they want. Therefore, if your error checking needs to happen, you have to have server-side error checking as a fall back.

It doesn’t have to be js, of course. For example, if your web site is a typical PHP/MySQL set up, you could use js to make quick & convenient error checking for your user and PHP server-side error checking as the fall back.

If you allow user input, you need error checking that the user can’t disable or you set your site up for easy hacking.

]]> By: saqibs (Saqib Shaikh) http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-12899 saqibs (Saqib Shaikh) Wed, 01 Apr 2009 03:06:26 +0000 http://www.marcozehe.de/?p=42#comment-12899 <strong>Twitter Comment</strong> <a href="http://twitter.com/saqibs" title="Twitter Comment" rel="nofollow"> <div title="saqibs (Saqib Shaikh)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="saqibs (Saqib Shaikh)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/saqibs) no-repeat top;cursor:hand;"> </div> </a> @MarcoZehe showed a nice WAI-ARIA demo at #Eafra. Just found the code on his blog: [link to post]. Also see tips 1 and 2. Go use!<br /><br /> - Posted using Chat Catcher Twitter Comment


@MarcoZehe showed a nice WAI-ARIA demo at #Eafra. Just found the code on his blog: [link to post]. Also see tips 1 and 2. Go use!

– Posted using Chat Catcher

]]> By: saqibs (Saqib Shaikh) http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-12898 saqibs (Saqib Shaikh) Wed, 01 Apr 2009 02:57:28 +0000 http://www.marcozehe.de/?p=42#comment-12898 <strong>Twitter Comment</strong> <a href="http://twitter.com/saqibs" title="Twitter Comment" rel="nofollow"> <div title="saqibs (Saqib Shaikh)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="saqibs (Saqib Shaikh)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/saqibs) no-repeat top;cursor:hand;"> </div> </a> @MarcoZehe did a simple yet compelling WAI-ARIA demo at #Eafra. Just found the code on his blog: [link to post]. Also see tips1&2<br /><br /> - Posted using Chat Catcher Twitter Comment


@MarcoZehe did a simple yet compelling WAI-ARIA demo at #Eafra. Just found the code on his blog: [link to post]. Also see tips1&2

– Posted using Chat Catcher

]]> By: Updated ARIA-spiced form example to work in IE 8 « Marco’s accessibility blog http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-12876 Updated ARIA-spiced form example to work in IE 8 « Marco’s accessibility blog Tue, 31 Mar 2009 12:53:26 +0000 http://www.marcozehe.de/?p=42#comment-12876 [...] updated my simple form example from the third Easy ARIA Tip to also work in IE 8. I had to explicitly state a doc type to put IE out of quirks mode into proper [...] [...] updated my simple form example from the third Easy ARIA Tip to also work in IE 8. I had to explicitly state a doc type to put IE out of quirks mode into proper [...]

]]> By: Travis Roth’s Weblog » Blog Archive » ARIA Resources http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-4486 Travis Roth’s Weblog » Blog Archive » ARIA Resources Mon, 29 Sep 2008 22:39:48 +0000 http://www.marcozehe.de/?p=42#comment-4486 [...] Easy ARIA tip #3: aria-invalid and role “alert” alerts user the Ajax way [...] [...] Easy ARIA tip #3: aria-invalid and role “alert” alerts user the Ajax way [...]

]]> By: Marco’s accessibility blog » Blog Archive » ARIA in Gmail #1: Alerts http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2443 Marco’s accessibility blog » Blog Archive » ARIA in Gmail #1: Alerts Mon, 04 Aug 2008 13:45:44 +0000 http://www.marcozehe.de/?p=42#comment-2443 [...] ARIA features concerns a very simple, yet effective, one: Alerts. As I already mentioned in my Easy ARIA Tip #3, alerts are a great way to immediately notify users about important status updates, but without [...] [...] ARIA features concerns a very simple, yet effective, one: Alerts. As I already mentioned in my Easy ARIA Tip #3, alerts are a great way to immediately notify users about important status updates, but without [...]

]]> By: Регистрация товарного знака http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2441 Регистрация товарного знака Mon, 04 Aug 2008 12:09:39 +0000 http://www.marcozehe.de/?p=42#comment-2441 Thanks Marco ! Thanks Marco !

]]> By: devid becham http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2379 devid becham Fri, 01 Aug 2008 11:24:20 +0000 http://www.marcozehe.de/?p=42#comment-2379 I think as a abstract concept we need to asume java script I think as a abstract concept we need to asume java script

]]> By: an0n1 m0us http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2064 an0n1 m0us Sat, 19 Jul 2008 14:15:32 +0000 http://www.marcozehe.de/?p=42#comment-2064 Thanks Marco but standards are standards. Supporting open web standards does not, in my view, include picking and choosing when and how to apply them. I'll wait to see if ARIA makes it into HTML5 and if browsers support it. Neither is guaranteed in the glacial world of web standards. Thanks Marco but standards are standards. Supporting open web standards does not, in my view, include picking and choosing when and how to apply them.

I’ll wait to see if ARIA makes it into HTML5 and if browsers support it. Neither is guaranteed in the glacial world of web standards.

]]> By: Marco http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2040 Marco Fri, 18 Jul 2008 14:11:24 +0000 http://www.marcozehe.de/?p=42#comment-2040 @an0n1m0us: No, they don't. See <a href="http://www.marcozehe.de/2008/07/16/wordpress-26-brings-a-lot-of-accessibility-improvements/#comment-2007" rel="nofollow">This comment to a different post</a> for a detailed explanation and a way around this problem. @an0n1m0us: No, they don’t. See This comment to a different post for a detailed explanation and a way around this problem.

]]> By: an0n1 m0us http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2039 an0n1 m0us Fri, 18 Jul 2008 13:53:26 +0000 http://www.marcozehe.de/?p=42#comment-2039 do aria- attributes pass XHTML 1.0 Strict according to the W3C validator? do aria- attributes pass XHTML 1.0 Strict according to the W3C validator?

]]> By: jgraham http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-2009 jgraham Thu, 17 Jul 2008 15:05:50 +0000 http://www.marcozehe.de/?p=42#comment-2009 Hmm. It seems like implementing <a href="http://www.whatwg.org/specs/web-forms/current-work/" rel="nofollow">Web Forms 2</a> would make this kind of think easier for authors and provide all the accessibility functionality for free. For example to mark up a control that is required and must contain something that looks like an email address, you would simply do: <input type="email" required> See <a href="http://dev.opera.com/articles/view/improve-your-forms-using-html5/" rel="nofollow">this article about Opera's support</a> for more examples. Hmm. It seems like implementing Web Forms 2 would make this kind of think easier for authors and provide all the accessibility functionality for free. For example to mark up a control that is required and must contain something that looks like an email address, you would simply do:

<input type=”email” required>

See this article about Opera’s support for more examples.

]]> By: Steve Lee http://www.marcozehe.de/2008/07/16/easy-aria-tip-3-aria-invalid-and-role-alert/comment-page-1/#comment-1986 Steve Lee Wed, 16 Jul 2008 15:33:23 +0000 http://www.marcozehe.de/?p=42#comment-1986 @DavidB: so even the great DB can change his mind ;-) Thanks for the comments, I guess we're in a interim period and we'll have to see what falls out. One thing is certain Javascript based web apps are here and very popular. Could we say forms are interactive so are really simple web applications so can assume Javascript? I'm beginning to thinks so. For documents and basic page/site navigation I see a very good case for Progressive Enhancement. @DavidB: so even the great DB can change his mind ;-) Thanks for the comments, I guess we’re in a interim period and we’ll have to see what falls out. One thing is certain Javascript based web apps are here and very popular.

Could we say forms are interactive so are really simple web applications so can assume Javascript? I’m beginning to thinks so. For documents and basic page/site navigation I see a very good case for Progressive Enhancement.

]]>