ARIA 가이드

 

 

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides

ARIA guides - ARIA | MDN

 

 

**ARIA(Accessible Rich Internet Applications)**는 장애가 있는 사용자가 웹 콘텐츠와 웹 애플리케이션(특히 JavaScript를 사용한 동적 콘텐츠)에 더 쉽게 접근할 수 있도록 돕는 W3C 기술 사양입니다.

쉽게 말해, HTML만으로는 표현하기 어려운 **UI 구성 요소의 역할(Role), 상태(State), 속성(Property)**을 스크린 리더와 같은 보조 공학 기기에 전달하는 '설명서' 역할을 합니다.

---

1. ARIA가 왜 필요한가요?

기존의 HTML 태그(<button>, <input>, <a> 등)는 자체적으로 의미(Semantic)를 가지고 있습니다. 하지만 현대의 웹은 복잡한 UI(탭 메뉴, 드롭다운, 모달 창, 프로그레스 바 등)를 자주 사용하며, 이를 일반적인 <div>나 <span>으로 만드는 경우가 많습니다.

• 문제점: 보조 공학 기기는 <div>를 단순한 구역으로 인식할 뿐, 그것이 클릭해야 하는 '버튼'인지, 현재 '열려 있는지' 알 수 없습니다.
• 해결책: ARIA를 사용해 "이 <div>는 사실 버튼이고, 현재 눌러진 상태다"라는 정보를 추가로 제공합니다.

---

2. ARIA의 3대 요소

ARIA는 크게 세 가지 속성으로 구성됩니다.

① 역할 (Roles)

해당 요소가 무엇을 하는지 정의합니다. 한 번 설정하면 브라우저 수명 동안 거의 변하지 않습니다.

• 예: role="button", role="tab", role="navigation", role="alert"

② 속성 (Properties)

요소의 특징이나 관계를 정의합니다.

• 예: aria-label (요소에 시각적 텍스트가 없을 때 설명을 추가), aria-haspopup (하위 메뉴가 있는지 여부)

③ 상태 (States)

요소의 현재 상황을 나타내며, 사용자 상호작용에 따라 JavaScript로 계속 업데이트됩니다.

• 예: aria-expanded="true/false" (메뉴가 펼쳐졌는가?), aria-checked="true" (체크박스가 선택되었는가?)

---

3. ARIA 사용의 핵심 원칙 (Golden Rules)

ARIA를 잘 사용하는 것보다 더 중요한 것은 최대한 적게 사용하는 것입니다.

1. HTML5 우선 원칙: HTML5 태그(예: <nav>, <button>, <header>)로 해결할 수 있다면 ARIA를 쓰지 마세요. 브라우저는 기본 HTML 태그를 가장 잘 이해합니다.
2. 기존 의미 변경 금지: <button>에 role="heading"을 넣는 식으로 원래의 의미를 왜곡하지 마세요.
3. 키보드 접근성: role="button"을 주었다고 해서 엔터 키로 클릭이 되지는 않습니다. JavaScript를 통해 키보드 조작을 직접 구현해야 합니다.
4. 숨기기 활용: 시각적으로는 보이지만 보조 기기에는 불필요한 장식용 이미지는 aria-hidden="true"로 숨길 수 있습니다.

---

4. 실무 적용 예시 (탭 메뉴)

단순한 <div> 구조에 ARIA를 적용하면 스크린 리더 사용자는 훨씬 명확하게 구조를 파악할 수 있습니다.

HTML

 

<ul role="tablist">
  <li role="presentation">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
      공지사항
    </button>
  </li>
</ul>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  공지사항 내용이 들어갑니다.
</div>

---

5. 요약 및 결론

ARIA는 웹 접근성을 높여주는 강력한 도구이지만, 잘못 사용하면 오히려 독이 됩니다. "동적인 UI를 만들 때, 스크린 리더 사용자에게 실시간으로 정보를 전달하기 위한 보조 장치"로 이해하는 것이 좋습니다.

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.