Re: Tips/Designing page - form eval example

Hi Mandana,

Thanks again for your input!

If you would like to get general feedback, the best place for that would be the WAI Interest Group (IG) e-mail list.

You can read the mailing list archives, to get a feel for the list, through:
 http://lists.w3.org/Archives/Public/w3c-wai-ig/

You can join the mailing list and post questions by following the instructions under:
 http://www.w3.org/WAI/IG/Overview.html#mailinglist

Best regards,
~ Shawn


<http://www.w3.org/People/Shawn/?


On 6/16/2015 11:34 AM, Mandana Eibegger wrote:
> 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
>>>
>>
>

Received on Tuesday, 16 June 2015 17:05:17 UTC