Re: Tips/Designing page - form eval example

Hi Kevin,

thank you for your response and incorporating the WAI-ARIA attributes!
Although the page is aimed at designers, i think that it is not so 
unlikely that interested developers investigate the code to get input on 
the correct implementation (at least i have done so ;) ).

I fully agree, that a fully working Java Script example would be to much 
of an overhead for this page. Firstly it would make the example unclear 
and secondly there are still quite a lot of pages out there, not 
processing form submission on the client side. And if the form is 
checked on the server, a code, just as your example, would be returned.
So in my opinion, a "reduced to the max" example like yours is perfect 
in this case.

I investigated the alter role a little bit more and found the following:

ARIA19: Using ARIA role=alert or Live Regions to Identify Errors 
(http://www.w3.org/TR/WCAG20-TECHS/ARIA19.html)
Sufficient Technique for Success Criterion 3.3.1 (Error Identification)
In the example, the element containing the error notification has the 
alert role and its content is set onSubmit via Java Script

http://www.w3.org/TR/wai-aria/roles#alert states nothing about pop-ups - 
if i understand it correctly, pop-up alerts should use the alertdialog role.

But i agree, that from all those examples mentioned so far, it is not 
clear, if the alert role could/should only be used in case of 
client-side evaluation, or if it would also be valid, to add it directly 
into the html source code.

I might be wrong, but MDN often seems to be a good resource, and here i 
found the following 
(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role):


        /Example 1: Adding the role in the HTML code/

//

/The snippet below shows how the alert role is added directly into the 
html source code. The moment the element finishes loading the screen 
reader should be notified of the alert. If the element was already in 
the original source code when the page loaded, the screen reader will 
announce the error immediately after announcing the page title./

//

/|<h2  role="alert">Your form could not be submitted because of 3 validation errors.</h2>|/


I don't particularly like the h2 example, but the description sounds 
somewhat promising ...


And on a second thought, in your example, the alert role should maybe 
(/probably?) not be on the li, but on the containing div (<div 
class="errors" role="alert">) ...?


I would be very interested in your (or anyone else's?) thoughts about this,

Mandana



On 16/06/15 16:39, Kevin White wrote:
> Hi Mandana,
>
> Thanks very much for your valuable input. As noted on the resources 
> these are works in progress so it is good to have this sort of help.
>
> Just to say; I have incorporated your suggestion to include the 
> ARIA-INVALID and ARIA-DESCRIBEDBY attributes. I was not so certain of 
> using ROLE=“ALERT” as these aren’t really pop-ups or the like.
>
> As you say, this page is aimed at those involved with design. I 
> purposefully avoided making it a fully functioning example as this may 
> distract from the message or, especially if the form had to be 
> submitted to see the errors, make it a little bit unclear.
>
> Hope this makes sense and thank you again for you input,
>
> Kevin
>
> ——
> Kevin White
> W3C Web Accessibility Initiative (WAI)
> e-mail: kevin@w3.org <mailto:kevin@w3.org>
> phone: +1 617 532 0912
> phone: +44 131 202 6009
> about: http://www.w3.org/People/#kevin
>
>
>> On 15 Jun 2015, at 14:48, Mandana Eibegger <me@schoener.at 
>> <mailto:me@schoener.at>> wrote:
>>
>> Hi,
>>
>> i just had a quick look at the Tips/Designing page 
>> (http://w3c.github.io/wai-quick-start/designing.html).
>> And first i want to congratulate you on the great work.
>>
>> But what i was wondering about, are the form field error 
>> notifications in the example in 
>> http://w3c.github.io/wai-quick-start/designing.html#provide-clear-feedback 
>> .
>> The errors seem to be clear visually, but there is no programmatic 
>> markup (?).
>>
>> I know this page is about design and not about programming, but 
>> wouldn't it be good, to present a "perfect" form eval version?
>>
>> When i was once looking for some input on form eval markup, i found 
>> those 2 pages, which look very reasonable to me ...
>> http://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms
>> http://www.w3.org/WAI/GL/wiki/Using_Aria-Invalid_to_Indicate_An_Error_Field 
>>
>>
>> According to this, the example could maybe look like this (changes in 
>> capital letters and bold):
>>
>> <div>
>>       <div class="errors">
>>         <p>There were two problems with your submission.</p>
>>         <ol class="fa-ul">
>>           <li *ID="ERROR_EMAIL" ROLE="ALERT"*><span class="fa fa-li 
>> fa-exclamation-triangle"></span><a 
>> href="javascript:document.getElementById('email5').focus()">The email 
>> address provided does not seem to be valid</a></li>
>>           <li *ID="ERROR_COMMENT" ROLE="ALERT"*><span class="fa fa-li 
>> fa-exclamation-triangle"></span><a 
>> href="javascript:document.getElementById('comment3').focus()">There 
>> was no comment provided</a></li>
>>         </ol>
>>       </div>
>>       <form action="">
>>         <legend>Add a comment</legend>
>>         <div class="row">
>>           <label for="name5">Name</label>
>>           <input type="text" value="Superbear" name="name" id="name5">
>>         </div>
>>         <div class="row error">
>>           <label for="email5" class="required"><span class="fa 
>> fa-exclamation-triangle"></span> Email ✻</label>
>>           <input type="text" value="suberbear@@hq.space" name="email" 
>> id="email5" *ARIA-INVALID="TRUE" ARIA-DESCRIBEDBY="ERROR_EMAIL"*>
>>         </div>
>>         <div class="row">
>>           <label for="website2">Website</label>
>>           <input type="text" name="website" id="website3">
>>         </div>
>>         <div class="row error">
>>           <label for="comment3" class="required"><span class="fa 
>> fa-exclamation-triangle"></span> Comment ✻</label>
>>           <textarea id="comment3" name="comment" *ARIA-INVALID="TRUE" 
>> ARIA-DESCRIBEDBY="ERROR_COMMENT"*></textarea>
>>         </div>
>>       </form>
>>     </div>
>>
>>
>>
>> Just my humble thoughts ...
>>
>> All the best,
>> Mandana
>>
>