'Error Messages reading clickable in Voice Over

I have a <div> to display error message & have given the attributes aria-live="assertive". When the voice over reads, it reads "Error Message .clickable"

I want the Voice Over to read only the error message not "clickable".

The structure is something like this

<div id="fnErr" aria-live="assertive">
<form:errors path="firstName" cssClass="error" htmlEscape="false"/>
</div>
<label id="fNlbl" for="fN">
<spring:message ..... />
</label>
<form:input aria-required="true" type="text" tabindex="0" path="firstName" maxlength="90"     id="fN" class="" cssErrorClass="" />

In the rendered HTML it comes out like:

<div errMsg>
<span>---error content-----</span>
</div>

Can anybody help?

htmlerror-handlingaccessibilitywai-aria


Solution 1:[1]

Use one of the following techniques to suppress the clickable:

  • Text input with disabled attribute

    <input type="text" disabled="disabled" maxlength="13"><spring:message .... /></input>

  • Text input with readonly attribute

    <input type="text" readonly="readonly" maxlength="13"><spring:message .... /></input>

Solution 2:[2]

As is not clickable element, if you want to make it clickable then we need to add the role attribute in element.

<div errMsg role="button">
<span>---error content-----</span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paul Sweatte
Solution 2 Nissa

Related Questions