이 기사는 원래 Medium
JavaScript는 적이 아닙니다
내 팁을 읽기 전에 중요한 포인트를 지적하고 싶습니다. 액세스 가능한 웹 사이트를 만드는 것이 JavaScript를 사용할지 여부를 결정해야한다는 의미는 아닙니다. 접근성은 가능한 많은 사람들을 얻는 것입니다. 여기에는 오래된 브라우저 및 컴퓨터를 사용하는 사용자, 느린 인터넷 연결, 엄격한 보안 제한 (예 : JavaScript가없는) 등이 포함됩니다. JavaScript와 같은 상황에서는 경험이 이상적이지 않을 수 있지만 웹 사이트에 액세스 할 수 있고 사용할 수있는 경우에도 충분합니다. JavaScript가 실행 가능한 경우 접근성을 향상시키는 데 사용될 수도 있습니다. Sara Soueidan은 그녀의 툴팁 구성 요소를 만든 경험에 대해 글을 썼습니다. 그녀는 왜“모든 JavaScript-Free 솔루션이 사용자 경험에 부정적인 영향을 미치는 매우 나쁜 단점이 있으며, JavaScript가 접근성에 중요한 이유를 설명합니다. Marco Zehe는 그의 기사에서 "JavaScript는 접근성의 적은 아닙니다! JavaScript 및 접근성에 대해 더 많이 씁니다. 그의 기사를 읽는 것이 좋습니다.
좋은 초점 관리는 필수적입니다하지만 그게 전부는 입문 대화를위한 것입니다! 시작합시다 ... 키보드를 통해 웹 사이트를 탐색 할 수 있는지 확인하는 것이 매우 중요합니다. 많은 사용자가 웹 페이지를 탐색 할 때 키보드에 의존합니다. 여기에는 운동 장애가있는 사람들, 맹인 및 어떤 이유로 마우스 나 터치 패드를 사용할 수없는 사람들이 포함됩니다.
탭키보드를 통해 웹 사이트를 탐색한다는 것은 하나의 집중 가능한 요소에서 DOM 순서의 다른 집중 요소로 점프하는 것을 의미합니다. 이것은 일반적으로 키 또는 shift >를 사용하여 달성됩니다. 집중 가능한 요소에는 링크, 버튼 및 양식 요소가 포함됩니다. 키를 사용하여 선택할 수 있으며 때로는 spacebar 를 사용하여 선택할 수 있습니다. 그들은 다양한 방식으로 집중하고 선택할 수있어 매우 유용한 기본 기능을 가지고 있습니다. 따라서 올바른 의미 론적 요소를 사용하고 논리적 순서로 HTML을 작성하는 것이 합리적입니다.
, 또는 와 같은 요소는 기본적으로 초점을 맞출 수 없습니다. 우리는 종종이 태그를 사용하여 JavaScript로 구동되는 사용자 정의 구성 요소를 만들어 키보드 사용자에게 문제가 될 수 있습니다. 초점이 맞지 않는 요소를 초점을 맞출 수 있도록합니다
당신은 속성 및 정수 값을 추가하여 초점이 맞지 않는 요소를 집중시킬 수 있습니다. 값이 0으로 설정되면 키보드를 통해 요소가 집중되어 액세스 할 수 있습니다. 값이 음수 인 경우 요소는 프로그래밍 방식으로 초점을 맞추고 (예 : JavaScript 사용) 키보드를 통해 액세스 할 수 없습니다. 또한 0보다 큰 값을 사용할 수 있지만 자연스러운 탭 순서를 변경하고 패턴 방지로 간주됩니다. 에 대해 더 자세히 알고 싶다면 Rob Dodson의 A11ycasts 에피소드 "Tabindex를 사용한 Control Focus"를보십시오. JavaScript를 사용한 초점 요소요소가 집중 되더라도 때로는 올바른 DOM 순서에 있지 않습니다. 이를 설명하기 위해 HTML, CSS 및 JS에서 간단한 모달 창 구성 요소 (데모 및 편집 가능한 펜)를 만들었습니다.
탭키를 사용하여 버튼으로 점프하고 를 누르면 모달 창이 나타납니다. 탭 키를 다시 누르면 초점이 모달 창 아래에 시각적으로 표시되는 다음 링크로 점프됩니다. 예상되는 동작은 모달 창 내에서 다음 초점 요소 여야합니다. 그러나 요소가 DOM 순서에 초점을 맞추고 모달 창이 문서의 맨 아래에 있기 때문에 그렇지 않습니다. 이 화면 녹화에서 실제 효과를 볼 수 있습니다. 이 문제를 해결하려면 모달 창을 집중시킨 다음 JavaScript를 사용하여 집중해야합니다.
탭 키를 버튼으로 전환하여 업데이트 된 예제 (데모 및 편집 가능한 펜)에서 이것을 볼 수 있습니다. 를 입력하고 탭 키를 다시 누릅니다. 모달 창 자체가 이제 초점을 맞추 었음을 알 수 있습니다. 이것은 좋지만 여기에는 여전히 두 가지 문제가 있습니다. esc
를 눌러 모달 창을 닫으면 초점이 손실됩니다. 이상적으로는 모달 창을 열기 전에 집중력이 버튼으로 돌아와야합니다. 이를 달성하려면 마지막 초점 요소를 변수에 저장해야합니다.<<> 우리는<h2 tabindex="0">一个可聚焦的标题</h2>
로그인 후 복사로그인 후 복사로그인 후 복사를 사용하여 요소가 현재 초점을 맞출 수 있습니다.
이제 버튼에 대한 참조가 있으므로 모달 창을 닫을 때 다시 집중할 수 있습니다. 나는 다른 펜으로 코드를 업데이트했다 (데모 및 편집 가능한 펜). 접근성은 이제 훨씬 나아지지만 여전히 개선의 여지가 있습니다. 모달 창을 열 때 모달 창 안에 초점을 유지하는 것이 좋습니다. 모달 창은 여전히 팝업 될 수 있습니다. 나는 여기서 세부 사항을 다루지 않을 것이지만 완전성을 위해 "키보드 트랩"(데모 및 편집 가능한 펜)으로 네 번째 펜을 만들었습니다. 모달 창이 활성화되는 한,이 화면 녹화에서 볼 수 있듯이 초점은 모달 창 안에 남아 있습니다. 첫 번째 펜과 마지막 펜을 비교하면 추가 코드가 많지 않다는 것을 알게됩니다. 완벽하지는 않지만 최종 솔루션은 사용하는 것이 훨씬 좋습니다. Google의 사람들이 작성한 Modal Windows에 액세스하는 예와 "Tabindex 사용"이라는 제목의 좋은 기사도 있습니다. 키보드 테스트에 대해 자세히 알아 보려면 WebAim 웹 사이트를 방문하십시오. 그들은 "가장 일반적인 온라인 상호 작용, 상호 작용을위한 표준 키 및 테스트 중에 고려할 기타 정보"목록을 제공합니다. 초점 관리의 더 많은 예를 보려면 Marcy Sutton의 egghead.io 비디오 "CSS, HTML 및 JavaScript를 사용한 Focus Management"또는 Rob Dodson의 A11ycasts 에피소드 "What is Focus?"를 확인하십시오. 》.<<> 버튼이 필요한 경우 <🎜 🎜> 요소 <🎜 🎜> <🎜 🎜>를 사용하십시오.
나는 첫 번째 게시물의 버튼에 대해 글을 썼지 만 많은 사람들이 보편적 요소를 버튼으로 사용합니다. 따라서이 주제에 대해 더 많이 쓰는 것은 아프지 않을 것이라고 생각합니다.
이고 두 번째 버튼은> <🎜 🎜> 또는 <🎜 🎜> 요소 대신 버튼으로 사용하는 몇 가지 문제를 설명하기 위해 펜 (코드가 포함 된 디버그 모드/펜)을 만들었습니다. 페이지를 탐색하면 첫 번째 버튼에 초점을 맞출 수 있지만 두 번째 버튼은 아닙니다. 그 이유는 물론 - 첫 번째 버튼은 입니다.
<div>에 <🎜 🎜>를 추가 하여이 문제를 해결할 수있어 초기에 초점을 맞출 수없는 요소를 집중할 수 있습니다. 그렇기 때문에 세 번째와 네 번째 버튼이 <🎜 🎜>이더라도 집중되는 이유입니다.<span><button>버튼의 문자를 추가하더라도 "div-button"은 실제로 집중되지만 여전히 <input type="button">처럼 작용합니다. 이를 설명하기 위해 모든 <🎜 🎜> 요소에 간단한 클릭 이벤트 핸들러 (PEN)를 추가했습니다. 버튼을 클릭하면 알람 상자가 나타나지 만 키 (<🎜 🎜> enter <🎜 🎜> 또는 <🎜 🎜> spacebar <🎜 🎜>)와 동일하게하려고하면 첫 번째 버튼 만 이벤트가 트리거됩니다. . 불필요한 오버 헤드처럼 보이는 기본 버튼 동작을 완전히 시뮬레이션하려면 "Div-Button"에 주요 이벤트 핸들러를 추가해야합니까? 그렇기 때문에 버튼이 필요한 경우<button>요소를 사용해야합니다. Rob Dodson의 A11ycasts 에피소드 "Just Use Button"을 보거나 Adrian Roselli의 링크, 버튼, 제출 및 divs, Oh My God "를 읽으십시오.<div><div><<> 컨텐츠가 동적으로 변경되면 스크린 리더 사용자에게 알려야합니다.일반적으로, 스크린 리더는 요소가 초점을 맞추거나 사용자가 스크린 리더의 자체 내비게이션 명령을 사용할 때만 컨텐츠를 발표합니다. 내용이 동적으로로드되어 DOM에 삽입되면 시력이있는 사람만이 이러한 변경 사항을 알아 차릴 수 있습니다. Aria 실시간 구역은이 문제에 대한 몇 가지 솔루션을 제공합니다. 예를 들어 어떻게하는지 보여 드리겠습니다. tabindex="0"개인 데이터를 편집하고 저장할 수있는 프로필 설정 페이지가 있다고 가정하십시오. 저장 버튼을 클릭하면 페이지를 다시로드하지 않고 변경 사항이 저장됩니다. 경고는 변경 사항이 성공했는지 사용자에게 알립니다. 이것은 즉시 일어날 수 있으며 시간이 걸릴 수 있습니다. 방금 설명한 내용을 보여주기 위해 짧은 비디오를 녹음했습니다. <div>작업이 성공적이라는 것을 알 수 있지만들을 수 없습니다. 스크린 리더 사용자는 변경 사항을 알지 못하지만이 문제에 대한 쉬운 해결책이 있습니다. 스크린 리더는 메시지 상자에 상태 또는 경고 역할을 추가하면 요소의 업데이트를 듣습니다. <h2 tabindex="0">一个可聚焦的标题</h2>
로그인 후 복사로그인 후 복사로그인 후 복사메시지 텍스트가 변경되면 새 텍스트가 읽습니다. 이 비디오에서 실제로 어떻게 작동하는지 보고이 펜의 코드를 볼 수 있습니다. <<> 코스로 사용자를 치료하십시오 "상태"와 "경고"의 차이점은 "경고"가 다른 것을 발표 할 때 화면 리더를 방해한다는 것입니다. 대신, "상태"는 스크린 리더가 공지를 완료 할 때까지 기다립니다.
는와 같고
는 <🎜 🎜>와 같습니다. 잘 알려진 사전 정의 된 경우, 특정 "실시간 영역 역할"을 사용하는 것이 가장 좋습니다. 또한 브라우저가 역할을 지원하지 않으면 동시에 두 속성을 모두 사용해야 할 수도 있습니다. Léonie Watson은 Aria 실시간 영역에 대한 스크린 리더 지원에서 일부 테스트 결과를 공유했습니다.
및aria-livearia-live="polite"<<> 때때로 그것이 변경되지 않았다고 선언하는 것이 합리적입니다. <,> 기본적으로 스크린 리더는 변경된 컨텐츠 만 표시합니다. 동일한 실시간 영역에 다른 것이 있더라도 일부 텍스트를 발표하는 것이 좋습니다. 기본 동작은role="status"속성을 사용하여 변경할 수 있습니다. True로 설정되면 Assistive Technology는 요소의 전체 내용을 표시합니다.aria-live="assertive"Paul J. Adam은 다른 실시간 로케일을 비교하는role="alert"테스트 사례 데모를 가지고 있습니다. 또한 iOS 8.1에서 VoiceOver로 데모를 테스트하고 실제로 작동하는 방법을 확인할 수있었습니다. <🎜 🎜>의 가능한 사용 사례를 더 잘 이해하려면 녹음을 시청하는 것이 좋습니다 (Voiceover iOS 8.1은 <🎜 🎜> 영역에서 나머지 문자를 읽습니다).<h2 tabindex="0">一个可聚焦的标题</h2>
로그인 후 복사로그인 후 복사로그인 후 복사고려해야 할 사항
실시간 영역은 초점을 이동하지 않고 텍스트 발표만을 트리거합니다. aria-atomic중요한 변경에 대해서만 알림을 사용하십시오. "상태"는 대부분 공손하기 때문에 대부분의 경우 더 좋습니다. 너무 빨리 사라질 수 있으므로 자동으로 사라지는 알람 설계를 피하십시오. 테스트에서 VoiceOver와 관련된 문제가 발생했습니다. CSS를 사용하여 알림을 숨기거나 경고를 동적으로 생성하는 것이 항상 효과적인 것은 아닙니다. 다른 브라우저와 다른 소프트웨어에서 실시간 구역을 철저히 테스트해야합니다.aria-atomicaria-atomic물론Rob Dodson은 또한 세부 사항과 예제 Alert에 대한 A11ycasts 에피소드를 가지고 있습니다! 》. Heydon Pickering은 그의 Aria 샘플 컬렉션에서 또 다른 라이브 지역 예제를 가지고 있습니다. aria-atomicaria-relevant구성 요소가 어떤 사용 패턴에 어떤 사용을 제공 해야하는지 추측 할 필요가 없습니다.구성 요소가 내비게이션 및 접근성 측면에서 제공 해야하는 모든 기능을 생각하기가 종종 어렵습니다. 다행히도 Wai-Aria Authoring Practices 1.1이라는 리소스가 있습니다. WAI-ARIA 작성 관행은 WAI-ARIA를 사용하여 접근 가능한 풍부한 인터넷 애플리케이션을 만드는 방법을 배우는 가이드입니다. 권장 WAI-ARIA 사용 패턴을 설명하고 그 뒤에 개념을 소개합니다. aria-live그들은 아코디언, 슬라이더, 탭 등을 구축하기위한 가이드가 있습니다.
액세스 가능한 JavaScript 구성 요소액세스 가능한 JavaScript 구성 요소를위한 훌륭한 리소스는 다음과 같습니다. 실용적인 아리아 예 modaal- wcag 2.0 레벨 AA 에 의해 액세스 가능한 모달 창 플러그인 frend- 일련의 접근 가능한 현대 프론트 엔드 구성 요소 <: :> mdn : 키보드를 통해 탐색 할 수있는 JavaScript 구성 요소a11y 프로젝트 모드 다른 리소스를 알고 있다면 의견에 공유하십시오. -
요약
- 너머
- 이 기사를 작성하고 내 글을 교정하는 데 도움을 준 Adrian Roselli에게 특별한 감사를드립니다.
JavaScript의 장점을 사용하여 웹 사이트의 접근성을 향상시킵니다. Focus Management에주의를 기울이고 일반적인 사용 패턴을 이해하고 DOM을 운영 할 때 화면 리더 사용자를 고려하십시오. 가장 중요한 것은 웹 사이트를 만든 사람을 잊지 말고 생산 과정에서 재미있게 보내는 것입니다. 그것은 당분간 여기에 있습니다. 이 팁이보다 액세스 가능한 HTML 및 JavaScript를 작성하는 데 도움이되기를 바랍니다. 그의 책 포괄적 인 프론트 엔드 디자인 패턴은 방금 읽은 것의 대부분의 기초이기 때문에 Heydon Pickering에게 감사드립니다. 접근성과 포괄적 인 디자인에 대해 더 많이 배우려면 그의 책을 읽는 것이 좋습니다. - 이것은이 기사의 모든 링크 된 리소스의 목록입니다.
a11ycasts #03 - 초점은 무엇입니까? a11ycasts #04 - tabindex를 사용하여 초점을 제어하십시오 a11ycasts #05 - 버튼 만 사용하십시오 a11ycasts #10 - 경고! 책 : "포괄적 인 프론트 엔드 디자인 모델" 는 0 보다 큰 tabindex를 사용하지 마십시오 CSS, HTML 및 JavaScript를 사용한 초점 관리 초점 요소 - 브라우저 호환성 테이블 링크, 버튼, 제출 및 divs, 오 마이 신 <: :> mdn : htmlelement.focus () <: :> mdn : tabindex 믿을 수 없을 정도로 접근 가능한 모달 창 tabindex 를 사용하십시오 Webaim 키보드 테스트 Webaim 키보드 접근성 wai-aria aria-acomic
액세스 가능한 JavaScript를 쓰는 것에 대한 FAQ접근성 JavaScript 작성의 중요성은 무엇입니까?
내 JavaScript 코드를보다 액세스 할 수있는 방법은 무엇입니까?접근성 작성 JavaScript는 장애인을 포함한 모든 사람이 웹 사이트 나 응용 프로그램을 사용할 수 있도록하기 때문에 중요합니다. 이는 사용자 기반을 넓힐뿐만 아니라 사용자 경험과 만족도를 향상시킵니다. 많은 영역에서는 다양한 장애 차별 청구서에 접근성이 필요하기 때문에 법적 준수에도 중요합니다. JavaScript 코드에 더 액세스 할 수 있도록하는 몇 가지 방법이 있습니다. 먼저 웹 사이트 나 앱이 키보드 친화적인지 확인하십시오. 즉, 사용자는 키보드 만 사용하여 웹 사이트를 탐색 할 수 있어야합니다. 둘째, 웹 사이트가 화면 리더로 쉽게 탐색 할 수 있는지 확인하십시오. 이것은 시맨틱 HTML 및 ARIA 역할을 사용하여 달성 할 수 있습니다. 마지막으로, 항상 이미지에 대한 대체 텍스트를 제공하고 웹 사이트에 충분한 색상 대비가 있는지 확인하십시오.
Aria는 무엇이며 접근성을 어떻게 향상 시키는가?Aria는 접근 가능한 풍부한 인터넷 응용 프로그램을 나타냅니다. 웹 컨텐츠 및 웹 애플리케이션을 장애인이보다 쉽게 액세스 할 수 있도록하는 방법을 정의하는 일련의 속성입니다. ARIA는 AJAX, HTML, JavaScript 및 관련 기술을 사용하여 동적 컨텐츠 및 고급 사용자 인터페이스 컨트롤을 개발하는 데 도움이됩니다. 요소, 역할 및 현재 상태에 대한 추가 정보를 제공하여 접근성을 향상시킬 수 있습니다. 키보드 내비게이션은 어떻게 접근성을 향상 시키는가?키보드 내비게이션은 마우스 나 터치 스크린을 사용할 수없는 사용자에게는 필수적입니다. 키보드 만 사용하여 웹 사이트 또는 앱의 모든 기능에 액세스 할 수 있도록하면 웹 사이트가 이동 또는 비전 장애가있는 사용자에게 더 취약하게 만들 수 있습니다. 이는 및 초점 관리를 JavaScript 코드로 사용하여 달성 할 수 있습니다.
접근성에서 시맨틱 HTML의 역할은 무엇입니까? Semantic HTML은 컨텐츠의 의미론 또는 의미를 향상시키기 위해 HTML 태그를 사용하는 것을 말합니다. 예를 들어, 스타일 대신 버튼에
접근성을위한 충분한 색상 대비를 보장하는 방법은 무엇입니까?
이미지 대체 텍스트를 제공하는 것이 중요합니까?시각 장애가있는 사용자에게는 충분한 색상 대비가 중요합니다. WCAG 2.1 대비 비율 가이드를 준수하는 색상 조합을 선택하여이를 확인할 수 있습니다. 선택한 색상의 대비 비율을 확인하는 데 도움이되는 온라인 도구가 있습니다. tabindex이미지에 대체 텍스트를 제공하는 것은 화면 리더에 의존하는 시각 장애인에게 필수적입니다. 대체 텍스트는 이미지를 볼 수없는 사용자가 여전히 페이지 컨텍스트에서 자신의 목적을 이해할 수 있도록 이미지 컨텐츠를 정확하게 설명해야합니다. JavaScript 코드의 접근성을 테스트하는 방법은 무엇입니까? JavaScript 코드의 접근성을 테스트하는 데 사용할 수있는 몇 가지 도구가 있습니다. 이러한 도구에는 AX 및 Lighthouse와 같은 자동 테스트 도구와 스크린 리더 및 키보드 전용 탐색을 사용한 수동 테스트 도구가 포함됩니다. 자동화 된 테스트와 수동 테스트의 조합을 사용하여 완전한 접근성을 보장하는 것이 중요합니다. <button>JavaScript의 일반적인 접근성 문제는 무엇입니까?JavaScript의 일부 일반적인 접근성 문제에는 키보드 접근성 부족, 색상 대비 불충분, 이미지에 대한 대체 텍스트 부족, Aria 문자 부족 또는 Aria 문자의 잘못된 사용이 포함됩니다. 이러한 문제로 인해 귀하의 웹 사이트는 장애인이 사용하기 어렵거나 사용할 수 없게 만들 수 있습니다. JavaScript 및 접근성에 대해 더 많이 배우는 방법은 무엇입니까?
JavaScript 및 접근성에 대해 더 많이 배우는 데 도움이되는 많은 리소스가 있습니다. 이러한 리소스에는 온라인 자습서, 코스 및 W3C와 같은 조직의 문서가 포함됩니다. 또한 접근 가능한 코드 작성 및 접근성을 정기적으로 테스트하면 이해와 기술을 크게 향상시킬 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
