在可访问性中为 ionic 中的切换按钮启用点击或单击事件

Posted 2023-03-16

【中文标题】在可访问性中为 ionic 中的切换按钮启用点击或单击事件

【英文标题】：Enable tap or click events for toggle buttons in ionic in Accessibility

【发布时间】：2016-02-13 21:49:56

【问题描述】：

我正在开发一个包含项目列表的移动应用程序，每个项目都包含切换按钮。打开辅助功能（配音）模式后，将启用对这些列表项的关注，但双击该项目不会打开/关闭切换按钮。

这是我正在使用的代码示例。它会读取内容，但不会触发 on-tap 或 ng-click 方法。

下面的代码专注于该项目，但当它被双击时，切换不会打开/关闭。在 ios 和 android 上观察到相同的行为。有任何想法吗？

HTML

<ion-list>
   <ion-toggle role="option" toggle-class="toggle-balanced" ng-repeat=“item in items"  tabindex="-1" ng-model="item.isToggleOn" ng-change=“item.isToggleOn" on-tap=“updateSettings(item)" aria-label=“Item description,,  Double Tap to toggle setting." >
      <div class="pref-item-text-wrap” >Item description</div>
   </ion-toggle>
</ion-list>

在控制器中：

$scope.updateSettings = function (item) console.log("In update settings");

【问题讨论】：

能否提供一个codepen或plunker？

这是一个密码笔。如果你在手机上尝试使用旁白功能，双击对切换按钮没有任何影响。codepen.io/anon/pen/VvqeJZ

您是否尝试过使用ng-click 或onclick 而不是on-tap。我认为画外音可能无法触发tap 事件...

是的，我尝试了 ng-click、on-tap 和 onclick，但它们都表现出相同的行为。我在想它是否与“角色”价值有关..？

【参考方案1】：

Events like gestures and keyboard events are intercepted by screen readers。您可以使用正确的角色来允许屏幕阅读器将适当的事件传递给您的 javascript 事件处理程序。

另外，请注意，当屏幕阅读器打开时，手势会发生变化。在 iOS 上，单击变为双击，双击变为三次。见http://axslab.com/articles/ios-voiceover-gestures-and-keyboard-commands.php

Android 上也发生了类似的变化。

话虽这么说，那一小段代码有很多问题：

如果tabindex 为-1，则对于仅使用键盘的用户将无法获得焦点，因此并非所有用户都可以访问。您需要确保 tabindex 设置为 0 您描述的行为更类似于checkbox 或radio 角色，而不是option。您可能应该使用checkbox 角色。 option 的父级必须是listbox 角色，这在规范http://www.w3.org/TR/wai-aria/roles#option 中可以清楚地看到，如果您确实将listbox 与option 结合使用，则需要设置aria-multiselectable到true

无论如何，当您实现这些角色之一时，您必须维护适当的aria-* 状态属性，然后您必须使用与设备无关的事件处理程序。您可能必须将ng-click 与ngAria 结合使用才能获得所需的行为。确保您仅使用键盘而不使用屏幕阅读器（在 Android 上）以及使用键盘和屏幕阅读器（在 iOS 和 Android 上）以及触摸和屏幕阅读器（在 iOS 和 Android 上）进行测试。

【参考方案2】：

这里有一个小技巧可以让它工作。

在你的SASS中，导入Ionic后，需要覆盖toggle组件的pointer-events属性：

// accessible toggles 
.item-toggle 
  pointer-events: all;
  .toggle 
    pointer-events: none;
  

请注意，除非您在项目级别手动处理该事件，否则这会使切换不会对点击事件做出反应，例如：

<ion-toggle role="checkbox" aria-checked="isChecked" ng-model="isChecked" ng-click="isChecked=!isChecked">Toggle item</ion-toggle>