단일 페이지 앱은보기 변경 사항을 전달할 때 중요한 접근성 문제를 제기합니다. 페이지를 새로 고치지 않으면 화면 판독기가 이러한 중요한 UI 변경 사항을 인식하지 못하므로 시각 장애가있는 사용자는 혼란스럽고 인식하지 못합니다.
한 가지 해결책은 페이지 제목을 기반으로 메시지를 만들고 ARIA 라이브 영역을 활용하여 유용한 메시지를 통해 새보기가로드되었음을 명시 적으로 알리는 것입니다. 먼저 viewContent가 업데이트 될 때 호출되는 함수를 만듭니다. AngularJS는이를 위해 $ viewContentLoaded 이벤트를 제공합니다. 컨트롤러 코드에서 이벤트를 수신하고 CoffeeScript에서 함수를 호출합니다.
app.controller’PageController’, ($ scope, $ location, $ http)-> $ scope. $ on’$ viewContentLoaded’, declare_view_loaded
Announce_view_loaded 함수에서 페이지 제목을 업데이트하고 메시지를 알립니다. 단일 페이지 프레임 워크는 페이지 제목을 자동으로 업데이트하지 않지만 페이지 제목을 현재보기와 동기화하면 사용자가보기를 더 잘 이해할 수 있습니다.
이를 수행하는 한 가지 방법은 뷰 제목을 저장하기 위해 뷰의 어딘가에 데이터 속성을 사용하는 것입니다.
document.title = $ ( '[data-viewtitle]'). data’viewtitle’
이제 업데이트 된 페이지 제목을 사용하여 메시지를 만들고 알리십시오.
$ .announce (document.title +’,보기로드 됨’)
$ .announce ()는 보이지 않는 단일 라이브 영역을 사용하여 콘텐츠를 알리는 jQuery 함수입니다. 이 접근 방식은 라이브 영역의 임시 사용에 비해 코드 및 디버깅 작업을 단순화하는 데 도움이됩니다. 그러나 기억해야 할 몇 가지 모범 사례가 있습니다.
먼저 aria-live = "polite | assertive"를 사용하여 콘텐츠를 알리기 위해 페이지에 단일 '아나운서'라이브 영역을 만듭니다. 라이브 지역 역할 (예 : role = "alert | timer | log")을 포함하여 다른 라이브 지역을 사용하지 마십시오. 라이브 지역의 예 :
div aria-live = "polite"id = "announcer"> (여기에 추가되거나 업데이트 된 텍스트는 발표 될 예정입니다.) / div>
둘째, 콘텐츠 업데이트 직후 라이브 영역의 콘텐츠를 지 웁니다. 이것은 사용자가 오래된 메시지에 걸려 넘어지는 것을 방지합니다.
마지막으로 모든 접근성 기술과 마찬가지로 $ .announce ()를 신중하게 사용하십시오. 중요한 UI 업데이트를 전달하는 데만 사용해야합니다.
말: 패트릭 폭스
Patrick Fox는 Austin에있는 Razorfish의 웹 UI 기술 이사입니다. 이 기사는 원래 넷 매거진 271 호에 게재되었습니다.
마음에 드 셨나요? 읽어보세요!
- 디지털 접근성에 대한 디자이너 가이드
- 최고의 무료 스크립트 글꼴
- 무료 그래피티 글꼴 선택
