将 Aria-labels 添加到 Angular 分页网格以使其更易于访问
Posted
技术标签:
【中文标题】将 Aria-labels 添加到 Angular 分页网格以使其更易于访问【英文标题】：Adding Aria-labels to Angular pagination grid to make it more accessible 【发布时间】：2017-01-07 17:17:46 【问题描述】：在我从this thread 借来的this plunker example 中，有一个很棒的示例，说明如何使用AngularJs 创建分页网格。 （我的问题与this similar question 有点不同。）
在我们的一个项目中，我们有一个非常相似的解决方案，但为了获得一些帮助，我将使用我上面提到的 plunker 的代码。
我的目标：我想让屏幕阅读器更容易访问底部的分页网格这是通过在网格的按钮上添加一些 aria-labels 来完成的，例如
aria-label="Go to first page"
aria-label="Go to previous page"
aria-label="Go to page 3"
等等。我该如何做到这一点？
最后，代码如下：
模板：
<!DOCTYPE html>
<html ng-app="todos">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TodoController">
<h1>Todos</h1>
<h4>todos.length total</h4>
<ul>
<li ng-repeat="todo in filteredTodos">todo.text</li>
</ul>
<pagination
ng-model="currentPage"
total-items="todos.length"
max-size="maxSize"
boundary-links="true">
</pagination>
</body>
</html>
控制器：
var todos = angular.module('todos', ['ui.bootstrap']);
todos.controller('TodoController', function($scope)
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function()
$scope.todos = [];
for (i=1;i<=1000;i++)
$scope.todos.push( text:'todo '+i, done:false);
;
$scope.makeTodos();
$scope.$watch('currentPage + numPerPage', function()
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
);
);
【问题讨论】：
嗨@Ilias，您可以将uib-pagination用于角度。同时添加来自docs.angularjs.org/api/ngAria 的ngAria.js。然后您的控制元素将自动由 ngAria 处理。在这种情况下，屏幕阅读器将读取 1,2 等等。 【参考方案1】：首先，让我先说我从未使用或看过 angular。你有自己的 Angular 副本吗？随便看看，分页元素似乎是从template/pagination/pagination.html 中的模板生成的。当我查看那个来源时，它有类似的东西
<li role="menuitem" ng-if="::directionLinks" ng-class="disabled: noNext()||ngDisabled" class="pagination-next">
<a href ng-click="selectPage(page + 1, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle>::getText('next')
</a>
</li>
您可以修改模板吗？如果是这样，您可以将 aria-label 添加到 <a>，甚至可以从 paginationConfig 以相同的方式获取其文本。
我是通过在您的 plunker 示例中查看 ui-bootstrap-tpls-0.12.1.min.js 发现的。
【讨论】：
嗨@slugolicious，我可以更改模板，但我不会更改 min.js 文件。 这听起来像是一个构建问题。您必须了解如何构建项目并将文件捆绑在一起。 是的，模板可以通过角分页上的template-url属性来改变。【参考方案2】：如果可能，升级您的ui-bootstrap 版本。
库现在是 v2.4.0，并且支持从 v0.14.0 开始覆盖分页模板
之后，使用template-url 覆盖pagination 的默认模板。
template-url (默认: uib/template/pagination/pagination.html) - 使用提供的自定义覆盖组件的模板 模板
-
在您的代码库中复制默认模板
随意修改
将带有文件路径的
template-url 添加到您的<pagination> 标记中。
PS：默认分页模板为here；请注意参考您正在使用的库版本的文档和模板。
编辑：
使用template-url（ui-bootstrap v2.1.4）从我的代码中采样：
<div class="text-center">
<ul uib-pagination
total-items="vm.totalCount"
data-ng-if="vm.totalCount"
ng-model="vm.page"
items-per-page="vm.limit"
boundary-links="true"
max-size="3"
template-url="app/core/components/pagination/pagination.html">
</ul>
</div>
【讨论】：
我认为这个想法会奏效。谢谢@Sangharsh。由于赏金今天将到期，我想给你积分:)。一旦它工作，我会标记它是正确的。 不知何故我的分页不再显示。我在view/pagination.html 中添加了一个模板。并在我的分页中添加了template-url。似乎正在加载 pagination.html。但是，分页不再可见。这就是我现在用于分页的内容：<uib-pagination ng-change="pageChanged()" ng-show="bigTotalItems > 10" template-url="view/util/pagination.html" rotate="false" total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" ...>
uib-pagination 指令仅限于属性 (restrict: 'A')。请与一些标签一起使用它，例如<ul>.
浏览器控制台有错误吗？另外，您使用的是哪个版本的 UI Bootstrap？
很高兴我能开始工作并贡献最初的想法，并找到需要修改的模板和所需的更改。以上是关于将 Aria-labels 添加到 Angular 分页网格以使其更易于访问的主要内容，如果未能解决你的问题，请参考以下文章