时间戳

首页 > 解决方案 > 如何向屏幕阅读器指示内容是内联可编辑的？

html - 如何向屏幕阅读器指示内容是内联可编辑的？

问题描述

我的产品有一个我们想要显示默认值的区域（假设是文档页面的名称），但是当用户关注它并点击空格键时，它变成了一个可编辑字段。我们正在尝试编写可访问的代码，我想知道是否有人指导如何使用屏幕阅读器向某人指示此内容是可编辑的？

我们目前在代码中处理它的方式是有一个带有名称的 div，当用户单击（或聚焦并点击空格键）时，它会变成一个输入。（他们可以按回车键或按钮保存。）我们可以利用 ARIA 值来实现这个或其他一些原生解决方案吗？

默认：

<div>Page title <button>Click to edit page title</button></div>

编辑时：

<input maxlength="500" value="Page title" />

我们现在没有保存按钮。您点击输入或从输入中删除焦点，它会自动更新。

标签： htmlaccessibilityscreen-readersinline-editing

解决方案

HTML 文档中的ARIA将“具有 contenteditable 属性的元素”定义为具有隐式aria-readonly="false"属性。根据 ARIA 文档，此属性仅适用于某些 ARIA 角色，并且该textbox角色更适合您的情况。在这种情况下，不需要按钮。

如果您的可编辑部分不包含 HTML 代码（如链接），则使用contenteditable部分似乎没用，您应该使用具有适当 CSS 设计的标准input或textarea元素，尊重 WCAG 标准（即可编辑字段必须与文本区分开来）

如果您的可编辑部分确实包含 HTML 代码，那么您将不得不使用contenteditable属性。您必须将该部分标识为一个role=textbox元素，并且它必须可以通过tabindex=0属性获得焦点。这可以在页面加载（没有按钮）时完成，或者在单击部分外部的按钮后完成（例如，如果您需要能够在正常阅读上下文中激活内部链接）。

推荐阅读