accessibility - 可访问性 - 带有工具提示的无线电选择的焦点顺序

Question

我有一组 3 个收音机选择，每个收音机选择旁边都有一个工具提示。我不确定这些中的每一个应该以什么顺序获得键盘焦点？

应该是... 1. 第一个单选 2. 第一个相应的工具提示 3. 第二个单选 3. 第二个工具提示等。

Answer 1

基本上，工具提示通常不会具有焦点，因为您从不直接与它本身进行交互。

与普通鼠标用户一样，工具提示必须为键盘用户显示并由屏幕阅读器朗读。但是，由于单击它时没有任何反应，并且没有与它真正的交互，因此使其可聚焦在理论上是没有意义的。

您可以使用 aria-live 使屏幕阅读器在工具提示文本出现在屏幕上时朗读它。

Answer 2

如果您使用的是原生<input type='radio'>. 即使您的代码看起来像：

<input type="radio" name="pet" id="r1" value="dog"><label for="r1">Dog</label> <a href='#'>tooltip 1</a><br>
<input type="radio" name="pet" id="r2" value="cat"><label for="r2">Cat</label> <a href='#'>tooltip 2</a><br>
<input type="radio" name="pet" id="r3" value="fish"><label for="r3">Fish</label> <a href='#'>tooltip 3</a><br>

选择单选按钮后，这组单选按钮就像一个制表位。活动按钮确定它在 Tab 键顺序中的位置。在上述情况下，选择“Cat”时，Tab 顺序为“tooltip 1”、radio group、“tooltip 2”、“tooltip 3”。如果选择“Dog”，则顺序为单选组、“工具提示 1”、“工具提示 2”、“工具提示 3”。