html - 更改 html 可访问性的焦点
问题描述
我有一个带有提交按钮的表单的页面。单击提交按钮后,我希望焦点转到“成功”或“失败”消息。现在屏幕阅读器一旦按下按钮就不会离开。它停留在“按继续按钮”上,然后我用我的箭头导航。我希望它专注于
标签取代屏幕上的按钮并在按继续后阅读消息。
<form>
<h1> Start Password Reset> </h1>
<input placeholder="Email">
<input type="submit" name="Continue" value="Continue">
<p id="success"> Success Message Here </p>
<p id="failure"> Failure Message Here </p>
</form>
解决方案
焦点通常适用于可操作的元素。像这样的状态消息是不可操作的。聚焦它(这需要用焦点指示器标记它,以便访问)可能会让用户误以为他们可以激活它。
我得到的印象是您想将注意力集中在该消息上,仅此而已。如果是这样,您可以设置样式以吸引注意力,还可以将其定位在实时区域中,以便辅助技术将消息通知用户。
为此,您可以使活动区域最初为空,然后在用户激活按钮后用一条或另一条消息填充它。
将属性 role="status" 应用于“p”元素使其成为这样一个活动区域。
给“p”元素一个 id="xyz" 属性和一个 aria-controls="xyz" 属性的按钮也会显式地将最终消息与按钮相关联。
如果按钮在被激活后消失,您将需要选择最有用和最直观的元素来移动焦点,这通常是用户可以使用的元素。
推荐阅读
- php - 如果会话值未使用 PHP 设置,则从数据库中检索会话内容
- javascript - 在jQuery中下载带有换行符的Textarea内容
- php - 记录十进制无空格超过 999
- django - 如何将待处理任务的数量添加到 List Json
- pandas - 熊猫,很高兴将列表作为元素,或者只是将其展平?
- elasticsearch - Elasticsearch: TransportError(406, u'Content-Type header is missing')
- java - Jenkins 使用参数和 SVN 构建作业
- php - setFetchMode 被忽略
- mongodb - MongoDB bson.M 查询
- java - Hystrix Fallback 未在单元测试中执行