ARIA：文本框角色

当元素具有 textbox 角色时，浏览器会向辅助技术发送可访问的文本框事件，然后辅助技术可以向用户通知该事件。

默认情况下为单行输入，其中 Return 或 Enter 提交表单；在这种情况下，最好使用 HTML <input> 并设置 type="text"。要创建支持换行的多行文本框（如 HTML <textarea> 中），请设置 aria-multiline="true"。包含 HTML contenteditable 属性可确保文本节点可编辑。

<!-- Simple text input field -->
<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
  role="textbox"
  contenteditable="true"
  aria-placeholder="5-digit zipcode"
  aria-labelledby="txtboxLabel"></div>

<!-- Multi-line text area -->
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div
  role="textbox"
  contenteditable="true"
  aria-multiline="true"
  aria-labelledby="txtboxMultilineLabel"
  aria-required="true"></div>

语义元素更简洁，并且不需要 JavaScript 来支持文本框功能。

<label for="txtbox">Enter your five-digit zipcode</label>
<input type="text" placeholder="5-digit zipcode" id="txtbox" />

<!-- Multi-line text area -->
<label for="txtboxMultiline">Enter the tags for the article</label>
<textarea id="txtboxMultiline" required></textarea>

如果文本字段为只读，则通过在元素上设置 aria-readonly="true" 来指示这一点。

aria-activedescendant 属性

以其值为 ID，它要么是具有 DOM 焦点的元素的后代，要么是 aria-owns 属性指示的逻辑后代，它指示该元素何时获得焦点，何时是组合组件（如 combobox）的一部分。例如，在组合框中，焦点可能保留在文本框上，而文本框元素上的 aria-activedescendant 值则引用文本框控制的弹出列表框的后代。此属性必须在焦点更改时以编程方式更新。

aria-autocomplete 属性

指示用户在字段中输入的内容是否以及如何触发对预期值的预测显示。它支持以下值

• inline：预测文本插入在插入符号之后。
• list：预测文本显示为值的集合。
• both：预测文本显示为值的集合，并在插入符号之后插入完成一个值所需的文本。
• none（默认值）：不提供预测文本。

如果设置了 list 或 both，则还应包含 aria-controls 和 aria-haspopup 属性。aria-controls 的值为包含建议值列表的元素的 ID。此外，文本框或具有角色 combobox 的包含元素的值与包含建议值列表的元素的角色相匹配，用于 aria-haspopup。

aria-multiline 属性

如果设置了 aria-multiline="true"，则 AT 会通知用户文本框支持多行输入，并期望 Enter 或 Return 创建换行符而不是提交表单。ARIA 不会更改元素的行为；相反，此功能必须由开发人员控制。如果设置为 false，或者属性被省略并默认为 false，则用户期望控件为单行文本框，并且 Enter 或 Return 提交表单。

aria-placeholder 属性

表示一个提示（单词或短语），提示用户在文本字段中输入什么内容。提示应该是一个示例值或预期格式的简要描述。此信息不应替代标签：标签可聚焦、永久存在、指示期望的信息类型，并增加设置控件焦点的点击区域，而占位符文本只是关于预期值的临时提示，如果实现不正确，可能会降低可访问性。当控件的值为空字符串时，例如控件首次获得焦点时以及用户删除之前输入的值时，占位符应可见。不要使用aria-placeholder，而是使用语义化的<input type="text">或<textarea>以及placeholder属性。

aria-readonly 属性

指示用户无法修改文本字段的值。不要使用aria-readonly，而是使用语义化的<input type="text">或<textarea>以及readonly属性。

aria-required 属性

指示在提交字段之前必须为此字段提供值。不要使用aria-required，而是使用语义化的<input type="text">或<textarea>以及required属性。

在单行使用中（当aria-multiline为false或未使用时），Return或Enter键提交表单。在多行使用中（当aria-multiline为true时），Return或Enter键插入换行符。

必须维护与任何和所有属性和状态关联的所有功能，并且需要处理单行文本框中回车或 Enter 键的表单提交。

焦点事件处理程序和 aria-activedescendant 属性

如果您正在实现复合小部件，例如由文本框和列表框组成的组合框，则需要使用处理程序管理aria-activedescendant属性。在使用此技术之前，请确保您需要定位的浏览器当前支持它。有关更多信息，请参阅aria-descendant 的规范。

当textbox角色添加到元素或此类元素变得可见时，用户代理应执行以下操作

• 将元素公开为在操作系统可访问性 API 中具有文本框角色。
• 如果操作系统可访问性 API 支持，则使用操作系统可访问性 API 触发可访问文本框事件。

辅助技术产品应侦听此类事件并相应地通知用户

• 屏幕阅读器应在焦点首次落在文本框上时宣布其标签和角色。如果它还包含内容，则应像普通文本框一样宣布。
• 屏幕放大镜可以放大文本框。

以下代码段显示了如何将文本框角色直接添加到 HTML 源代码中。

<div role="textbox" contenteditable="true"></div>

以下代码段显示了如何将文本框角色直接添加到 HTML 源代码中。

<div role="textbox" contenteditable="true" aria-multiline="true"></div>

• 请务必将contenteditable="true"属性添加到应用此角色的 HTML 元素。即使您将aria-readonly设置为true，也应这样做；这样，您可以传达如果内容不是只读，则内容将是可编辑的。

• ARIA：搜索角色