Re: Tips/Designing page - form eval example

Hi Shawn,

thanks for the links.

Best,
Mandana

On 16/06/15 19:05, Shawn Henry wrote:
> 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 Wednesday, 17 June 2015 15:11:11 UTC