【问题标题】: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 默认情况下不可聚焦。

    应该改用&lt;a&gt;&lt;button&gt; 元素(我不知道这样做的离子方式)。

    如果所需的操作是保持在同一页面上,请使用 &lt;button&gt;

    如果您要导航到其他页面,请使用 &lt;a&gt;

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

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

    【讨论】:

    • 问题是很难分辨ion-chipion-label 的底层语义。如果ion-label '真的' 是一个标签,那么它就是一个标签for 一些可操作的东西(大概是芯片,不管那是什么)。
    【解决方案2】:

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

    如果使用role="button" 而不是语义&lt;button&gt; or &lt;input type="button"&gt; 元素,如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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-15
      • 2013-02-20
      • 1970-01-01
      • 2020-07-19
      • 1970-01-01
      相关资源
      最近更新 更多