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



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

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

违约:

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

编辑时:

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

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

HTML文档中的ARIA将"具有内容可编辑属性的元素"定义为具有隐式aria-readonly="false"属性。根据 ARIA 文档,此属性仅适用于某些 ARIA 角色,textbox角色更适合您的情况。在这种情况下,不需要按钮。

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

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

相关内容

  • 没有找到相关文章

最新更新