如何构建可访问按钮切换表单readonly状态？现有ARIA方案是否合规？

仅靠aria-controls属性，不足以让使用辅助技术的用户清晰知晓表单readonly状态的切换。aria-controls只是建立了按钮与目标表单的关联关系，但它不会主动告知用户操作后表单状态发生了什么变化，屏幕阅读器通常不会仅通过这个属性播报状态变更的细节。

你需要补充以下几种方案来明确状态切换：

• 完善aria-pressed状态同步：你已经给按钮加上了aria-pressed="false"，点击编辑时要将其改为aria-pressed="true"，再次点击改回false。屏幕阅读器会播报按钮的“按下/未按下”状态，配合按钮文本，用户能感知到操作对应的状态切换。同时建议动态修改按钮文本：进入编辑模式时改为“取消编辑账户详情”，退出时改回“编辑账户详情”，让操作意图更直观。

• 添加实时状态播报的aria-live区域：在页面中添加一个隐藏的aria-live容器，当表单切换状态时，向这个容器插入提示文本（比如“表单已进入编辑模式”或“表单已恢复只读状态”）。屏幕阅读器会自动读取这个区域的动态内容，确保用户及时收到状态变更的反馈。示例代码：

  <div aria-live="polite" class="sr-only"></div>
  

  （.sr-only是仅给屏幕阅读器可见的样式类，通常通过绝对定位、隐藏溢出等方式实现视觉隐藏）

• 确保提交按钮的状态同步：显示提交按钮时，除了移除hidden属性，无需额外操作，但要确保状态播报里提到“现在可以提交修改”这类信息，让用户知道提交按钮已可用。

• 保持输入框readonly属性的正确切换：这是基础，确保点击按钮时，所有输入框的readonly属性被正确添加或移除——屏幕阅读器会识别单个输入框的readonly状态，但结合整体的状态播报，用户能理解是整个表单的状态变化。

内容的提问来源于stack exchange，提问作者eballeste