Re: Error Handling Best Practice?

<label for="p1">First name : <span class="inserted">error: this field
cannot be empty</span></label><input id="p1"...>

David & Kirsten MacDonald




On Wed, Dec 23, 2015 at 1:33 PM, Mike Elledge <melledge@yahoo.com> wrote:

> Hi David--
>
> Can you provide an example of that? I'm having trouble visualizing it.
>
> Mike
>
>
> On Wednesday, December 23, 2015 10:03 AM, Alistair Garrison <
> alistair.j.garrison@gmail.com> wrote:
>
>
> From testing it appears that legend's don't tend to be read out by AT on
> some mobile platforms.   Also, due to the small screen environment it would
> be good to keep the message box as small as possible. A definite advantage
> of including "error:" in the label of a form field that contains an error
> is that the fields can be navigated to via shortcuts.
>
> All the best
>
> Alistair
>
> On 23 Dec 2015, at 14:31, Balusani, Shirisha wrote:
>
> Another possible   method is to keep error’s in an unordered list inside a
> div container with tabindex ="0"
> AT will read the number of errors at they are listed in an unordered list.
> In this way screen reader knows to go back to the list after correcting the
> firsts error.
>
>
> <div id="form_errMsg" tabindex="0" >
> <div>
> <h2">
> Error Messages :
> <ul>
> <li>
> <a href="#edit-name">You must enter name.</a>
> </li>
> <li>
> <a href="#edit-phone">You must enter your phone number.</a>
> </li>
> </ul>
> </h2">
> </div>
> </div>
>
> *In CSS:*
>
> #form_errMsg {
>     margin-bottom: 10px;
>     margin-right: 20px;
> }
>
> Or you can also use field set and legend instead of div
>
> <fieldset  ……………..tabindex="0">
> <legend>Please correct the following errors:<legend>
> <ul  >
> <li>…</li>
> <li>…</li>
> <li>…</li>
> …
> </ul>
> </fieldset
>
>
> *From:* David MacDonald [mailto:david100@sympatico.ca]
> *Sent:* Tuesday, December 22, 2015 12:18 PM
> *To:* Patrick H. Lauke <redux@splintered.co.uk>
> *Cc:* Alistair Garrison <alistair.j.garrison@gmail.com>; Michiel Bijl <
> michiel@agosto.nl>; Balusani, Shirisha <sirib@uillinois.edu>;
> ajaysharma89003@gmail.com; Jonathan Avila <jon.avila@ssbbartgroup.com>;
> w3c-wai-ig@w3.org
> *Subject:* Re: Error Handling Best Practice?
>
> An old school fix is to insert the error message inside the label tag for
> the label association with the input with the error
>
> David & Kirsten MacDonald
>
>
>
> On Tue, Dec 22, 2015 at 12:43 PM, David MacDonald <david100@sympatico.ca>
> wrote:
>
> Android/talkback is way behind on for accessibility. It's like Apple was
> in 2007.
>
> It is not currently taken seriously by the blind community from what I can
> see. Google needs to figure this out... When you say "due to the number of
> users on Android..." I wouldn't say there are many blind users, and those
> who do, use Android  as a second device ...
>
> Working people and serious students who are blind currently use iPhone.
> There is no other option, really...
>
> I wish this wasn't the case but it is, I think.
>
> David & Kirsten MacDonald
>
>
>
> On Tue, Dec 22, 2015 at 11:45 AM, Patrick H. Lauke <redux@splintered.co.uk>
> wrote:
>
> On 22/12/2015 16:34, Alistair Garrison wrote:
>
> Thanks for the suggestion. It's really the where and how to present the
> error message that I suppose I'm searching for - be it:
>
>
> So your dismissal of aria-describedby earlier in the thread is a red
> herring then, as that attribute can be used to tie the error message
> programmatically to the form control - it's orthogonal to where/how to
> present the message (as it's not a hidden attribute or anything, like
> aria-label)...
>
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__www.splintered.co.uk&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9cj-jtqwjuBAt0z7j6CYy6_qbrGRCAU4htljsjsd_u0&s=N2eccBGx5WlZN4o0kaDoGvMBIEeG41NPJwP9WfDGCBA&e=>
>  | https://github.com/patrickhlauke
> <https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_patrickhlauke&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9cj-jtqwjuBAt0z7j6CYy6_qbrGRCAU4htljsjsd_u0&s=c27tvIkSM3Mlrx99riWXL31Fhoy-ic5efTa9EfHqLZg&e=>
> http://flickr.com/photos/redux/
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__flickr.com_photos_redux_&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9cj-jtqwjuBAt0z7j6CYy6_qbrGRCAU4htljsjsd_u0&s=Kt_Q-vcVSYqbh4obXWOVOjc92NupJCCRWsXAPTfOBXI&e=>
>  | http://redux.deviantart.com
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__redux.deviantart.com&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9cj-jtqwjuBAt0z7j6CYy6_qbrGRCAU4htljsjsd_u0&s=zN9n-WnrO_HzVzxGzcsB82DnBYd7eR1YaO63M86lpys&e=>
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
>
>
>
>
>
>
>
>