단일 페이지 애플리케이션(ARIA 등)에서의 접근성

단일 페이지 애플리케이션(ARIA 등)에서의 접근성

SPA(각선)를 만들기 위한 최선의 접근법은 무엇입니까?JS) 액세스 가능(화면 리더 등)

저는 아리아 사양에 대한 경험이 적거나 전혀 없기 때문에, 한 페이지 어플리케이션으로 동작할 수 있을지 의문입니다.

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

개발 시 접근성을 어떻게 디버깅하고 테스트합니까?

여기에는 광범위한 문제가 포함될 수 있습니다.그래서 기본적인 몇 가지에 대해 설명하겠습니다.여러분에게 길을 열어주셨으면 하는 바람입니다.흔히 있는 함정입니다.

우선 코멘트가 말한 것처럼 ARIA 태그가 올바르게 채용되어 있는지 확인해야 합니다.예를 들어, 디바를 버튼처럼 노출시키고 싶다면, 이런 것이 있을 것입니다.

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

화면 리더에 의해 선택되었을 때, 이 버튼은 「슈퍼 플래시 버튼」이라고 불리기 때문에, 아리아 라벨 속성에 버튼을 넣을 필요는 없습니다.더 복잡한 예가 있지만, 그 기본을 잘 보여줍니다.역할, aria-label 및 tabindex는 가장 일반적인 ARIA 속성이 됩니다.

이를 위해서는 화면 판독기 사용자가 클릭할 탭 색인화 요소가 필수적입니다.문서의 기본 위치에 포함하려면 tabindex를 0으로 설정합니다.키보드 네비게이션을 사용하는 사람이 반드시 액세스하지 않으려면 -1로 설정합니다.이는 정상적인 탭 순서를 벗어나지만 javascript/jquery .focus()를 통해 사용자가 수동으로 초점을 맞추기를 원하는 경우로 이동할 수 있습니다.

앞에서 설명한 바와 같이 키보드 네비게이터/화면 리더의 포커스를 이동함으로써 사용자를 지원할 수 있습니다.예를 들어 버튼을 클릭하면 메뉴가 나타납니다.다음과 같이 메뉴를 첫 번째 링크에 표시할 수 있습니다.

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

JQuery에 있는 거 알아 Angular에 대해 잘 몰라JS는 JQuery와 같은 UI가 아니라 ViewModel 컨트롤러에 가깝다고 생각합니다만, 틀렸다면 정정해 주십시오.

라이브 영역은 화면 판독기 사용자가 이해할 수 없는 펑키한 작업을 화면에서 수행할 때 사용할 수 있습니다.이러한 영역의 요소에 텍스트를 입력하여 정보를 텍스트로 표시할 수 있습니다.가장 쉬운 방법은 각각 중요한 메시지 또는 일반 상태 업데이트에 대해 알림 또는 상태 역할을 사용하는 것입니다.이러한 역할은 요소를 기본적으로 활성 영역으로 만들고 텍스트 변경 내용은 화면 판독기에 보고됩니다.예를 들어 다음과 같습니다.

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

그런 다음 JQuery 후반부에서(문서를 로드하고 문서를 받은 후 페이드인하는 예제를 사용):

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

그러면 스크린 리더가 문서가 로드되어 화면에서 읽을 준비가 되었음을 알 수 있습니다.살아 있는 지역은 조금 까다로울 수 있지만, 숙달할 수 있다면 강력한 비스트입니다.

마지막으로 접근성 테스트에 대해서는 몇 가지 옵션이 있습니다.최근에 우연히 알게 된 것은 온라인 테스트 툴로 보이는 Wave입니다.언뜻 보기에도 괜찮으니 한번 시도해 보세요.또 다른 옵션은 직접 스크린 리더를 잡고 시도해 보는 것입니다.오픈 소스(따라서 무료) 화면 리더인 NVDA를 추천합니다.이것은 내가 선택한 스크린 리더기이고 꽤 좋다.동봉되어 있는 신시사이저는 음성이 가장 좋은 것은 아니지만, 다른 옵션이 있습니다.또, 음성 출력을 끄고, 음성 뷰어를 사용해 텍스트 표시를 표시할 수도 있습니다.마지막 옵션은 접근성 테스터에게 앱을 시승할 수 있도록 요청하는 것입니다.소비자 제품이나 그 괄호 안에 있는 물건에 대해서는 시각장애인 및 기타 접근 가능한 기술 사용자가 요청하면 자발적으로 할 수 있습니다.공개 포럼에서 원하지 않는 보다 비즈니스 지향적인 앱에 대해서는 웹 애플리케이션을 접근 가능하게 하는 문제에 대해 상담할 수 있는 조직이 여러 개 있습니다.

이 매뉴얼은 접근성에 관한 포괄적인 매뉴얼이 아닙니다.고객을 올바른 방향으로 이끌 수 있기를 바랐습니다.좀 더 자세히 알아보려면 ARIA 역할 문서(모든 것이 도움이 되지만 코드는 정의 제목 아래에 있음)를 살펴보고 ARIA States and Properties 문서를 참조하십시오.둘 다 약간 건조할 수 있지만 ARIA를 사용할 수 있는 모든 목록이 있습니다.Google도 튜토리얼을 제공할 수 있으면 좋겠습니다.

이게 시작하는데 도움이 됐으면 좋겠네요.행운을 빕니다.

언급URL : https://stackoverflow.com/questions/15318661/accessibility-in-single-page-applications-aria-etc