JavaScript

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

이러한 JavaScript 사용 (또는 과도한 사용)으로 인해 많은 양의 코드, 비의미론적 HTML 요소 사용, JavaScript를 통한 HTML 및 CSS 삽입 등 우려스러운 추세가 나타났습니다. 또한 접근성이 이러한 각 부분에 어떻게 적용되는지 잘 모를 수도 있습니다.

JavaScript는 사이트의 접근성에 큰 영향을 미칠 수 있습니다. 이 모듈에서는 JavaScript로 개선된 접근성에 관한 일반적인 패턴과 JavaScript 프레임워크 사용으로 발생하는 접근성 문제의 해결 방법을 공유합니다.

트리거 이벤트

JavaScript 이벤트를 사용하면 사용자가 웹 콘텐츠와 상호작용하고 특정 작업을 실행할 수 있습니다. 스크린 리더 사용자, 미세 운동 능력 장애가 있는 사용자, 마우스나 트랙패드가 없는 사용자 등 많은 사용자가 키보드 지원을 통해 웹과 상호작용합니다. 이러한 모든 사용자에게 영향을 미치므로 JavaScript 작업에 키보드 지원을 추가하는 것이 중요합니다.

클릭 이벤트를 살펴보겠습니다. <button> 또는 <a>와 같은 시맨틱 HTML 요소에 onClick() 이벤트가 사용되면 마우스와 키보드 기능이 모두 포함됩니다. 하지만 일반 <div>와 같은 비시맨틱 요소에 onClick() 이벤트가 추가되면 키보드 기능이 자동으로 적용되지 않습니다.

금지사항
<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 프레임워크에 따라 다름). 스크린 리더 사용자에게 업데이트된 페이지 제목을 알리려면 추가 작업이 필요할 수 있지만 동적 콘텐츠와 같은 옵션이 있습니다.

동적 콘텐츠

가장 강력한 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 클래스를 전환하세요. 이렇게 하면 재사용성과 단순성이 보장됩니다. 페이지에서 숨겨진 콘텐츠를 사용하고 클래스를 전환하여 동적 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 프레임워크의 라이브 패키지입니다.

최신 JavaScript는 웹 개발자가 강력한 웹 애플리케이션을 만들 수 있는 강력한 언어입니다. 이로 인해 과도한 엔지니어링이 발생하고 결과적으로 액세스할 수 없는 패턴이 발생하기도 합니다. 이 모듈의 JavaScript 패턴과 팁을 따르면 모든 사용자가 앱에 더 쉽게 액세스할 수 있습니다.

이전
키보드 포커스
다음
이미지