6

나는 트위터 부트 스트랩과 함께 프로젝트를 진행하고 화면 판독기를 사용하여 JavaScript components 주위를 연주하고있다. 내가 모달 대화 상자를 실행할 때접근 가능한 모달을 수행하는 방법이 있습니까?

는 죠스는 해당 페이지의 다음 링크로 이동 모달를 건너 뜁니다.

접근 모달을 구현하는 방법이 있나요? 내가 생각

또 다른 해결책은 사용자가 화면 판독기를 사용할 때 모달의 기능에 정적 페이지를 만들고,이 페이지로 리디렉션하는 것입니다. 사용자가 스크린 리더를 사용하고 있다면 어떻게 든 감지 할 수 있습니까?

답변

6

여기에 접근 모달 대화 상자입니다.

http://irama.org/web/dhtml/lightbox/ 라이트 박스와 모달 대화 상자 사이에는 약간의 차이점이 있습니다. 중요한 것은 모달 파트와 키보드 관리입니다.
DHTML 스타일 가이드dialog modal 부분과 W3C/WAI-ARIA Making a Dialog Modal의 비공식 사본으로 읽을 수도 있습니다. 좀 더 DIY 접근 방식을 필요로하는 경우

J. Wajsberg는 trap the keyboard input inside a DOM element 할 수있는 jQuery 플러그인을 썼다.

+0

대단히 감사합니다! 매우 유용한 답변입니다. –

0

i는 사용자가 화면 판독기를 사용하는 경우 자동으로 감지에 대한 솔루션을 모른다. 그러나 키보드를 사용하고 "특수 모드"를 표시하는 경우 활성화 할 수있는 페이지 시작 부분 (왼쪽 : -1000em 및 위치 : 절대)의 링크를 숨기는 Google 솔루션이 있습니다. 대화 HTML의 DIV에 아리아와 = 아리아 원자 "true"로 아리아 - 라이브 = "독단적"속성을 사용하도록 모달 대화 시도에 대한

<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a> 

. 대화 상자의 내용을 발표해야합니다. http://hanshillen.github.com/jqtest/#goto_dialog

모달가 활성화되면이 사용자가 명시 적으로 닫혀까지, 키보드 탐색 대화 안에 갇혀있다 :

관련 문제