웹 접근성(A11Y) & WAI-ARIA

 

🤓 웹 접근성(A11Y) 이란?

모든 사용자가 장애 유무와 관계없이 웹사이트를 쉽게 이용할 수 있도록 보장하는 것을 의미합니다.

정상인뿐만 아니라, 장애를 가지고 있는 사용자들도 웹콘텐츠를 문제없이 이용할 수 있도록 웹사이트를 설계하는 것이 중요합니다.

웹 접근성을 개발하면, SEO, 사용자 경험(UX) 브랜드 이미지 개선에도 큰 도움이 된다고 합니다.!!

😎 웹 접근성 핵심 개념 

웹 접근성의 원칙은 4가지(POUR)로 정리할 수 있습니다.

1. 인식가능(Perceivable) : 시각적, 청각적으로 콘텐츠를 인식할 수 있어야 합니다.

2. 운용 가능(Operable) : 키보드 음성 스크린리더 등 다양한 방식으로 웹을 조작할 수 있어야 합니다.

3. 이해 가능(Understandable) : 사용자 인터페이스와 콘텐츠가 예측 가능해야 합니다.

4. 견고성(Robust) : 다양한 기기와 보조 기술에서 정상적으로 작동해야 합니다.

 

☑️ 웹 접근성은 장애인뿐만 아니라, 일반인도 포함입니다.

☑️ 노인, 색약 유저, 마우스 없이 키보드만 사용하는 유저까지 모두 포함

 

🤓 WAI-ARIA란? (Accessible Rich Internet Applications)

웹 애플리케이션에서 접근성을 향상하기 위한 표준입니다.

기본적으로 HTML의 alt, label, title 같은 태그만으로 충분하지 않은 경우,

ARIA 속성을 활용해 접근성을 향상할 수 있습니다.

 

😎 WAI-ARIA 핵심 속성

속성	설명	EX
role	요소의 역할을 명확하게 정의	<div role="button">클릭</div>
aria-label	보조 기술이 읽을 수 있는 레이블을 제공	<button aria-label="메뉴 열기">☰</button>  (햄버거바임)
aria-labelledby	기존 요소의 id를 참조하여 레이블 제공	<input id="name"><label for="name">이름</label>
aria-hidden	화면에 표시되지만 보조 기술이 읽지 않도록 설정	<span aria-hidden="true">X</span>
aria-live	동적 콘텐츠 업데이트 시 알림 제공	<div aria-live="notification">새로운 알림이 있습니다.</div>

 

HTML5에는 button, link, heading 같은 요소의 의미가 내장되어있지만, <div>나 <span> 같은 태그를 사용할 경우 보조기술은 이해할 수 없습니다. 이 문제를 해결할 때, WAI-ARIA에 role 속성을 추가하면 요소의 의미를 명확히 전달 가능합니다.

즉 role 속성은 HTML 요소의 의미를 명확히 설명하여 보조 기술이 이해할 수 있도록 도와줍니다.

 

🔥 접근성 개선 방법

1️⃣ alt 속성 활용 (이미지 대체 텍스트)

<img src="euijin.png" alt="의진 사진">

 

alt 속성을 활용하면 시각 장애인이 화면 낭독기로 웹을 사용할 때 alt 속성을 읽어줍니다.

2️⃣ label 속성 활용 (form 요소 연결)

<label for="username">이름</label>
<input type="text" id="username">

label과 input을 연결하면 클릭 영역이 넓어지고 스크린 리더가 내용을 읽을 수 있습니다.

3️⃣ aria-hidden="true" (보조 기술 무시)

<span aria-hidden="true">🔔</span> 새 알림이 있습니다.

아이콘이나 장식 요소는 보조 기술이 읽지 않도록 aria-hidden="true" 추가하여 의미 없는 내용을 읽지 않도록 합니다.

4️⃣ aria-live="polite" (실시간 알림 읽어주기)

<div aria-live="polite">새로운 메시지가 도착했습니다.</div>

화면이 업데이트되거나, 알림이 올 때 스크린 리더가 자연스럽게 읽어줍니다.

5️⃣ 키보드 접근성 개선(tabindex)

<div role="button" tabindex="0">키보드로 접근 가능</div>

tabindex="0" 키보드 tab 키로 초점 이동 가능

tabindex="-1" 초점은 안 가지만 JS로 포커스 가능

 

 

🔥 최종 정리

✅ 웹 접근성(A11Y) → 모든 사용자가 웹을 쉽게 이용할 수 있도록 보장하는 것

✅ WAI-ARIA → HTML 요소에 의미를 부여하고 보조 기술이 인식할 수 있도록 돕는 속성

✅ 실무에서 접근성을 개선하는 방법

✔ alt 속성 활용 (<img alt="..." />)

✔ aria-label, aria-hidden, aria-live 등 WAI-ARIA 속성 활용

✔ 키보드 접근성을 위한 tabindex 추가