브라우저 양식에 초점을 유지하기 위해 기본 탭 비헤이비어 덮어 쓰기

Question

나는 내게 필요한 옵션을 위해 키보드 탐색을 준수해야하는 첫 번째 응용 프로그램을 구축하고 있습니다.

제 문제는 jquery-ui 모달 대화 상자입니다. 사용자가 대화 상자의 마지막 컨트롤 (이 응용 프로그램에 대한 취소 단추)의 탭을 누르면 포커스가 대화 상자 외부로 이동합니다. 또는 대화 상자의 첫 번째 컨트롤에서 Shift-Tab을 누릅니다.

사용자가이 작업을 수행하면 항상 대화 상자로 다시 돌아갈 수있는 것은 아닙니다. IE8과 FF8은이 점에서 다소 다르게 동작합니다. 나는 다음과 같은 이벤트 핸들러와 탭 키를 캡처하기 위해 노력했습니다 -

lastButton.keydown(function (e) { 
    if (e.which === TAB_KEY_CODE) { 
     e.stopPropagation(); 
     $(this).focus(); 
    } 
}); 

그러나 jQuery를 완료 한 후 브라우저가 키 누름을 처리 나타나는이 작동하지 않습니다.

두 질문 - 접근성 규정에

1. , 난 이것에 대해 걱정해야합니까? 유용성 때문에 내가해야한다고 생각합니다.
2. 이 방법을 사용할 수 있습니까?

Answer 1

아마 당신은 전파를 중지하는 대신 preventDefault()와 기본 동작을 방지해야하며를 keyDown 대신 키 입력을 사용합니다.
이렇게하면 초점을 되 찾을 필요가 없습니다.

전파가 중지되면 이벤트가 버블 링되지 않습니다. stopImmediatePropagation()을 사용하는 것에 대해 생각할 수는 있지만 탭 누름에서 입력을 변경하면 그런 식으로 중지 될 수없고 preventDefault()가 더 정확하다고 생각합니다. 여기

lastButton.keypress(function (e) { 
    if (e.which === TAB_KEY_CODE) { 
     e.preventDefault(); 
    } 
}); 

바이올린 : http://jsfiddle.net/jfRzM/

Answer 2

내 문제는 JQuery와 - UI를 모달 대화 상자을 할 수있다. 사용자가 대화 상자의 마지막 컨트롤 (이 응용 프로그램에 대한 취소 단추)의 탭을 누르면 포커스가 대화 상자 외부로 이동합니다. 또는 대화 상자의 첫 번째 컨트롤에서 Shift-Tab을 누릅니다.

... 그리고 몇 번의 누름을 한 후에 스크롤바가 아래에서 위로 점프하는 회색 반투명 ​​레이어 아래에서 모달 상자 아래에서 탭이 발생합니까? 예, 이것은 키보드를 사용하여 탐색하고 모덜 박스로 돌아가는 방법을 알지 못하는 사람들이 Tab을 100 번 누르지 않으면 걱정됩니다. 맹인은 모달 상자가 여전히 표시된다는 것을 알지 못합니다 (화면 판독기로 전체 DOM을보고 /들을 수 있습니다!) 페이지/스크립트가 제출 또는 취소 결정을 기다리고 있으므로 문제가됩니다. .

올바른 예제는 http://hanshillen.github.com/jqtest/#goto_dialog입니다 (대화 상자의 탭을 클릭하면 앵커가있는 직접 링크가 작동하지 않습니다). Close 또는 OK를 클릭 할 때까지 모달 상자 내부를 영원히 탭합니다. 모달 상자를 트리거 한 포커스 된 요소를 다시 표시합니다 (모달 상자를 떠난 후에 다음 포커스 가능 요소에 초점을 맞추어야하지만 생각하지 않아야합니다. 여기서 가장 큰 접근성 문제).
이 일련의 스크립트는 jQueryUI를 기반으로하며 키보드 및 ARIA 지원과 원본 스크립트에있을 수있는 액세스 가능성 문제에 대해 크게 향상되었습니다. 추천!(jQuery UI 원본 스크립트와이 스크립트를 섞어 보려고했으나 아무 것도 작동시키지 못했지만 그렇게하지 않아도되었습니다.이 스크립트는 스스로 잘 작동합니다.