选项卡焦点不适用于可访问性的离子标签答案

【问题标题】：Tab focus not working with ion-label for accessibility选项卡焦点不适用于可访问性的离子标签
【发布时间】：2019-11-11 08:12:49
【问题描述】：

我正在尝试在我的 Ionic Web 应用程序中实现可访问性，但键盘选项卡聚焦不适用于 ion-label，并且无法通过屏幕阅读器读取标签。下面是标签的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 按钮时，焦点会跳过该元素并转到下一个元素。

【问题讨论】：

标签： html ionic3 accessibility semantic-ui tabindex

【解决方案1】：

labels 默认情况下不可聚焦。

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

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

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

您拥有的唯一其他选择（这是最后手段，鉴于上述标记，它似乎没有必要）是在可点击元素上使用tabindex=0。

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

【讨论】：

问题是很难分辨ion-chip 和ion-label 的底层语义。如果ion-label '真的' 是一个标签，那么它就是一个标签for 一些可操作的东西（大概是芯片，不管那是什么）。

【解决方案2】：

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

如果使用role="button" 而不是语义<button> or <input type="button"> 元素，如label，它将使元素显示为屏幕阅读器的按钮控件，并且为了获得焦点，我们需要使用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

注意：以上代码适用于我的键盘选项卡焦点访问以及屏幕阅读器。

【讨论】：