웹 접근성
웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함해, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념입니다. 마치 공공건물에 휠체어 경사로를 설치해 이동이 불편한 사람도 이용할 수 있게 하는 것처럼, 웹 페이지 역시 디지털 경사로를 마련해 누구나 접근할 수 있어야 합니다.
다만 접근성은 단순히 장애인만을 위한 것이 아닙니다. 네트워크 속도가 느리거나 밝은 햇빛 아래 화면을 보는 등 일상적인 제약 상황에서도, 모든 사용자가 제약 없이 웹을 사용할 수 있도록 하는 것이 웹 접근성의 궁극적인 목표입니다.
웹 접근성 개선 방법
우선, 단순하고 명확한 HTML 구조와 시맨틱 태그가 필요합니다. 여기서 시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 전달해 스크린 리더가 콘텐츠를 쉽게 이해하도록 도와줍니다.
또한, ARIA 속성을 활용하여 스크린 리더가 동적 콘텐츠나 복잡한 UI 요소를 올바르게 인식할 수 있게 만들 수 있습니다.
마지막으로, 키보드로도 페이지를 탐색할 수 있도록 포커스를 명확히 지정하여 키보드 사용자가 필요한 정보에 접근하기 쉽게 해야 합니다.
이러한 웹 접근성 개선을 통해서 장애가 있는 사용자를 포함한 모든 사용자들에게 더 나은 사용자 경험을 제공할 수 있습니다.
Lighthouse의 접근성 점수
Chrome 브라우저의 Lighthouse에서는 웹의 접근성 고려를 수치화하여 점수를 반환합니다.
위 사진과 같이 접근성 점수를 확인할 수 있으며, 접근성을 개선하기 위한 방안도 제시합니다.
접근성 개선 예시
다음은 제가 이전 프로젝트에서 접근성 개선을 위해 작업했던 내용입니다.
HTML 문서 언어 설정
<html lang="ko">html의 언어를 설정하게 되면 해당 웹 페이지의 기본 언어를 인식할 수 있게 되어, 이후 Chrome의 자동 번역이나 스크린 리더가 음성을 결정하는 기준으로 사용합니다.
input 태그에 ARIA-LABEL 설정
aria-label의 경우 모든 HTML 태그에서 사용할 수 있으며, 해당 HTML 요소를 설명하는 대체 텍스트의 역할을 합니다(img 태그의 alt 속성과 유사).
<button @click="onSubmit">확인</button>다음과 같이 HTML 태그가 내부에 네이티브 텍스트를 가지고 있는 경우에는 스크린 리더가 해당 네이티브 텍스트를 기반으로 화면을 설명할 수 있습니다.
- 기존의 코드
<input
@input="onValueChange"
class="title-input" />하지만 input 태그, 이미지나 아이콘을 포함하는 버튼 등과 같은 요소는 내부에 별도의 텍스트가 들어가지 않는 경우가 있어, 스크린 리더가 해당 요소의 용도 및 역할을 설명할 수 없을 때가 있습니다.
- 개선된 코드
<input
:aria-label="title-input"
@input="onValueChange"
class="title-input" />이 때 aria-label을 통해 해당 요소를 설명한다면 스크린 리더가 해당 HTML 요소가 어떤 요소인지 판단할 수 있게 됩니다.
투명한 텍스트 만들기
aria-label과 동일하게 버튼 등에 눈에 보이지 않는 텍스트를 통해 HTML 요소를 설명하는 방법입니다.
- 투명한 텍스트 css 속성
.hidden-text {
border: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}- 버튼에 투명한 텍스트 삽입
<button
class="relative"
type="button"
v-if="sortBy"
@click="$emit('toggleSortBy', sortBy)">
<OrderIcon
:is-active="isActive"
:class="isASC && 'rotate-180'" />
<!-- 투명한 텍스트 -->
<span class="hidden-text">정렬</span>
</button>위의 버튼은 정렬을 오름차순 / 내림차순으로 변경해주는 버튼입니다.
별도의 텍스트 없이 OrderIcon 만으로 이루어져 있어 Lighthouse에서 수정을 제안했고, 이후 hidden-text 클래스를 가진 span 태그를 통해 해당 버튼을 설명하여 스크린 리더가 버튼의 용도를 알 수 있게 하였습니다.
결론
위와 같은 방법을 사용하여 접근성 개선을 고려하더라도 모든 장애 유형을 완벽히 대응하는 것은 현실적으로 어렵습니다. 장애마다 고려해야 할 요소가 다르고, 이를 100% 만족시키는 것이 어렵기 때문입니다. 따라서, 단순히 많은 항목을 충족하는 데 매몰되기 보다는, 우리 서비스에서 각 장애 유형 별로 사용자가 어떤 경험을 하고 있는지 파악하는 것이 중요합니다.
예를 들면, 스크린 리더로 탐색해보며 시각 장애 사용자가 어떤 경험을 하고 있는지 파악할 수 있습니다. 이러한 정보를 기반으로 우선순위를 정렬하고, 기업의 상황에 맞게 점진적으로 접근성을 개선해 나가는 것이 지속 가능하고 현실적인 방식일 것입니다.
참고
[HTML] lang 속성에 대하여
WAI-ARIA 접근성2. 영역에 대한 설명, 레이블 (aria-label, aria-labelledby)
[웹 접근성] 버튼에 접근 가능한 이름이 없습니다.
문서에 메타 설명이 없습니다.
