A11y 대화 상자로 접근 가능한 모달 윈도우 구축

모달 최신 브라우저에서 널리 지원됩니다. 그들은 다음과 같이 사용될 수있다. 알림 팝업, 같이 옵트 인 필드, 또는 사진 슬라이드 쇼.

이 창은 다음을 사용하여 빌드 할 수 있습니다. 순수한 CSS 그러나 이것이 가장 접근하기 쉬운 해결책은 아닙니다. 대신 체크 아웃하십시오. A11y 대화 상자, 에 초점을 둔 완전히 작동하는 모달 창 접근성 우선.

그것은 계속된다. 바닐라 자바 ​​스크립트 그것의 자체 맞춤 API 모든 기기에서 모든 최신 브라우저를 지원합니다. 체크 아웃 할 수 있습니다. 이 데모 어떻게 보이는지 보러 간다..

전형적인 모달 창과 비슷하게 보입니다. 그러나이 스크립트 ARIA 태그를 사용합니다. 모든 사용자를위한 현대적인 접근성을 지원한다..

기본적으로 A11y 대화 상자 터치 스크린 지원, 그래서 두드리기는 클릭과 같은 효과를냅니다. 창 밖에서 아무 곳이나 클릭하거나 닫을 수 있습니다. 또는 컴퓨터에서 ESC 키를 누르십시오..

여하튼,이 도서관은 꽤 작습니다., 단지 1.2kb, 모든 CSS와 JS 코드를 포함합니다. 이렇게하면 완전히 액세스 할 수있을 때 가볍게 만들 수 있습니다..

자세한 내용은 GitHub 레포 A11y 대화 상자에는 자신의 문서 페이지, 너무. 여기에는 설치 및 설정 완전한 초보자를위한. 긴 섹션도 있습니다. 버튼 추가를위한 DOM API 모달 창을 열거 나 닫을 수있는 페이지로 이동합니다..

네가하려고한다면 더 접근하기 쉬운 웹 사이트 구축 프로젝트에서 A11y Dialog를 실행하는 것을 진지하게 고려하십시오. 너는 할 수있다. 소스 코드를 얻는다. GitHub에서 다운로드하거나 npm 또는 Bower와 같은 패키지 관리자로부터 다운로드하십시오..

메인 페이지에서 설정 및 기본 JavaScript 기능에 대해 자세히 알아보십시오. 이 라이브러리는 ARIA 접근성보다 훨씬 더, 모달 윈도우의 기능을 확장하려면 테스트 할 가치가 있습니다..