角色控件

`textbox`

将元素标记为单行或多行文本输入框。优先使用 <input type="text"> 或 <textarea>——它们免费处理所有文本框行为。仅在为 contenteditable 元素构建富文本编辑器时，才使用 role="textbox"。

使用时机

应使用 <input type="text">、<input type="email">、<input type="url">、<input type="tel"> 或 <textarea>——根据输入语义选择最合适的元素。原生元素自动处理选区、光标、IME 组合输入、表单提交、自动补全标记以及验证，而这些均极难通过自定义方式重现。

role="textbox" 仅适用于一种元素：承载富文本编辑器的 contenteditable div。该角色告知辅助技术将其作为可编辑区域暴露，而非泛型容器。若编辑器支持多行输入，应设置 aria-multiline="true"。

若文本框需要自动补全建议，应在输入框上使用 role="combobox" 而非 role="textbox"——后者不拥有弹出层。

常见错误

将 role="textbox" 应用于非 contenteditable 的 <div>。角色声明了可编辑字段，但输入操作无任何效果。
自定义文本框未配对 <label for> 或 aria-label——字段缺少无障碍名称。
仅使用 placeholder 作为标签。占位符在获得焦点时消失，在许多主题中对比度不足，且不属于无障碍名称。
在单行 contenteditable 上使用 role="textbox"，但未去除粘贴内容中的换行符。用户粘贴含换行的内容时，视觉约束将被绕过。
多行 contenteditable 编辑器缺少 aria-multiline="true"——屏幕阅读器将其宣告为单行输入。

示例

<!-- 推荐方式 -->
<label for="bio">简短简介</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- 富文本编辑器 -->
<label id="commentLabel">评论</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>