Question

我们正在使用角度js开发单页面应用程序。

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

因此，我们必须如何进行，一些规则可以轻松实施，但某些规则需要大量工作。

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

那么您是否知道如何使用模态对话框在单页面应用程序中实现制表？

-Thanks

Answer 1

在angular.js中，Tab索引和模态非常简单我建议你选择其中一个可以尝试的提升器：

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

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

它们都是impliment标签和模态：

这是标签示例：

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

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

1 个答案: