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

How to indicate to screen readers that content is inline editable?

我的产品有一个区域,我们想在其中显示默认值(比如说文档页面的名称),但是当用户关注它并点击 space 栏时,它变成了一个可编辑的场地。我们正在尝试编写可访问的代码,我想知道是否有人指导过如何向使用屏幕的人表明此内容是可编辑的 reader?

我们目前在代码中处理它的方式是有一个带有名称的 div,当用户点击(或聚焦并点击 space 栏)时,它变成一个输入. (他们可以按回车键或按钮进行保存。)是否有 ARIA 值我们可以用于这个或其他一些本地解决方案?

默认:

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

编辑时:

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

我们现在没有保存按钮。您按下回车键或从输入中移除焦点,它会自动更新。

ARIA in HTML document defines "Element with contenteditable attribute" as having an implicit aria-readonly="false" attribute. This property is only available for some ARIA roles according to ARIA documentationtextbox 角色更适合您的情况。在这种情况下不需要按钮。

如果您的可编辑部分不包含 HTML 代码(如链接),使用 contenteditable 部分似乎没有用,您应该改用标准 inputtextarea 具有适当 CSS 设计的元素,符合 WCAG 标准(即可编辑字段必须与文本区分开来)

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