Re: Tips/Designing page - form eval example

Thank you for your feedback, Mandana.

We will check the use of role="alert" in the context of this specific 
example. I agree that examples are often used out of context too, and 
makes it hard to keep the examples short and simple.

Please don't hesitate if you have further feedback on these resources!

Best,
   Shadi


On 16.6.2015 18:34, 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
>>>
>>
>
>

-- 
Shadi Abou-Zahra - http://www.w3.org/People/shadi/
Activity Lead, W3C/WAI International Program Office
Evaluation and Repair Tools Working Group (ERT WG)
Research and Development Working Group (RDWG)

Received on Wednesday, 24 June 2015 07:45:35 UTC