Accessibility on dynamically displaying error messages

[bala krishna]

Hi All,

I am implementing the accessibility feature on the already developed web pages.

There is a form consists of input text fields and a submit button.

After filling all the fields and clicks on submit, the form displays the error messages under the below of the respective input field where validation failed.

Currently, I am able to navigate all the fields through the keyboard, but the problem is when we click on submit button and if it contains any errors after validates, we are unable to notify the user that an error has been occurred.

Can anyone of you please help me on the above issue.

Thanks in advance,

Bala.

[Ted Drake]

When you do your validation:
1. add aria-invalid="true" to each of the invalid inputs.

2. make sure the error notices have a unique id on the container, i.e. div#emailError

3. connect the inputs to their error message with aria-describedby="emailError"

4. set focus in the first invalid input.

This will let the user know what inputs are invalid and the error message will be announced when the input has focus. They will not have to navigate to the error message.

--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to free-aria+...@googlegroups.com.
To post to this group, send email to free...@googlegroups.com.
Visit this group at http://groups.google.com/group/free-aria.
For more options, visit https://groups.google.com/groups/opt_out.

[bala krishna]

Thank you so much Ted, Its working fine with your suggestion.

[bala krishna]

I am unable to notify the error messages to the user when the form contains required drop down options.

Which means,   When the form having a required drop down options and without filling then by clicking on the submit button, the error messages are showing but not nothing the user.

Can you please help me out to resolve the issue.

Thanks In Advance

Bala.

[Ted Drake]

Do you have a link to your sample page?

Sent from my iPhone

[bala krishna]

Sorry Ted, Not yet ready.

But I will share you the sample code.

jsp code :----

<h:selectOneMenu id="local_template" styleClass="sselecthud"  

                                 value="#{backing_Bean.Locale}" 

                                 onchange="resetForLanguage();"

                                 onkeypress="if (event.keyCode == 13){return false;}"

                                  >

                      <f:selectItems value="#{backing_Bean.localeList}"  />

                </h:selectOneMenu>

<t:message id="emailErrorlocal" for="local_template" styleClass="warning" style="margin-left: 2em"/>

javascript code :----

 if(document.getElementById('sendNotification:notifyForm:local_template') != null)

{

document.getElementById('sendNotification:notifyForm:local_template').setAttribute("aria-label",document.getElementById('sendNotification:notifyForm:local_template').value);

document.getElementById('sendNotification:notifyForm:local_template').setAttribute("aria-required","true");

document.getElementById('sendNotification:notifyForm:local_template').setAttribute("aria-describedby","sendNotification:notifyForm:emailErrorlocal");

}

if(document.getElementById('sendNotification:notifyForm:emailErrorlocal') != null)

{

document.getElementById('sendNotification:notifyForm:local_template').setAttribute("aria-invalid","true");

document.getElementById('sendNotification:notifyForm:local_template').focus();

}

The same logic works fine with input text box but not with the drop down.

Thanks In Advance,

Bala.

--
You received this message because you are subscribed to a topic in the Google Groups "Free ARIA Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/free-aria/NL7mKLLZeHM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to free-aria+...@googlegroups.com.

[bala krishna]

I fixed the same issue by replacing aria-describedby attribute with aria-labelledby

[David Ward]

I'd recommend using both at the same time. That is aria-describedby and aria-labelledby. On iOS with VoiceOver depeding on what version your on sometimes one works and then on other version the other works. I've tested from iOS 5,6,7.. And the best solution I've tried is to use both at the same time. Of coarse my app is exclusive to iOS so you mileage might vary with other AT solutions. Additionally you might find using an ARIA live labled DIV useful where your errors are going to pop in. That way the user would be audibly notified right away that there was an error.