웹 접근성의 개념과 개선 방법
웹 접근성(Web Accessibility)
웹 접근성이란, 장애인이나 노약자 등 모든 사용자가 웹페이지를 불편 없이 사용할 수 있도록 설계하는 것.
웹 접근성 개선 시의 이점
범용성 증가: 장애인이나 노약자를 포함해 더 많은 사람들이 서비스를 이용할 수 있어서 결과적으로 서비스의 가치가 높아진다.
SEO(검색엔진 최적화): 웹 표준과 접근성을 준수하면 검색엔진 크롤러가 문서 구조와 중요한 정보를 효율적으로 해석할 수 있으므로 검색에서 더 상위에 노출될 수 있다. 모바일 보이스서치 등 음성검색, 이미지 검색에서도 작용.
개발 편의성: 코드의 구조가 명확해져 개발자 입장에서도 가독성과 유지보수에 좋다.
웹 접근성을 높이는 방법
1. 의미있는 HTML 태그 사용
예시:
제목에는
<h1>,목록에는
<ul>,<li>,버튼에는
<button>을 이용
시각장애인은 화면을 스크린 리더로 '듣기' 때문에, 구조와 의미가 명확한 태그들을 사용할수록 기기가 페이지 내용을 정확히 이해할 수 있다. 크롤러도 마찬가지.
2. 이미지 등 비텍스트 콘텐츠에 대체 텍스트 제공
2-1. 이미지에 alt 속성
기기가 읽을 수 있도록 해당 이미지를 설명하는 alt 내용을 작성.
차트, 그래프 등은 alt에 요약 텍스트를 작성하고, 중요한 데이터라면
<table>표도 함께 제공.장식용 이미지라면
alt=""(빈 값)으로 스크린리더가 무시하도록 처리
2-2. 아이콘, 버튼 등 SVG/아이콘 이미지
SVG에도
<title>,<desc>를 넣거나 aria-label을 활용할 수 있음
<svg aria-label="로그인">
<title>로그인</title>
<!-- 아이콘 SVG 코드 -->
</svg>2-3. 오디오·비디오 컨텐츠의 자막, 대체 텍스트
영상에는 자막(캡션) 제공
오디오, 동영상에는 간략한 설명(텍스트 대체) 제공
<video controls>
<source src="sample.mp4" type="video/mp4">
<track kind="captions" src="caption.vtt" srclang="ko" label="한국어 자막">
</video>2-4. CAPTCHA 등 입력 확인(비텍스트)
시각적 CAPTCHA는 음성 대체나 접근성 친화적 대안 제공
3. ARIA 속성 활용
HTML 태그만으로 표현하기 어려운 동적 콘텐츠나 복잡한 UI(예: custom modal, toggle 등)에는 ARIA 속성을 활용하여 요소의 역할이나 상태를 스크린 리더가 인식할 수 있게 해줍니다.
(ARIA: Accessible Rich Internet Applications)
3-1. aria-label
특정 요소의 이름(역할)을 명확히 알려주고 싶을 때
<button aria-label="동영상 일시정지">
<svg> <!-- 아이콘만 있고 글자가 없을 때 --> </svg>
</button>버튼 안에 실제로 텍스트는 없지만, 스크린리더는 “동영상 일시정지”라고 읽어준다.
3-2. aria-describedby
해당 요소에 대한 추가적인 설명이 있는 경우
<input type="text" id="email" aria-describedby="email-desc">
<p id="email-desc">이메일 주소를 입력해주세요.</p>스크린리더는 input에 포커스가 가면 추가로 “이메일 주소를 입력해주세요.”라는 설명도 함께 읽어준다.
3-3. aria-live
동적으로 바뀌는 컨텐츠(예: 알림, 자동완성 등)
<div aria-live="polite" id="result-msg"></div>자바스크립트로 내용이 바뀌면 스크린리더가 자동으로 바뀐 내용을 읽어준다.
3-4. role
HTML 기본 태그로 표현하지 못하는 UI(예: 커스텀 버튼)에 역할을 명확히 줄 때
<div role="button" tabindex="0" aria-label="장바구니 담기">
<img src="cart.svg" alt="">
</div>이 div가 버튼임을 알려주고, 키보드 내비게이션도 가능
4. 키보드 내비게이션 지원
사용자가 마우스 없이 Tab 키 등 키보드만으로 이동할 수 있도록 한다.
button,a,input등 기본 인터랙티브 요소는 자동으로 포커스를 받을 수 있다.커스텀 요소나
div,span등을 클릭 가능한 영역으로 쓸 경우에는tabindex="0"을 추가해 포커스 가능하도록 처리한다.:focus-visible또는:focus스타일을 지정해, 현재 초점이 어디 있는지 시각적으로도 표시할 수 있다.
<!-- 잘못된 예: div에 클릭 이벤트만 있음 -->
<div onclick="doSomething()">클릭</div>
<!-- 개선된 예: 키보드 접근 가능하도록 tabindex 추가 -->
<div tabindex="0" role="button" onclick="doSomething()" onkeydown="if(event.key==='Enter') doSomething()">
클릭
</div>
<!-- 또는 이렇게 명확하게 button 사용 -->
<button onclick="doSomething()">클릭</button>초점 표시 예시
/* 일반 CSS */
.custom-button:focus-visible {
outline: 2px solid blue;
}
/* Tailwind CSS 예시 */
class="focus-visible:outline focus-visible:outline-blue-500"그냥 개인적인 경험 하나.
테스트 코드 작성 시에 특정 요소를 가리키기 위해test-id를 붙이려다가 그냥 aria-label을 붙인 적이 있다. 어차피 뭔가 식별자를 붙여야 한다면 접근성에까지 써먹을 수 있는 쪽이 좀 더 낫지 않을까 싶어서. 둘 다 쓰는 건 좀 덕지덕지 같아서 싫었고. 목적에서는 좀 어긋난 사용일지도 모르겠는데, 일단 우리 팀원들 반응은 긍정적이긴 했다.
