aria-readonly

何时使用

当表单控件的值用户可以查看和复制、但不能修改时使用 — 例如不应被编辑的订单摘要行、多步骤审批流程中审阅者的评论，或系统生成的标识符。用户仍可通过 Tab 键聚焦到该控件、选中其文本并读取内容；表单提交时，该值也会一并提交。

如果使用的是 <input>、<textarea> 或 <select>，HTML 的 readonly 属性可原生处理上述所有行为，应优先使用。仅在自定义组件上才需使用 aria-readonly：包括 role="combobox"、role="grid"、role="listbox"、role="slider"、role="spinbutton" 以及自定义的 role="textbox"。

相关状态对比：

• aria-readonly — 可聚焦，值可见且可复制，值会随表单提交，但不可修改。
• aria-disabled — 可聚焦（保留在 Tab 顺序中），但不响应用户输入，且按惯例不会提交其值。
• HTML disabled — 完全从 Tab 顺序中移除，被忽略，不会提交。
• aria-hidden — 从无障碍树中移除；这与只读状态的目的不同。

只读与禁用的选择取决于语义：只读意味着”有效值，用户可以查看”，禁用意味着”当前无需关注此项”。

如何保持同步

有效值为 "true" 和 "false"。可编辑控件默认使用 "false"（或省略该属性）；当字段变为只读时切换为 "true"。

当 aria-readonly="true" 时：

• 控件必须保持可聚焦状态。不要同时设置 tabindex="-1"。
• 点击和键盘事件处理程序不应修改该值。选中和复制文本的功能必须正常运行。
• 应在视觉上将只读字段与可编辑字段区分 — 通常采用不同的背景色、无光标、无悬停交互效果。

常见错误

• 在原生 <input> 上同时使用 aria-readonly 和 HTML readonly 属性。原生属性已足够，重复设置可能导致两者不同步。
• 在 <p> 或 <div> 等非表单元素上使用 aria-readonly — 该状态在此类元素上没有意义。
• 同时设置 aria-readonly="true" 和 aria-disabled="true"。应根据字段是”有效但锁定”还是”暂时无需关注”来选择其一。
• 通过 tabindex="-1" 使只读字段无法聚焦 — 屏幕阅读器用户将无法访问该字段以读取其值。
• 在视觉上隐藏只读字段，但仍将其保留在 Tab 顺序中。

示例

<label for="order-id">Order ID</label>
<input
  id="order-id"
  type="text"
  value="ORD-83472"
  readonly
>

<!-- Custom widget where the native attribute isn't available -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>