正确处理禁用/只读文本框以实现可访问性

Posted 2023-05-06

【中文标题】正确处理禁用/只读文本框以实现可访问性

【英文标题】：Proper handling of disabled/readonly textboxes for accessibility

【发布时间】：2019-05-02 02:24:29

【问题描述】：

我有一个问题，无论我尝试什么，移动设备上的 iphone VoiceOver 或 android Voice Assistant 都会显示“双击编辑”。我被告知它不应该声明“双击编辑”这对我来说是有意义的。

我创建了一个 CodePen，但似乎没有组合适用于 iphone 和 android：https://codepen.io/anon/pen/oQJvEr

对此的任何帮助将不胜感激。

只读文本框：

<input type="text" aria-invalid="false" aria-required="false" value="1" readonly>

禁用文本框：

<input type="text" aria-invalid="false" aria-required="false" value="1" disabled>

Readonly=只读文本框：

<input type="text" aria-invalid="false" aria-required="false" value="1" readonly="readonly">

Readonly=Readonly+Aria 文本框：

<input type="text" aria-invalid="false" aria-required="false" value="1" readonly="readonly" aria-readonly="true">

【参考方案1】：

这很烦人。画外音告诉我输入字段是只读的，但仍然告诉我双击标签进行编辑。这似乎是 Voiceover 中的一个错误，您应该向 Apple 报告。

当我双击时，它告诉我“插入点在末尾”，但由于该字段是只读的，因此屏幕键盘不会显示。这是一个非常令人困惑的场景。

但是，当我尝试您的四种情况时，“禁用”输入（第二个示例）工作正常。它确实没有告诉我双击进行编辑。

另外，基于disabled 的工作，如果我添加aria-disabled="true"，我可以让你的其他案例工作。

【讨论】：

很烦人！更糟糕的是，所有示例都在我的 Android 上显示“双击编辑”。我觉得我可能在这里遗漏了一些东西，因为 iphone 和 android 都这样做，但这对我来说真的没有意义......

aria-disabled="true" 在安卓上工作了吗？它适用于画外音

不。我尝试将它添加到所有示例中，但没有任何效果。我会按照你的建议让 Apple 和 Google 知道，因为这很奇怪......

听起来目前没有适用于 android 的解决方案。太糟糕了。至少你可以让画外音正常工作，而且由于大多数视障用户使用 ios 设备而不是安卓设备，希望你能覆盖大部分观众。