자바스크립트

Javascript

JavaScript와 접근성

트리거 이벤트 (Trigger Events)

• button, a 등 시멘틱 태그를 사용하는 경우에는 기본적으로 키보드 기능도 내장되어 있다.

• 하지만 div 같은 비시멘틱 요소에 클릭 등 트리거 이벤트를 추가하면 기본적으로 키보드 지원이 되지 않으므로, keydown 또는 keyup 이벤트를 직접 추가해야 한다.

// bad (키보드 지원이 내장되어 있지 않은 비시멘틱 태그 사용)
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

// good (시멘틱 태그 사용)
<button onclick="doAction()">Click me!</button>

페이지 제목 (Page Titles)

1. 라이브 리전을 활용해 타이틀이나 주요 변화를 화면 판독기에 알림.

<div aria-live="polite">
  <!-- Live Region: 화면 판독기가 이 내용을 읽음 -->
  <span id="pageTitle">New Page Title</span>
</div>

2. 새로 업데이트된 콘텐츠로 포커스를 이동시켜 주요 콘텐츠를 읽도록 설정.

document.getElementById('newContent').focus();

동적 콘텐츠 (Dynamic Content)

// 동적콘텐츠 삽입 예시
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

1. 잘못된 사용: 큰 덩어리의 비시멘틱 HTML을 렌더링하기
올바른 사용: 작은 시멘틱 HTML 조각을 렌더링하기

2. 잘못된 사용: 동적 콘텐츠가 보조 기술에 의해 인식될 시간이 부족함
올바른 사용: setTimeout()을 사용하여 사용자가 전체 메시지를 들을 수 있도록 시간을 주기

3. 잘못된 사용: onFocus()에 동적으로 스타일 속성을 적용하기
올바른 사용: 관련 요소에 대해 CSS 스타일 시트에서 :focus를 사용하기

4. 잘못된 사용: 인라인 스타일을 적용하여 사용자 스타일 시트가 제대로 읽히지 않음
올바른 사용: 스타일은 CSS 파일에 정의하여 테마의 일관성을 유지하기

5. 잘못된 사용: 너무 큰 JavaScript 파일이 사이트 성능을 저하시킴
올바른 사용: JavaScript 사용을 최소화하고, CSS에서 비슷한 기능(예: 애니메이션 또는 고정된 내비게이션)을 사용하여 더 빠르게 파싱하고 성능을 향상시킬 수 있음

포커스 관리 (Focus Management)

컴포넌트 레벨

Keyboard Trap : 키보드 사용자가 컴포넌트 안에서 벗어날 수 없게 되는 상황

• 사용자는 모달의 행동 가능한 요소들 사이를 Tab 키로 이동할 수 있어야 한다.

• 사용자가 모달을 명시적으로 닫지 않으면 모달 밖으로 나갈 수 없어야 한다.

페이지 레벨

<h1 id="page-title" tabindex="-1">새로운 페이지 제목</h1>
<p>여기에 새로운 콘텐츠가 들어갑니다.</p>

document.getElementById("page-title").focus();

상태 관리 (State Management)

컴포넌트 레벨

• aria-expanded : 아코디언, 드롭다운, 상세 보기

• aria-pressed : 토글 버튼, 좋아요 버튼

• aria-checked : 체크박스, 토글 스위치

• aria-disabled : 버튼, 입력 필드 비활성화

• aria-invalid : 입력값 검증

• aria-selected : 탭, 리스트 아이템

<input type="checkbox" id="toggle" aria-checked="false">

const checkbox = document.getElementById("toggle");
checkbox.addEventListener("click", () => {
    const isChecked = checkbox.getAttribute("aria-checked") === "true";
    checkbox.setAttribute("aria-checked", !isChecked);
});

페이지 레벨

• aria-live 또는 alert 영역이 페이지가 로드될 때부터 DOM에 존재해야 한다.

• 이후, 텍스트만 동적으로 변경하면 AT가 정상적으로 내용을 읽어줄 수 있다.

<button id="hiddenLive">Click for Status Change</button>
<p class="hidden liveRegion" aria-live></p>

// Shows live region, then adds in the text, and sets the state of aria-live
hiddenLive.addEventListener("click", function () {
  let liveRegion = document.querySelector(".liveRegion");
  liveRegion.classList.remove("hidden");
  liveRegion.innerHTML = "I am alert text!";
  liveRegion.setAttribute("aria-live", "assertive");
});

라이브 패키지 (Live Packages)

• React: react-aria-live, react-a11y-announcer

• Angular: LiveAnnouncer

• Vue: vue-a11y-utils

결론