JavaScript는 소규모 동적 구성요소에서 React 또는 Angular와 같은 JavaScript 프레임워크에서 실행되는 전체 제품에 이르기까지 거의 모든 제작물에서 중요한 역할을 합니다.
이러한 JavaScript 사용 (또는 과도한 사용)으로 인해 대량의 코드로 인한 긴 로드 시간, 시맨틱이 아닌 HTML 요소 사용, JavaScript를 통한 HTML 및 CSS 삽입과 같은 여러 우려되는 동향이 발생했습니다. 그리고 접근성이 이러한 각 요소에 어떻게 적용되는지 확실하지 않을 수 있습니다.
JavaScript는 사이트의 접근성에 큰 영향을 미칠 수 있습니다. 이 모듈에서는 JavaScript로 향상된 접근성의 일반적인 패턴과 JavaScript 프레임워크 사용 시 발생하는 접근성 문제의 해결 방법을 공유합니다.
트리거 이벤트
JavaScript 이벤트를 사용하면 사용자가 웹 콘텐츠와 상호작용하고 특정 작업을 실행할 수 있습니다. 스크린 리더 사용자, 미세 운동 기능 장애가 있는 사용자, 마우스나 트랙패드가 없는 사용자 등 많은 사용자가 키보드 지원을 사용하여 웹과 상호작용합니다. JavaScript 작업에 키보드 지원을 추가하는 것이 중요합니다. 이러한 사용자 모두에게 영향을 미치기 때문입니다.
클릭 이벤트를 살펴보겠습니다.
onClick() 이벤트가 <button> 또는 <a>와 같은 시맨틱 HTML 요소에서 사용되면 마우스와 키보드 기능이 모두 포함됩니다. 그러나 onClick() 이벤트가 일반 <div>와 같은 시맨틱이 아닌 요소에 추가되면 키보드 기능이 자동으로 적용되지 않습니다.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
CodePen에서 이 비교를 미리 보세요.
시맨틱이 아닌 요소가 트리거 이벤트에 사용되는 경우 엔터 또는 스페이스바 키 누르기를 감지하기 위해 keydown/keyup 이벤트를 추가해야 합니다. 시맨틱이 아닌 요소에 트리거 이벤트를 추가하는 것을 잊어버리는 경우가 많습니다. 하지만 잊어버리면 마우스로만 액세스할 수 있는 구성요소가 됩니다. 키보드 전용 사용자는 연결된 작업에 액세스할 수 없습니다.
페이지 제목
문서 모듈에서 배운 것처럼 페이지 제목은 스크린 리더 사용자에게 필수적입니다. 사용자에게 현재 위치한 페이지와 새 페이지로 이동했는지 여부를 알려줍니다.
JavaScript 프레임워크를 사용하는 경우 페이지 제목을 처리하는 방법을 고려해야 합니다. 이는 단일 index.html 파일에서 로드되는 단일 페이지 앱 (SPA)에 특히 중요합니다. 전환 또는 경로 (페이지 변경)에는 페이지 새로고침이 포함되지 않기 때문입니다. 사용자가 SPA에서 새 페이지를 로드할 때마다 기본적으로 제목이 변경되지 않습니다.
SPA의 경우 document.title 값을 수동으로 추가하거나 JavaScript 프레임워크에 따라 도우미 패키지로 추가할 수 있습니다. 스크린 리더 사용자에게 업데이트된 페이지 제목을 알리는 작업은 추가 작업이 필요할 수 있지만 동적 콘텐츠와 같은 옵션이 있으므로 다행입니다.
동적 콘텐츠
가장 강력한 JavaScript 기능 중 하나는 페이지의 모든 요소에 HTML과 CSS를 추가하는 기능입니다. 개발자는 사용자의 작업이나 행동을 기반으로 동적 애플리케이션을 만들 수 있습니다.
사용자가 웹사이트 또는 앱에 로그인할 때 사용자에게 메시지를 전송해야 한다고 가정해 보겠습니다. 메시지가 흰색 배경에서 눈에 띄고 '로그인되었습니다'라는 메시지를 전달하려고 합니다.
innerHTML 요소를 사용하여 콘텐츠를 설정할 수 있습니다.
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
setAttribute를 사용하여 비슷한 방식으로 CSS를 적용할 수 있습니다.
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
큰 힘에는 큰 책임이 따른다. 안타깝게도 HTML 및 CSS의 JavaScript 삽입은 액세스할 수 없는 콘텐츠를 만드는 데 오용되어 왔습니다. 다음은 몇 가지 일반적인 오용 사례입니다.
| 오용 가능성 | 올바른 사용 |
|---|---|
| 시맨틱이 아닌 HTML의 대규모 청크 렌더링 | 작은 시맨틱 HTML 조각 렌더링 |
| 보조 기술에서 동적 콘텐츠를 인식할 시간을 허용하지 않음 | setTimeout() 시간 지연을 사용하여 사용자가 전체 메시지를 들을 수 있도록 함 |
onFocus()의 스타일 속성을 동적으로 적용 |
CSS 스타일시트의 관련 요소에 :focus 사용 |
| 인라인 스타일을 적용하면 사용자 스타일시트가 제대로 읽히지 않을 수 있습니다. | 테마의 일관성을 유지하기 위해 CSS 파일에 스타일 유지 |
| 전체 사이트 성능을 저하시키는 매우 큰 JavaScript 파일 만들기 | JavaScript를 적게 사용합니다. CSS에서 애니메이션이나 고정 탐색과 같은 유사한 기능을 실행할 수 있으며, CSS는 더 빠르게 파싱되고 성능이 더 우수합니다. |
CSS의 경우 인라인 스타일을 추가하는 대신 CSS 클래스를 전환합니다. 이렇게 하면 재사용성과 단순성을 유지할 수 있습니다. 페이지에서 숨겨진 콘텐츠를 사용하고 클래스를 전환하여 동적 HTML의 콘텐츠를 숨기거나 표시합니다. JavaScript를 사용하여 페이지에 콘텐츠를 동적으로 추가해야 하는 경우 간단하고 간결하며 액세스할 수 있는 콘텐츠를 사용하세요.
포커스 관리
키보드 포커스 모듈에서는 포커스 순서와 표시기 스타일을 다뤘습니다. 포커스 관리는 포커스를 트랩할 시점과 위치, 트랩해서는 안 되는 시점을 아는 것입니다.
포커스 관리는 키보드 전용 사용자에게 중요합니다.
구성요소 수준
구성요소의 포커스가 제대로 관리되지 않을 때 키보드 트랩을 만들 수 있습니다. 키보드 전용 사용자가 구성요소에 멈추거나 포커스가 유지되어야 할 때 유지되지 않으면 키보드 트랩이 발생합니다.
사용자가 포커스 관리 문제를 경험하는 가장 일반적인 패턴 중 하나는 모달 구성요소입니다. 키보드 전용 사용자가 모달을 접했을 때는 모달의 실행 가능한 요소 간에 탭할 수 있어야 하지만 모달을 명시적으로 닫지 않고는 모달 외부로 나가는 것은 허용되어서는 안 됩니다. 이 포커스를 올바르게 트랩하려면 JavaScript가 필요합니다.
페이지 수준
사용자가 페이지에서 페이지로 이동할 때도 포커스가 유지되어야 합니다. 이는 브라우저 새로고침이 없고 모든 콘텐츠가 동적으로 변경되는 SPA에서 특히 그렇습니다. 사용자가 애플리케이션 내의 다른 페이지로 이동하기 위해 링크를 클릭할 때마다 포커스가 동일한 위치에 유지되거나 완전히 다른 위치에 배치될 수 있습니다.
페이지 간에 전환 (또는 라우팅)할 때 개발팀은 페이지가 로드될 때 포커스가 이동할 위치를 결정해야 합니다.
이를 달성하는 방법에는 여러 가지가 있습니다.
aria-live공지사항으로 기본 컨테이너에 포커스를 설정합니다.- 포커스를 주요 콘텐츠로 건너뛰는 링크로 다시 지정합니다.
- 포커스를 새 페이지의 최상위 제목으로 이동합니다.
포커스를 어디에 둘지는 사용 중인 프레임워크와 사용자에게 제공하려는 콘텐츠에 따라 다릅니다. 문맥 또는 작업에 종속될 수 있습니다.
상태 관리
JavaScript가 접근성에서 중요한 또 다른 영역은 상태 관리 또는 구성요소 또는 페이지의 현재 시각적 상태가 저시력, 시각장애, 청각장애 및 시각장애 사용자에게 전달되는 경우입니다.
구성요소 또는 페이지의 상태는 ARIA 및 HTML 모듈에서 소개된 대로 ARIA 속성을 통해 관리되는 경우가 많습니다. 요소의 상태를 관리하는 데 사용되는 가장 일반적인 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
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
최신 JavaScript는 웹 개발자가 강력한 웹 애플리케이션을 만들 수 있는 강력한 언어입니다. 이로 인해 과도한 설계가 이루어지고 이에 따라 액세스할 수 없는 패턴이 생겨날 수 있습니다. 이 모듈의 JavaScript 패턴과 도움말을 따르면 모든 사용자가 앱에 더 쉽게 액세스할 수 있습니다.
이해도 확인
자바스크립트 지식 테스트
JavaScript로 요소의 스타일을 변경하는 가장 좋은 방법은 무엇인가요?
모든 JavaScript 작업이 키보드 사용자를 지원할 수 있나요?