Angular JS를 사용한 단일 페이지 응용 프로그램을위한 ARIA 및 accessibility

Question

각도 j를 사용하여 단일 페이지 응용 프로그램을 개발 중입니다.

이제 우리는 ARIA와 웹 사이트에 대한 접근성을 구현해야합니다.

우리가 어떻게 진행해야하는지, 규칙 중 일부는 쉽게 구현할 수 있지만 규칙 중 일부는 많은 작업이 필요합니다.

UI 및 모달 팝업에서 TAb 색인을 설정하는 것은 정말 도전 과제입니다.

모달 대화 상자를 사용하여 단일 페이지 응용 프로그램에서 탭핑을 어떻게 달성 할 수 있는지 알고 계십니까?

고마워요

Answer 1

탭 지수와 모달 내가 제안 angular.js 당신이 시도 할 수 boostraps 중 하나에 대해 이동에 매우 쉽습니다 :

각도 UI 부트 스트랩 : http://angular-ui.github.io/bootstrap/

또는 각진 끈 http://mgcrea.github.io/angular-strap/

그들은 둘 다 impliment 탭이고 모달입니다 :

이 탭의 예는 다음과 같습니다

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

를이 모달입니다 :

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

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