자바스크립트는 우리가 만드는 거의 모든 일에서 중요한 역할을 합니다. JavaScript 프레임워크에서 실행되는 전체 제품에 동적 구성요소를 적용할 수 있습니다(예: React 또는 Angular
JavaScript의 이러한 사용 (또는 남용)은 많은 놀라운 추세를 불러왔습니다. 예를 들어 대량의 코드로 인한 로드 시간 증가, 비시맨틱 HTML 사용 요소, JavaScript를 통한 HTML 및 CSS 삽입 등이 있습니다. 그리고 접근성이 각 요소에 어떻게 적용되는지 잘 모르겠다고 합니다.
JavaScript는 사이트의 접근성에 큰 영향을 줄 수 있습니다. 이 모듈에서 접근성 개선을 위한 몇 가지 일반적인 패턴을 공유하고 접근성 문제를 해결하는 솔루션도 제공합니다. JavaScript 프레임워크를 사용해 보세요
트리거 이벤트
JavaScript 이벤트를 사용하면 사용자는 웹 콘텐츠와 상호 작용하고 지정할 수 있습니다. 스크린 리더 사용자와 같은 많은 사람들은 미세 운동 기능 장애가 있는 사람, 마우스나 트랙패드가 없는 사람, 키보드 지원에 의존하여 웹과 상호작용합니다. JavaScript 작업에 키보드 지원을 추가해야 합니다. 영향을 미칩니다.
클릭 이벤트를 살펴보겠습니다.
onClick() 이벤트가 <button>와 같은 시맨틱 HTML 요소에 사용되는 경우
또는 <a>이면 자연스럽게 마우스와 키보드 기능이 모두 포함됩니다. 하지만
onClick() 이벤트 시 키보드 기능이 자동으로 적용되지 않음
일반 <div>와 같은 비시맨틱 요소에 추가됩니다.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
CodePen에서 비교 결과를 미리 확인하세요.
비시맨틱 요소가 트리거 이벤트에 사용되면 keydown/keyup 이벤트 Enter 또는 스페이스 키 누름을 감지하도록 추가되어야 합니다. 트리거 이벤트 추가 비의미론적인 요소는 종종 잊혀집니다 안타깝게도 잊고 있을 때, 마우스를 통해서만 액세스할 수 있는 구성요소가 생성됩니다. 키보드 전용 사용자는 관련 작업에 액세스할 수 없습니다.
페이지 제목
문서 모듈에서 알아본 것처럼 페이지 제목은 스크린 리더 사용자에게 필수적입니다. 어떤 페이지를 방문했는지 사용자가 새 페이지로 이동했는지를 확인할 수 있습니다.
JavaScript 프레임워크를 사용하는 경우
있습니다. 이는 특히
단일 페이지 앱 (SPA)
단일 index.html 파일에서 전환 또는 경로로 로드됨 (페이지
페이지 새로고침이 필요하지 않습니다. 사용자가 Google 쇼핑에서 새 페이지를 로드할 때마다
제목이 기본적으로 변경되지 않습니다.
SPA의 경우 document.title 값은 수동으로 추가하거나 도우미 패키지를 사용하여 추가할 수 있습니다( JavaScript 프레임워크). 새로운 소식 업데이트된 페이지 제목 추가 작업이 필요할 수 있지만 동적 콘텐츠와 같은 옵션을 사용할 수 있습니다.
동적 콘텐츠
가장 강력한 자바스크립트 기능 중 하나는 HTML을 CSS를 추가할 수 있습니다. 개발자는 동적 애플리케이션을 기반으로 생성된 광고 소재를 보게 됩니다.
사용자가 웹사이트에 로그인할 때 사용자에게 메시지를 보내야 한다고 가정해 보겠습니다. 있습니다. 메시지가 흰색 배경에서 눈에 띄도록 하고 '로그인되었습니다.'라는 메시지가 표시됩니다.
innerHTML 요소를 사용할 수 있습니다.
를 사용하여 콘텐츠를 설정합니다.
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
유사한 방식으로 CSS를 적용할 수 있습니다.
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
힘이 커질수록 책임감도 커집니다. 안타깝게도 JavaScript는 HTML 및 CSS 삽입은 역사적으로 오용되어 있습니다. 다음은 몇 가지 일반적인 오용입니다.
| 오용 가능성 | 올바른 사용 |
|---|---|
| 의미론적이지 않은 HTML의 큰 덩어리 렌더링 | 더 작은 시맨틱 HTML 렌더링 |
| 보조 기술이 동적 콘텐츠를 인식할 시간을 허용하지 않음 | 사용자가 전체 메시지를 들을 수 있도록 setTimeout() 시간 지연 사용 |
onFocus()의 스타일 속성을 동적으로 적용 |
CSS 스타일시트의 관련 요소에 :focus 사용 |
| 인라인 스타일을 적용하면 사용자 스타일시트가 제대로 읽히지 않을 수 있습니다. | 테마의 일관성을 유지하려면 CSS 파일에 스타일을 유지합니다. |
| 전체 사이트 속도를 저하시키는 대용량 자바스크립트 파일 만들기 | JavaScript를 적게 사용합니다. CSS에서 애니메이션 또는 고정 탐색과 같은 유사한 기능을 실행할 수 있습니다. 이러한 함수는 더 빠르게 파싱되고 성능이 더 우수합니다. |
CSS의 경우 다음과 같이 인라인 스타일을 추가하는 대신 CSS 클래스를 전환하세요. 재사용성과 단순성이 높습니다 페이지에서 숨겨진 콘텐츠를 사용하고 전환 클래스를 사용하여 동적 HTML의 콘텐츠를 숨기고 표시할 수 있습니다. 페이지에 콘텐츠를 동적으로 추가하는 자바스크립트 간결하고 쉽게 액세스할 수 있습니다.
포커스 관리
키보드 포커스 모듈에서는 포커스에 관해 알아보았습니다. 스타일을 지정할 수 있습니다. 집중 관리는 트랩 시기와 위치를 파악하는 것 잡혀서는 안 되는 시점입니다.
포커스 관리는 키보드만 사용하는 사용자에게 매우 중요합니다.
구성요소 수준
구성요소의 포커스가 적절하게 관리되지 않는 경우 키보드 트랩을 생성할 수 있습니다. 키보드 트랩은 키보드만 사용하는 사용자가 구성 요소에 갇힐 때 발생합니다. 포커스가 유지되어야 할 때 유지되지 않습니다.
사용자가 포커스 관리 문제를 경험하는 가장 일반적인 패턴 중 하나입니다. 모달 구성요소에 있습니다 키보드 전용 사용자가 모달을 만나면 모달의 실행 가능한 요소 사이를 탭할 수 있어야 하지만 명시적으로 해제하지 않는 한 모달 외부에서 허용되어서는 안 됩니다. JavaScript는 이 포커스를 적절하게 포착하는 데 필수적입니다.
페이지 수준
사용자가 페이지 간에 이동할 때도 포커스가 유지되어야 합니다. 이것은 특히 SPA의 경우 특히 그렇습니다. 브라우저 새로고침 없음, 모든 콘텐츠는 동적으로 변경됩니다. 사용자가 이동하려는 링크를 클릭할 때마다 다른 페이지로 이동하는 경우 포커스가 동일하게 유지되거나 아마도 다른 곳에 배치될 수 있다는 것입니다.
페이지 (또는 라우팅) 간에 전환할 때 개발팀에서 다음 사항을 결정해야 합니다. 페이지가 로드될 때 포커스가 맞춰지는 곳입니다.
이를 위한 여러 가지 기법이 있습니다.
aria-live알림을 사용하여 기본 컨테이너에 포커스를 둡니다.- 링크에 포커스를 다시 맞추면 메인 콘텐츠로 넘어갑니다.
- 새 페이지의 최상위 제목으로 포커스를 이동합니다.
어디에 초점을 둘지는 사용 중인 프레임워크에 따라 달라집니다. 사용자에게 제공할 콘텐츠를 고려해야 합니다 맥락 또는 종속되지 않습니다.
상태 관리
JavaScript가 접근성에 중요한 또 다른 영역은 상태 관리입니다. 구성요소나 페이지의 현재 시각적 상태가 저시력, 시각장애인 또는 청각장애인 보조 기술 사용자에게 전달되는 경우입니다.
구성요소나 페이지의 상태는 ARIA 속성을 통해 관리되는 경우가 많습니다. ARIA 및 HTML 모듈에 도입되었습니다. ARIA 속성의 가장 일반적인 유형 몇 가지를 검토해 보겠습니다. 요소의 상태를 관리할 수 있습니다.
구성요소 수준
페이지 콘텐츠와 사용자에게 필요한 정보에 따라 여러 ARIA 상태 구성 요소에 대한 정보를 사용자에게 전달할 때 고려해야 할 사항입니다.
예를 들어
aria-expanded 드림
속성을 사용하여 드롭다운 메뉴 또는 목록이 펼쳐져 있거나 또는
접혀 있습니다.
또는 aria-pressed를 사용할 수 있습니다.
이는 버튼이 눌렸음을 나타냅니다.
ARIA 속성을 적용할 때는 신중하게 선택하는 것이 중요합니다. 사용자 플로우를 사용하여 사용자에게 전달해야 하는 중요한 정보를 이해하는 것이 중요합니다.
페이지 수준
개발자는 흔히 숨겨진 영역이라고 하는 ARIA 라이브 지역 화면의 변경사항을 알리고 보조 기술에 알림 메시지를 보냅니다. (AT) 사용자입니다. 이 영역을 JavaScript와 함께 사용하여 사용자에게 동적 광고 게재 여부를 알릴 수 있습니다. 변경할 수 있습니다.
역사적으로 JavaScript는
aria-live 드림
경보 지역을 제공합니다 비동기식으로
DOM을 사용하면 AT가 해당 지역을 선택하여 발표하기가 어렵습니다.
콘텐츠를 제대로 읽으려면 라이브 또는 알림 영역이
DOM이 로드되면 텍스트를 동적으로 교체할 수 있습니다.
JavaScript 프레임워크를 사용하는 경우 좋은 소식은 거의 모든 프레임워크가 "라이브 아나운서" 모든 작업을 알아서 처리하고 있습니다. 라이브 지역을 만들고 이 지역을 다루는 데 대해 걱정할 이전 섹션에서 설명한 문제가 있을 수 있습니다
다음은 일반적인 JavaScript 프레임워크를 위한 라이브 패키지입니다.
- React: react-aria-live 및 react-a11y-announcer
- 모서리:
LiveAnnouncer - 뷰: vue-a11y-utils
최신 자바스크립트는 웹 개발자가 강력한 웹 애플리케이션입니다. 이로 인해 때때로 과도한 엔지니어링이 발생하고 액세스할 수 없는 패턴입니다. JavaScript 패턴 및 팁을 준수함 이 모듈에서는 모든 사용자가 앱에 더 쉽게 액세스하도록 할 수 있습니다.
이해도 확인
자바스크립트에 대한 지식 테스트
자바스크립트로 요소의 스타일을 변경하는 가장 좋은 방법은 무엇인가요?
모든 자바스크립트 작업이 키보드 사용자를 지원할 수 있나요?