angularjs - Angular JS を使用した単一ページ アプリケーションの ARIA とアクセシビリティ

Question

angular jsを使用してシングルページアプリケーションを開発しています。

次に、ウェブサイトに ARIA とアクセシビリティを実装する必要があります。

では、どのように進めなければならないかというと、一部のルールは簡単に実装できますが、一部のルールは多くの作業が必要です。

UI とモーダル ポップアップでの Tab インデックスの設定と同様に、非常に困難です。

では、モーダル ダイアログを使用してシングル ページ アプリケーションでタブ移動を実現する方法をご存知ですか?

-ありがとう

Answer 1

angular.js では、タブ インデックスとモーダルは非常に簡単です。試すことができるブーストラップのいずれかを使用することをお勧めします。

Angular UI ブートストラップ: http://angular-ui.github.io/bootstrap/

または angular-strap 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>