단일 페이지 응용 프로그램 (ARIA 등)에서 액세스 가능성

Question

SPA (AngularJS) 액세스 가능 (화면 판독기 등)을위한 최선의 방법은 무엇입니까?

아리아 사양에 대한 경험이 거의 없으며 단일 페이지 응용 프로그램에서 작동하는지 궁금합니다.

개발할 때 일반적인 함정은 무엇입니까?

개발할 때 내게 필요한 옵션을 디버그하고 테스트하려면 어떻게해야합니까?

Answer 1

여기에는 광범위한 문제가 포함될 수 있습니다. 그래서 저는 여러분이 길에서 여러분을 시작할 수 있기를 희망하면서 몇 가지 기본적인 것들을 다룰 것입니다. 일반적인 함정들입니다.

의견 작성자가 말한 것처럼 첫째, ARIA 태그가 올바르게 사용되었는지 확인해야합니다. 예를 들어 div를 버튼으로 표시하려면 다음과 같은 코드를 사용합니다.

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div> 

화면 판독기에 의해 선택이 버튼은 "슈퍼 화려한 버튼"호출됩니다, 그래서 당신은 당신의 아리아-label 속성에 버튼을 넣어 필요가 없습니다. 거기에 더 복잡한 예제가 있지만, 그것의 거의 기본을 보여줍니다. Role, aria-label 및 tabindex는 가장 보편적 인 ARIA 속성입니다.

화면 판독기 사용자가 클릭하기를 원하는 탭 인덱싱 요소가 중요합니다. 문서의 기본 위치에 tabindex를 포함 시키려면 tabindex를 0으로 설정하십시오. 키보드 내비게이션을 사용하는 사람들이 정상적으로 도달하지 못하게하려면 -1로 설정하십시오. 이것은 정상적인 탭 순서를 벗어 났음을 의미하지만 javascript/jquery .focus()를 통해 수동으로 사용자의 포커스를 배치하려는 경우에는 여전히 탐색 할 수 있습니다.

앞서 언급 한 것처럼 키보드 탐색기/화면 판독기 사용자가 포커스를 이동하여 도움을 줄 수있는 경우가 있습니다. 예를 들어 버튼을 클릭하면 메뉴가 나타납니다. 당신은 메뉴의 첫 번째 링크를 넣어 같은 것을 할 수 있습니다 :

$('#linkmenuactivator').on("click", function() { 
    $('#linkmenu').find('li:first a').focus(); 
}); 

내가 그 JQuery와에 알고, 나는 AngularJS와 익숙하지 않아요하지만 내 짧은보기 나를 그것이 뷰 모델 컨트롤러의 더 생각하게 JQuery와 같은 특정 UI와는 반대로, 내가 틀렸다면 나를 수정하십시오.

스크린 리더 사용자에게는 아무런 의미가없는 펑키한 일을하는 경우 라이브 영역을 사용할 수 있습니다. 이 영역의 요소에 텍스트를 써서 정보를 텍스트로 출력 할 수 있습니다. 이를 수행하는 가장 쉬운 방법은 각각 중요한 메시지 또는 일반 상태 업데이트에 대해 경고 또는 상태의 역할을 사용하는 것입니다. 이러한 역할은 기본적으로 요소를 라이브 영역으로 만들고 여기에서 변경된 텍스트는 스크린 리더에보고됩니다. 그래서 간단한 예는 다음과 같이 보일 것입니다 :

<p id="ariastatusbox" ... role="status"></p> 

을 그리고 나중에 JQuery와에 (문서를로드 당신의 예를 복용하고 그것을 페이딩 당신이있어 때) :

$('#maincontent').fadeIn(function() { 
    $('#ariastatusbox').text('Document loaded'); 
}); 

이를 문서가로드되어 화면에서 읽을 준비가되었음을 화면 판독기에 알립니다. 라이브 지역은 약간 까다로울 수 있지만 마스터 할 수있는 경우 강력한 지역입니다.

마지막으로 접근성 테스트의 경우 몇 가지 옵션이 있습니다. 최근에 비틀 거리게 된 부분은 온라인 테스트 도구 인 것으로 보이는 Wave입니다. 언뜻보기에 좋았습니다. 시도해볼 수있었습니다.또 다른 옵션은 화면 판독기를 직접 잡아서 이동시켜주는 것입니다. 오픈 소스 (따라서 무료) 스크린 리더 인 NVDA을 권장합니다. 그것은 선택의 나의 스크린 독자이고, 꽤 지긋 지긋하다. 번들로 제공되는 신디사이저에는 가장 좋은 음성이 없지만 다른 옵션이 있거나 음성 출력을 끄고 음성 뷰어를 사용하여 텍스트 출력을 볼 수 있습니다. 마지막 옵션은 접근성 테스터에게 시운전을 위해 앱을 가져갈 것을 요청하는 것입니다. 소비자 제품이나 그 괄호 안에 들어있는 것들에 대해 시각 장애인과 접근 가능한 기술을 가진 다른 사용자는 묻는다면 자발적으로 자원 할 수 있습니다. 공개 포럼에서 원치 않는 비즈니스 지향적 인 응용 프로그램의 경우 웹 응용 프로그램에 액세스 할 수있는 문제에 대해 문의 할 수있는 여러 조직이 있습니다.

이것은 내게 필요한 옵션에 대한 포괄적 인 설명서는 아니며, 나는 당신을 올바른 방향으로 킥 스타트하기를 희망하고있었습니다. 조금 더 자세히 살펴 보려면 ARIA roles 설명서를 참조하십시오 (모두 도움이 되겠지만 코드는 정의 제목 아래에 있음). ARIA States and Properties documentation. 둘 다 조금 건조 할 수 있지만, 아리아를 현명하게 사용할 수있는 모든 것을 모두 갖추고 있습니다. Google은 자습서를 얻을 수 있어야합니다.

본인의 도움을 받으시기 바랍니다. 행운을 빕니다!