使用Angular JS的单页应用的ARIA和可访问性

Question

我们正在使用angular js开发单页应用。

现在我们必须实现ARIA和网站的可访问性。

所以我们必须继续，有些规则可以很容易地实现，但有些规则需要大量的工作。

就像在UI和模态弹出框上设置标签索引是一个真正的挑战。

那么你知道我们如何在单页应用程序中使用模式对话框实现选项卡吗?

-谢谢

Answer 1

标签索引和模态在angular.js中是非常容易的我建议你选择一个你可以尝试的bootstrap:

Angular UI引导:http://angular-ui.github.io/bootstrap/

或angular-straphttp://mgcrea.github.io/angular-strap/

它们都是实现制表符和modal:

这是制表符的例子:

$scope.tabs = [
  {
    "title": "Home",
    "content": "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica."
  },
  {
    "title": "Profile",
    "content": "Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee."
  },
  {
    "title": "About",
    "template": "tab/docs/pane.tpl.demo.html",
    "content": "Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade."
  }
];

和html:

<div ng-model="tabs.activeTab" bs-tabs="tabs">
</div>

，这是模态:

$scope.modal = {
  "title": "Title",
  "content": "Hello Modal<br />This is a multiline message!"
};

html:

<!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
  <br>
  <small>(using an object)</small>
</button>
<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template="modal/docs/modal.tpl.demo.html" bs-modal="modal">Custom Modal
  <br>
  <small>(using data-template)</small>
</button>