html - 在 Voice Over 中读取可点击的错误消息

Question

我有一个<div>显示错误消息并给出了属性aria-live="assertive"。当画外音朗读时，它会显示“错误消息 .clickable”

我希望 Voice Over 只读取不可“点击”的错误消息。

结构是这样的

<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="" />

在呈现的 HTML 中，结果如下：

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

有人可以帮忙吗？

Answer 1

使用以下技术之一来抑制clickable：

• disabled带属性的文本输入

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

• readonly带属性的文本输入

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

Answer 2

由于不是可点击元素，如果你想让它可点击，那么我们需要在元素中添加角色属性。

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