Question

我在Angular（1.4.8）中使用角度路线（1.4.8）和角度材料（如果有任何差异）获得SPA。

每当用户单击链接并重定向到新路由时，下一个选项卡位置应该是ng-view中具有tabindex="1"（或0，-1）的元素。相反，当加载新路线时，下一个标签位置是应用程序的徽标和标题菜单[显示在ng视图之外]。

这会产生非常糟糕的可用性，用户每次更改路径时都必须跳过~5个链接来定位主要的所需元素。这在我们的应用程序中特别糟糕，因为我们有一个跨越多个路径/视图的表单向导。

我认为这可能是最近开始的，也许是从早期版本升级到1.4.8。任何人都有这方面的经验和/或如何解决它的建议？

每当ng-view呈现新路线时，活动的tabindex位置应该恢复为0.

Answer 1

我的解决方案是将默认焦点设置在表单中的所需元素上。您可以尝试'ng-autofocus'。

Answer 2

我遇到了本文中关于ARIA和AngularJS的解决方案，我最终实现了这个解决方案：Single page applications, AngularJS and accessibility。

app.run(function setupRouteChangeHandlers ($rootScope) {
  var bodyElement;

  $rootScope.$on('$viewContentLoaded', setupTabIndexFocus);

  ////////////

  function setupTabIndexFocus () {
    if (!bodyElement) bodyElement = $('body');
    bodyElement.find('md-content').attr('tabIndex', -1).focus();
  }
});

我们使用angular-material，因此每个视图都有一个我们可以定位的md-content元素（但你可以定位任何元素）。当用户单击选项卡时，下一个tabindex位置将是视图中带有tabindex="1"的元素。

这样做的好处是我们不会选择第一个表单字段，因此移动设备键盘不会立即显示（这会导致移动设备屏幕的一半被覆盖，然后用户才会看到在页面上是什么。）

在ng-view中加载新路由时，Tabbing（tabindex）以错误元素为目标

2 个答案: