웹 접근성(Web Accessibility)

웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것

• 장애인 및 고령자 등을 포함한 모든 사람
• 다양한 플랫폼 및 장치, 웹 브라우저 등의 모든 환경

접근성 QA 이슈 종류

이번 프로젝트 접근성 QA 종류는 다음과 같이 분류할 수 있다

1. 초점 표시 안됨 or 표시 위치 부적절
2. 대체 텍스트, 음성 출력, 알림 미흡

1. 초점 표시 안됨 or 표시 위치 부적절

• 기존 프로젝트에서는 outline:none이 설정되어 있어 focus되었을 때 초점이 시각적으로 표현되지 않음
  • outline:focus-visible 가상클래스를 사용해 탭키로 초점 접근시 시각적으로 표현
• 팝업 활성화 시 첫 초점이 안내문구가 아닌 '확인 버튼'에 접근되어 시각장애인 사용자가 메시지 인식이 어려움
  • 팝업 활성화 시, 초점이 팝업의 첫 요소(안내문구)로 이동되도록 제어(tabindex, useEffect 등 사용)

2. 대체 텍스트, 음성 출력, 알림 미흡

대체 텍스트는 .screen_out 클래스를 사용해서 작성

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

WAI-ARIA

• aria : Accessible Rich Internet Application
• WAI : Web Accessibility Initiative의 약자로 W3C에서 웹 접근성을 담당하는 조직
• WAI-ARIA : ARIA를 위한 접근성 권고안으로 마크업에 역할(role), 속성(property), 상태(state) 정보를 추가하여 스크린리더 및 보조 기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험(User Experience)을 제공

WAI-ARIA 3가지 기능
역할(role)

• 특정 element에 역할을 부여하여 사용자에게 정보 제공. 동적으로 변경할 수 없음

<!-- 접혀진 상태 -->
<div role="button" ...>
   <span class="screen_out">다운받기</span>
 . . .
</div>

• QA중 사용된 role
  • role=button : 초점이 하나로 제공됨
  • role=log : 스크린리더가 자동으로 음성 출력

속성(property)

• element가 기본적으로 갖고 있는 특징이나 상황
• 'aria-*' 접두어를 가진다
• 어플리케이션 실행중에 바뀌는 경우는 드물다

<p class="info_tip" aria-live="assertive">
   <span>TIP</span>
    카카오메일이 있다면 메일 아이디만 입력해 보세요.
</p>

• QA중 사용된 property
  • aria-live : 실시간의 내용을 갱신하는 영역. assertive를 값으로 사용하면 보조기기 작업을 중단하고 갱신 내용을 즉시 사용자에게 전달
  • aria-label : 현재 element의 레이블 정의
  • aria-describedby : id를 참조해서 설명을 컨트롤과 직접 연관시키도록 한다

상태(state)

• element가 기본적으로 갖고 있는 특징이나 상황
• 'aria-*' 접두어를 가진다
• 어플리케이션 실행중에 자주 바뀐다

<!--접혀진 상태이며 새로운 메시지가 있을 때-->
<button aria-expanded="false">
  <span class="screen_out">새 메시지</span><span class="screen_out">톡으로 상담</span>
<button>

<!--펼쳐진 상태-->
<button aria-expanded="true">
  <span class="screen_out">톡으로 상담</span>
<button>

• QA 중 사용된 state
  • aria-expanded : 접힘 / 펼침 상태
  • aria-hidden : 스크린리더 가상 커서에서 탐색되지 않음
  • aria-disabled : 활성 / 비활성 상태