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

Question

我有一个问题，无论我尝试什么，移动设备上的 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">

Answer 1

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

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

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

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