JavaScript

JavaScript는 작은 동적 구성요소에서 React 또는 Angular와 같은 JavaScript 프레임워크에서 실행되는 전체 제품에 이르기까지 우리가 만드는 거의 모든 제품에서 중요한 역할을 합니다.

이와 같은 자바스크립트 사용 또는 남용으로 인해 대량의 코드로 인한 로드 시간 지연, 비시맨틱 HTML 요소 사용, 자바스크립트를 통한 HTML 및 CSS 삽입과 같은 여러 경향성이 커지고 있습니다. 그리고 각 부분에 접근성이 얼마나 적합한지 확신할 수 없을 수도 있습니다.

자바스크립트는 사이트의 접근성에 큰 영향을 줄 수 있습니다. 이 모듈에서는 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에서 이 비교를 미리 봅니다.

비시맨틱 요소가 트리거 이벤트에 사용되는 경우 Enter 또는 스페이스바 키 누름을 감지하기 위해 keydown/keyup 이벤트를 추가해야 합니다. 비시맨틱 요소에 트리거 이벤트를 추가하는 것을 잊어버리는 경우가 많습니다. 안타깝게도 이를 잊어버리면 마우스를 통해서만 액세스할 수 있는 구성요소가 결과로 생성됩니다. 키보드 전용 사용자는 연결된 작업에 액세스할 수 없게 됩니다.

페이지 제목

문서 모듈에서 알아본 것처럼 페이지 제목은 스크린 리더 사용자에게 필수적입니다. 사용자에게 현재 어느 페이지에 있는지, 새 페이지로 이동했는지 여부를 알려줍니다.

JavaScript 프레임워크를 사용하는 경우 페이지 제목을 처리하는 방법을 고려해야 합니다. 이는 단일 index.html 파일에서 로드되는 단일 페이지 앱 (SPA)의 경우 특히 중요합니다. 전환 또는 경로 (페이지 변경)에는 페이지 새로고침이 포함되지 않기 때문입니다. 사용자가 SPA에서 새 페이지를 로드할 때마다 제목은 기본적으로 변경되지 않습니다.

SPA의 경우 document.title 값을 수동으로 추가하거나 도우미 패키지 (JavaScript 프레임워크에 따라 다름)를 사용하여 추가할 수 있습니다. 스크린 리더 사용자에게 업데이트된 페이지 제목을 알리기 위해서는 몇 가지 추가 작업이 필요할 수 있지만 다행히 동적 콘텐츠와 같은 옵션이 있습니다.

동적 콘텐츠

가장 강력한 자바스크립트 기능 중 하나는 페이지의 모든 요소에 HTML과 CSS를 추가하는 기능입니다. 개발자는 사용자의 행동이나 행동을 기반으로 동적 애플리케이션을 만들 수 있습니다.

사용자가 웹사이트나 앱에 로그인할 때 사용자에게 메시지를 보내야 한다고 가정해 보겠습니다. 메시지가 흰색 배경에서 눈에 띄도록 하고 '로그인되었습니다'라는 메시지를 전달하려고 합니다.

innerHTML 요소를 사용하여 콘텐츠를 설정할 수 있습니다.

document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';

setAttribute를 사용하여 비슷한 방식으로 CSS를 적용할 수 있습니다.

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

강력한 힘에는 큰 책임이 따릅니다. 안타깝게도 HTML 및 CSS의 자바스크립트 삽입은 지금까지 오용되어 액세스할 수 없는 콘텐츠를 만들어 왔습니다. 다음은 몇 가지 일반적인 오용입니다.

CSS의 경우 인라인 스타일을 추가하는 대신 CSS 클래스를 전환합니다. 이렇게 하면 재사용성과 단순성을 높일 수 있습니다. 페이지의 숨겨진 콘텐츠를 사용하고 클래스를 전환하여 동적 HTML의 콘텐츠를 숨기거나 표시합니다. 자바스크립트를 사용하여 페이지에 콘텐츠를 동적으로 추가해야 하는 경우 단순하고 간결하며 쉽게 액세스할 수 있어야 합니다.

포커스 관리

키보드 포커스 모듈에서는 포커스 순서와 표시기 스타일을 다루었습니다. 포커스 관리는 포커스를 트랩해야 하는 시점과 위치, 트래핑해서는 안 되는 시점을 파악하는 것입니다.

포커스 관리는 키보드 전용 사용자에게 매우 중요합니다.

구성요소 수준

구성요소의 포커스가 제대로 관리되지 않는 경우 키보드 트랩이 생성될 수 있습니다. 키보드 트랩은 키보드 전용 사용자가 구성요소에 갇히거나 포커스가 유지되어야 할 때 유지되지 않을 때 발생합니다.

