접근성(ARIA) 향상을 위한 실무 가이드

 

접근성(ARIA) 향상을 위한 실무 가이드: 누구에게나 열려 있는 웹을 만들기 위한 실천 방법

디지털 환경이 점점 더 다양해지면서, **접근성(Accessibility)**은 선택이 아닌 필수가 되고 있습니다. 특히 웹사이트나 애플리케이션을 만들 때, 모든 사용자가 불편함 없이 콘텐츠를 이용할 수 있도록 돕는 것은 개발자와 디자이너의 책임이라 할 수 있습니다.

그 중심에는 **WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)**라는 명세가 있습니다. ARIA는 스크린 리더 사용자와 같은 보조기기 사용자에게 정확한 정보를 전달하기 위해 HTML 요소에 의미를 추가해주는 중요한 기술입니다.

이 글에서는 ARIA의 실무 적용 방법, 반드시 알아야 할 속성들, 잘못 사용하는 사례와 개선 방법, 그리고 개발 현장에서의 적용 팁까지 상세하게 다뤄보겠습니다.

---

1. 왜 접근성과 ARIA가 중요한가?

접근성이 보장되지 않은 웹사이트는 시각, 청각, 지체 등 다양한 장애를 가진 사용자가 정보를 이용할 수 없게 만듭니다. 이로 인해 다음과 같은 문제가 발생합니다.

• 법적 리스크: WCAG(Web Content Accessibility Guidelines)를 지키지 않으면 민원 또는 소송의 대상이 될 수 있습니다.
• 사용자 이탈: 특정 사용자 그룹을 배제하는 UI는 브랜드 신뢰도 저하로 이어집니다.
• SEO에도 영향: 접근성 개선은 검색 엔진 인덱싱에 긍정적인 영향을 줍니다.

ARIA란 무엇인가?

ARIA는 기존 HTML 태그로는 표현하기 어려운 **의미(semantic)**나 **상태(state)**를 명확하게 보조기기에 전달할 수 있도록 설계된 속성들입니다.

---

2. ARIA 속성의 기본 구조

ARIA는 크게 다음과 같은 카테고리로 나뉩니다

카테고리	설명
role	요소의 역할을 정의 (ex. 버튼, 다이얼로그 등)
aria-*	상태, 속성 등을 명시 (ex. aria-expanded, aria-hidden)
aria-labelledby, aria-describedby	특정 요소와 연관된 설명 제공

---

3. 실무에서 많이 쓰는 ARIA 속성과 활용 예시

1) role 속성

HTML 요소의 의미를 명확히 하여 보조기기가 이해할 수 있도록 합니다.

<div role="button" tabindex="0" onclick="doSomething()">더 보기</div>

→ 시맨틱 태그를 사용할 수 없을 때 role="button"으로 대체 역할 부여.

2) aria-label, aria-labelledby

보조기기에 읽히는 라벨 텍스트를 지정합니다.

<button aria-label="장바구니에 추가">+</button>

또는:

<h2 id="section-title">공지사항</h2>
<div aria-labelledby="section-title">
  공지 내용입니다.
</div>

→ aria-labelledby는 이미 존재하는 엘리먼트의 내용을 활용함.

3) aria-hidden

보조기기에서 무시해야 할 요소를 숨깁니다.

<span aria-hidden="true">★</span>

→ 데코레이션 목적일 뿐 의미가 없다면 숨기는 것이 바람직합니다.

4) aria-expanded

드롭다운, 아코디언 등 열림/닫힘 상태를 전달합니다.

<button aria-expanded="false" aria-controls="dropdown-menu" onclick="toggleMenu()">메뉴</button>
<ul id="dropdown-menu" hidden>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

스크립트에서는 버튼 클릭 시 aria-expanded="true"로 바뀌어야 합니다.

---

4. ARIA 적용 시 주의할 점

• 기본 HTML 시맨틱 태그 우선 사용: button, nav, header 같은 태그는 이미 역할이 내장되어 있으므로 role="button"처럼 중복 정의할 필요 없습니다.
• ARIA는 의미를 덧붙이는 도구이지, 기능을 구현하는 수단이 아닙니다. 예를 들어 aria-hidden="true"는 보조기기에는 보이지 않지만 브라우저에서는 여전히 보입니다.
• ARIA는 무조건 붙이는 게 능사가 아님: 과도한 ARIA 속성 사용은 오히려 접근성을 저해할 수 있습니다.

---

5. 실무 예제: 커스텀 모달 창에 ARIA 적용하기

<button aria-haspopup="dialog" aria-controls="custom-modal" onclick="openModal()">상세 보기</button>

<div id="custom-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
  <h2 id="modal-title">상세 설명</h2>
  <p>이 상품에 대한 자세한 정보를 확인하세요.</p>
  <button onclick="closeModal()">닫기</button>
</div>

스크립트 예시:

function openModal() {
  const modal = document.getElementById('custom-modal');
  modal.hidden = false;
  modal.setAttribute('aria-hidden', 'false');
}
function closeModal() {
  const modal = document.getElementById('custom-modal');
  modal.hidden = true;
  modal.setAttribute('aria-hidden', 'true');
}

---

6. ARIA 평가 도구와 테스트 방법

접근성 향상은 반드시 테스트가 수반되어야 합니다. 다음과 같은 도구를 통해 손쉽게 ARIA 적용 상태를 확인할 수 있습니다.

도구	설명
axe DevTools	크롬 확장 프로그램으로 접근성 오류 자동 진단
Lighthouse	Chrome 내장 성능/접근성 테스트
NVDA / VoiceOver	화면낭독기를 이용한 실제 사용자 관점 테스트
WAVE	시각적으로 접근성 문제 영역 표시

---

7. 접근성 강화가 SEO에도 도움이 되는 이유

구글은 HTML의 시맨틱 구조를 기반으로 페이지 내용을 분석합니다. ARIA 속성과 접근성 향상은 다음과 같은 SEO 이점을 가집니다:

• 검색봇이 콘텐츠를 더 정확하게 해석
• 라벨링이 잘 되어 있으면 Rich Result에 노출될 확률 증가
• 사용자의 체류 시간과 만족도 상승

---

8. 결론: 접근성은 선택이 아닌 책임입니다

접근성은 단순히 ‘장애인을 위한 기술’이 아닙니다. 모든 사용자에게 정보를 동등하게 전달하고, 브랜드의 신뢰도를 높이는 핵심 요소입니다. 특히 ARIA는 보조기기가 콘텐츠를 이해할 수 있도록 돕는 매우 중요한 수단입니다.

• 시맨틱 HTML이 기본, ARIA는 보완
• role, aria-label, aria-hidden, aria-expanded 등 자주 쓰이는 속성은 익혀둘 것
• 과도한 사용은 오히려 독이 될 수 있음
• 실제 보조기기로 반드시 테스트할 것

지금부터라도 프로젝트에 접근성 체크리스트를 포함해보세요. 사용자에게 더 따뜻한 기술로 다가갈 수 있습니다.

---