Re: Tips/Designing page - form eval example

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 <http://www.w3.org/People/#kevin>


> On 15 Jun 2015, at 14:48, Mandana Eibegger <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 <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 <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_role_of_alert_for_Error_Feedback_in_Forms>
> http://www.w3.org/WAI/GL/wiki/Using_Aria-Invalid_to_Indicate_An_Error_Field <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()" <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()" <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" <mailto: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
>