사용자가 포커스 관리 문제를 경험하는 가장 일반적인 패턴 중 하나는 모달 구성요소입니다. 키보드 전용 사용자가 모달을 마주치면 사용자는 모달의 실행 가능한 요소 사이를 탭할 수 있어야 하지만 명시적으로 닫지 않는 한 모달 외부에서 모달 외부로 이동해서는 안 됩니다. JavaScript는 이 포커스를 적절히 트래핑하는 데 필수적입니다.

페이지 수준

사용자가 페이지 간에 이동할 때도 포커스가 유지되어야 합니다. 브라우저 새로고침이 없고 모든 콘텐츠가 동적으로 변경되는 SPA에서 특히 그렇습니다. 사용자가 링크를 클릭하여 애플리케이션 내의 다른 페이지로 이동할 때마다 포커스가 동일한 위치에 유지되거나 완전히 다른 위치에 배치될 수 있습니다.

페이지 간 (또는 라우팅) 간에 전환할 때 개발팀은 페이지가 로드될 때 포커스가 있는 위치를 결정해야 합니다.

이를 위한 여러 가지 기법이 있습니다.

• aria-live 알림을 사용하여 기본 컨테이너에 포커스를 배치합니다.
• 기본 콘텐츠로 건너뛰려면 링크에 포커스를 다시 가져갑니다.
• 새 페이지의 최상위 제목으로 포커스를 이동합니다.

어디에 초점을 맞출지는 사용 중인 프레임워크와 사용자에게 제공할 콘텐츠에 따라 달라집니다. 맥락 또는 행동에 따라 다를 수 있습니다.

상태 관리

접근성에 자바스크립트가 중요한 또 다른 영역은 상태 관리 또는 구성요소나 페이지의 현재 시각적 상태가 저시력자, 시각장애인 또는 청각장애인 보조 기술 사용자에게 전달되는 경우입니다.

구성요소나 페이지의 상태는 ARIA 및 HTML 모듈에 소개된 바와 같이 ARIA 속성을 통해 관리되는 경우가 많습니다. 요소의 상태를 관리하는 데 도움이 되는 가장 일반적인 ARIA 속성 유형 몇 가지를 살펴보겠습니다.

구성요소 수준

페이지 콘텐츠와 사용자에게 필요한 정보에 따라 구성요소에 관한 정보를 사용자에게 전달할 때 고려해야 할 많은 ARIA 상태가 있습니다.

예를 들어 aria-expanded 속성을 사용하여 드롭다운 메뉴 또는 목록이 펼쳐지거나 접히는지 사용자에게 알릴 수 있습니다.

또는 aria-pressed를 사용하여 버튼이 눌렸음을 나타낼 수도 있습니다.

ARIA 속성을 적용할 때는 신중하게 선택하는 것이 중요합니다. 사용자 플로우를 통해 어떤 중요한 정보를 사용자에게 전달해야 하는지 파악합니다.

페이지 수준

개발자는 종종 ARIA 라이브 영역이라는 시각적으로 숨겨진 영역을 사용하여 화면의 변경사항을 알리고 보조 기술(AT) 사용자에게 메시지를 알립니다. 이 영역을 자바스크립트와 페어링하여 전체 페이지를 새로고침하지 않고도 페이지의 동적 변경사항을 사용자에게 알릴 수 있습니다.

지금까지 JavaScript는 동적 특성으로 인해 aria-live 및 알림 영역의 콘텐츠를 알리는 데 어려움을 겪었습니다. DOM에 콘텐츠를 비동기식으로 추가하면 AT가 지역을 선택해 알리기가 어려워집니다. 콘텐츠를 올바르게 읽으려면 실시간 또는 알림 영역이 로드 시 DOM에 있어야 하며 그러면 텍스트가 동적으로 교체될 수 있습니다.

JavaScript 프레임워크를 사용하는 경우 다행히도 거의 모든 프레임워크에 모든 작업을 실행하고 완전히 액세스할 수 있는 '실시간 아나운서' 패키지가 있습니다. 라이브 리전을 만들고 이전 섹션에서 설명한 문제를 처리하는 데 신경 쓸 필요가 없습니다.

다음은 일반적인 JavaScript 프레임워크를 위한 몇 가지 라이브 패키지입니다.

• React: react-aria-live 및 react-a11y-announcer
• 각진: LiveAnnouncer
• Vue: vue-a11y-utils

최신 JavaScript는 웹 개발자가 강력한 웹 애플리케이션을 만들 수 있게 해주는 강력한 언어입니다. 이로 인해 과도한 엔지니어링이 발생하거나 더 나아가 액세스 불가능한 패턴으로 이어질 수 있습니다. 이 모듈의 자바스크립트 패턴과 도움말을 따르면 모든 사용자가 앱에 더 쉽게 액세스할 수 있습니다.

학습 내용 확인하기

자바스크립트에 관한 지식 테스트