티스토리 뷰

Frontend/HTML

웹 접근성(A11y) 기초: 시각 장애인을 위한 aria-label과 웹 표준 준수 방법

미니임 2026. 2. 25. 16:41

 

웹 사이트를 제작할 때 '모두를 위한 설계'를 고민해 보신 적이 있나요? **웹 접근성(Web Accessibility, A11y)**은 장애 여부와 상관없이 모든 사용자가 웹 콘텐츠에 접근하고 이해할 수 있도록 보장하는 것을 의미합니다.

오늘은 그중에서도 시각 장애인이 사용하는 스크린 리더(Screen Reader)가 웹 페이지를 정확히 읽을 수 있도록 돕는 aria-label의 활용법과 웹 표준 준수 방법에 대해 풍부한 예제와 함께 알아보겠습니다.

1. 왜 웹 표준과 접근성이 중요한가요?

웹 표준을 준수하는 것은 단순히 '코드를 깔끔하게 짜는 것' 이상의 의미가 있습니다.

  • 스크린 리더 호환성: 시각 장애 사용자는 브라우저의 내용을 음성으로 전달받습니다. 의미에 맞는 태그(Semantic Tag)를 사용해야 기기가 정확히 해석합니다.
  • SEO(검색 엔진 최적화): 검색 로봇 역시 웹 표준을 준수하는 페이지를 더 잘 이해하고 상위에 노출시킵니다.
  • 유지보수 용이성: 구조와 표현이 분리되어 코드가 직관적입니다.

2. 시각적 정보를 텍스트로: aria-label 활용하기

aria-label은 화면에는 텍스트가 보이지 않지만, 스크린 리더가 해당 요소를 읽어야 할 때 사용하는 속성입니다.

예제 1: 아이콘만 있는 버튼

가장 흔한 실수는 닫기 버튼이나 검색 버튼에 아이콘만 넣고 텍스트 설명을 빠뜨리는 것입니다.

[잘못된 예시]

<button class="close-btn">
  <i class="fa-solid fa-xmark"></i>
</button>
<!-- 스크린 리더는 단순히 "버튼"이라고만 읽거나, 아이콘의 유니코드를 읽어 사용자를 혼란스럽게 합니다. -->

[올바른 예시: aria-label 사용]

<button class="close-btn" aria-label="창 닫기">
  <i class="fa-solid fa-xmark"></i>
</button>
<!-- 스크린 리더는 이 버튼에 초점이 맞춰지면 "창 닫기, 버튼"이라고 명확하게 안내합니다. -->

예제 2: SNS 공유 링크

아이콘으로 구성된 SNS 링크 모음에서도 필수적입니다.

Tip: img 태그에 이미 alt 속성이 상세히 적혀 있다면 aria-label이 중복될 수 있으므로 상황에 맞게 사용하세요.

3. aria-labelledby와 aria-describedby

aria-label 외에도 다른 요소를 참조하여 설명을 붙이는 방법이 있습니다.

aria-labelledby: 제목 연결

이미 화면에 제목 텍스트가 존재할 때 이를 ID로 연결합니다.

<section aria-labelledby="section-title">
  <h2 id="section-title">최신 공지사항</h2>
  <p>공지사항 내용이 여기에 들어갑니다.</p>
</section>

aria-describedby: 추가 설명 연결

입력 폼에서 유효성 검사 규칙이나 추가 팁을 설명할 때 유용합니다.

<label for="user-pw">비밀번호</label>
<input type="password" id="user-pw" aria-describedby="pw-hint">
<p id="pw-hint">비밀번호는 영문, 숫자, 특수문자를 포함하여 8자 이상이어야 합니다.</p>

4. 웹 표준 준수를 위한 체크리스트

aria-* 속성을 남발하기 전에 가장 먼저 확인해야 할 것은 **시맨틱 HTML(Semantic HTML)**입니다.

  1. div나 span으로 버튼을 만들지 마세요.
    • <div onclick="..."> 대신 <button>을 사용하세요. button 태그는 기본적으로 키보드 포커싱과 엔터키 동작을 지원합니다.
  2. 명확한 언어 설정
    • <html lang="ko">와 같이 문서의 주 언어를 명시해야 스크린 리더가 올바른 발음으로 읽어줍니다.
  3. 색상 대비 확인
    • 저시력자나 색약 사용자를 위해 배경색과 글자색의 대비가 충분해야 합니다. (최소 4.5:1 권장)
  4. 이미지 대체 텍스트(alt)
    • 의미 있는 이미지는 반드시 alt 속성에 설명을 넣고, 장식용 이미지는 alt=""로 비워두어 스크린 리더가 건너뛰게 하세요.

맺음말

웹 접근성은 특별한 기능이 아니라 웹의 본질입니다. 작은 aria-label 하나가 누군가에게는 웹 세상을 탐험할 수 있는 유일한 지도가 될 수 있습니다. 오늘부터 여러분의 프로젝트에 웹 표준을 하나씩 적용해 보는 것은 어떨까요?

반응형

'Frontend > HTML' 카테고리의 다른 글

<iframe> 태그 완벽 가이드: 외부 콘텐츠 삽입과 보안 설정 팁  (0) 2026.02.26
HTML5 멀티미디어 가이드: <video> 및 <audio> 태그 완벽 정복  (0) 2026.02.25
드롭다운과 선택 박스: <select>, <datalist>, <optgroup>으로 정교한 선택 메뉴 만들기  (0) 2026.02.25
사용자 경험을 높이는 폼(form) 디자인: 다양한 <input> 타입과 유효성 검사 활용하기  (0) 2026.02.25
표(<table>) 태그 마스터하기: <thead>, <tbody>, <tfoot>를 활용한 체계적인 데이터 정리  (0) 2026.02.25
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
글 보관함