angularjs - 使用 Angular JS 的单页应用程序的 ARIA 和可访问性

Question

我们正在使用 Angular js 开发单页应用程序。

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

所以我们必须如何进行，有些规则可以很容易地实施，但有些规则需要大量的工作。

就像在 UI 和模式弹出窗口上设置 TAb 索引是一个真正的挑战。

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

-谢谢

Answer 1

选项卡索引和模态在 angular.js 中非常简单，我建议您选择一种可以尝试的助推器：

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

或角带 http://mgcrea.github.io/angular-strap/

它们都是暗示选项卡和模态：

这是选项卡示例：

$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>