ARIA and accessibility for single page application using Angular JS

We are developing single page application using angular js.

Now we have to implement ARIA and accessibility for website.

So how we have to proceed, some of the Rules can be easily implement but some of the Rule need lots of work.

Like for setting of TAb index on UI and on modal popup is an really challange.

So do you have any idea how we can achieve tabbing in single page application with modal dialogs ?

-Thanks

Tab index and modal are quite easy in angular.js I suggest you go for one of the boostraps you can try:

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

or angular-strap http://mgcrea.github.io/angular-strap/

they are both impliment tabs and modal:

this is the tab example:

$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."
  }
];

and on html:

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

and this is for the modal:

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