选项卡焦点不适用于离子标签以实现可访问性

Question

我正在尝试在我的 Ionic 网络应用程序中实现可访问性，但键盘选项卡聚焦不适用于 ion-label 并且无法通过屏幕阅读标签-reader。下面是标签的 HTML：

<div padding-bottom="" padding-top="" text-center="">
   <ion-chip navpush="HelpPage" class="chip chip-md">
       <ion-label class="md-help-text label label-md">Forgot Your Password?</ion-label>
   </ion-chip>
</div>

当我使用键盘 Tab 按钮时，焦点会跳过此元素并转到下一个元素。

Answer 1

labels 默认情况下不可聚焦。

应该使用

<a> 或 <button> 元素（我不知道这样做的离子方式）。

如果所需的操作是停留在同一页面上，请使用 <button>。

如果您要导航到其他页面，请使用 <a>。

您唯一的其他选择（这是 last 手段，因为上面的标记似乎没有必要）是使用 tabindex=0在可点击元素上。

这将使元素在页面的 Tab 键顺序内可聚焦（不要为您的 tabindex 使用正整数，因为这会破坏 Tab 键顺序）。

Answer 2

如上文 Graham Ritchie 所述，默认情况下标签不可聚焦。因此我们可以使用 ARIA: button 角色和 tabIndex 的帮助。

如果使用 role="button" 而不是像 label 这样的语义 <button> or <input type="button"> 元素，它将使元素在屏幕上显示为按钮控件-reader 并且对于获得我们需要使用的焦点 tabIndex。

<div text-center padding-bottom padding-top >
        <ion-chip class="chip chip-md" navPush="HelpPage"  [navParams]="account">
            <ion-label tabindex="0" role="button" class="md-help-text label label-md" >Forgot Your Password?</ion-label>
        </ion-chip>
    </div>

参考链接：ARIA Role TabIndex Info

Note: Above code works for me for keyboard tab focus access as well as for screen-reader.

选项卡焦点不适用于离子标签以实现可访问性

Tab focus not working with ion-label for accessibility

html

accessibility

tabindex

semantic-ui

ionic3