모달 또는 플라이 아웃 닫기에 중점을 두십시오.

Question

접근성에 대한 질문이 있습니다. 버튼이나 링크를 클릭 할 때 열리는 여러 레이어/모달 또는 플라이 아웃 창이 있습니다.

모달이나 팝업 또는 플라이 아웃을 열려면 클릭 한 원래 요소에 포커스를 유지해야합니다. 포커스가 닫히면 포커스는 클릭 된 요소로 돌아갑니다.

현재 모달 창 또는 플라이 아웃을 닫은 후 페이지 I 탭 포커스 내가 각 부트 스트랩 모달 및 각 상태 공급자 구성을 통해 열 사용자 지정 플라이 아웃 창을 사용하고

를 시작에서 시작됩니다.

Answer 1

모달를 열기 전에 현재의 포커스를 보존함으로써 위의 문제를 해결하고 모달이 WAI-ARIA Authoring Practices - Modal Dialog 상태에서

Answer 2

공식 추천을 닫을 때 포커스를 다시 복원

대화 상자가 닫히고는, 반환 초점

• 호출 요소가 더 이상 존재하지 않는 한 대화 상자를 호출 한 요소로 이동합니다. 그런 다음 논리적 워크 플로우를 제공하는 또 다른 요소에 포커스가 설정됩니다.
  1. 그것은 매우 가능성이 사용자입니다 즉시 대화를 다시 호출 할 필요가 :
  2. 작업 흐름 디자인은 때때로 다른 요소 좀 더 논리적 인 선택을 집중 할 수 있습니다 다음과 같은 조건이 포함되어 있습니다.
  3. 대화 상자에서 완료된 작업은 작업 흐름의 후속 단계와 직접 관련이 있습니다.

은 모달 열기 전에 초점을 맞추고 된 요소에 포커스를 반환하려면 다음

1. 모달을 열기 전에 document.activeElement에 대한 참조를 저장합니다.
2. 모달을 닫은 후 focus은 이전 activeElement에 대한 참조입니다.

예 : 모달을 열기 전에

document.activeElement에 대한 참조를 저장합니다

let previousActiveElement = document.activeElement; 
// Open and close the modal 
if (document.body.contains(previousActiveElement)) { 
    previousActiveElement.focus(); 
} 

Answer 3

이 모달 열기 전에 초점을 맞추고 된 요소에 포커스를 돌아갑니다. 모달을 닫은 후 참조를 이전 activeElement에 집중시킵니다.