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

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 =只读+咏叹调文本框：

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

Answer 1

这很烦人。画外音告诉我输入字段是只读的，但仍然告诉我双击选项卡进行编辑。这似乎是Voiceover中的错误，您应该将其报告给Apple。

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

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

另外，根据disabled的工作情况，如果我添加了aria-disabled="true"，则可以使您的其他案件生效。