HTML의 ARIA 속성

최종 수정 : 2025.05.09

HTML의 ARIA 속성

• AIRA(Accessible Rich Internet Applications)
  W3C의 웹 접근성 이니셔티브(WAI)에서 개발한 기술 사양
• 동적 콘텐츠와 복잡한 사용자 인터페이스를 보저 기술(스크린 리더 등)을 사용하는 사람들에게도 접근 가능하게 만든다.
• 특히 JS로 만든 동적 콘텐츠나 표준 HTML만으로는 접근성을 완벽하기 보장하기 어려운 복잡한 위젯에서 중요

---

■ ARIA 사용의 5가지 핵심 원칙

1) 기본 HTML 우선

가능하다면 ARIA보다 시맨틱 HTML 요소를 먼저 사용하라.

<!-- 이렇게 하지 마세요 -->
<div role="button">클릭</div>

<!-- 대신 이렇게 하세요 -->
<button>클릭</button>

 

2) 필요할 때만 사용

접근성이 이미 잘 구현된 요소에는 불필요하다.

 

3) 키보드 접근성 보장

사용자 인터렉션이 필요한 ARIA요소는 키보드로 조작 가능해야 한다.

<div role="button" tabindex="0" onkeydown="handleKeyDown(event)" onclick="handleClick()">제출</div>

 

4) 동적 요소는 상태 변화 관리

JavaScript로 UI를 변경할 떄 관련 ARIA 속성도 함께 업데이트 해야 한다.

// 버튼 클릭 시 메뉴 토글 예시
function toggleMenu() {
  const button = document.getElementById('menuButton');
  const menu = document.getElementById('menu');
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  
  button.setAttribute('aria-expanded', !isExpanded);
  menu.hidden = isExpanded;
}

 

5) 숨겨진 콘텐츠 관리

시각적으로 숨겨진 콘텐츠의 접근성 처리에 주의해야 한다.

<!-- 완전히 숨김 (스크린 리더에서도 감지 안 됨) -->
<div aria-hidden="true">...</div>

<!-- 시각적으로만 숨김 (스크린 리더에서는 읽힘) -->
<div class="visually-hidden">화면에는 보이지 않지만 스크린 리더에는 읽힘</div>

---

■ 세 가지 주요 기능

1) 역할(Roles)

요소의 유형이나 기능을 정의하며, HTML의 시맨틱 요소가 없거나 사용할 수 없을 때 유용하다.

 

역할 카테고리

A. 랜드마크 역할: 페이지의 주요 영역을 식별

<div role="banner">헤더 내용</div>
<nav role="navigation">메뉴 내용</nav>
<main role="main">주요 콘텐츠</main>
<div role="complementary">보조 콘텐츠</div>
<footer role="contentinfo">푸터 내용</footer>

 

B. 위젯 역할: 사용자 인터페이스 컴포넌트 정의

<div role="button" tabindex="0" onclick="handleClick()">제출하기</div>
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">진행률 75%</div>
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0">볼륨 조절</div>

 

C. 구조적 역할: 문서 구조 전달

<div role="heading" aria-level="1">주제목</div>
<ul role="list">
  <li role="listitem">항목 1</li>
  <li role="listitem">항목 2</li>
</ul>

 

2) 속성(Propertis)

요소의 특성이나 관계를 설명한다.

 

핵심 속성

A. 레이블링 속성

<!-- 요소 자체에 레이블 제공 -->
<button aria-label="검색">🔍</button>

<!-- 다른 요소를 참조하여 레이블 제공 -->
<div id="title">연락처 양식</div>
<form aria-labelledby="title">...</form>

<!-- 요소에 추가 설명 제공 -->
<input type="password" aria-describedby="pwd-hint">
<div id="pwd-hint">비밀번호는 문자, 숫자, 특수문자를 포함해야 합니다.</div>

 

B. 관계 속성

<!-- 팝업과 트리거 요소의 관계 표현 -->
<button aria-controls="menu" aria-expanded="false">메뉴 열기</button>
<div id="menu" hidden>메뉴 내용</div>

<!-- 요소 그룹화 -->
<div role="group" aria-labelledby="group-title">
  <h3 id="group-title">배송 옵션</h3>
  <div role="radio" aria-checked="false">일반 배송</div>
  <div role="radio" aria-checked="true">특급 배송</div>
</div>

<!-- 소유 관계 표현 -->
<div id="error-msg">유효한 이메일을 입력하세요</div>
<input type="email" aria-errormessage="error-msg" aria-invalid="true">

 

3) 상태(States)

요소의 현재 상태를 전달한다.

 

주요 상태 속성

<!-- 체크박스 상태 -->
<div role="checkbox" aria-checked="true" tabindex="0">뉴스레터 구독</div>

<!-- 펼침/접힘 상태 -->
<button aria-expanded="true">섹션 접기</button>

<!-- 선택 상태 -->
<div role="option" aria-selected="true">옵션 1</div>

<!-- 숨김/표시 상태 -->
<div aria-hidden="true">화면에는 보이지만 스크린 리더에는 읽히지 않음</div>

<!-- 비활성화 상태 -->
<button aria-disabled="true">현재 사용 불가</button>

<!-- 필수 항목 표시 -->
<input aria-required="true">

<!-- 유효성 상태 -->
<input aria-invalid="true">

---

■ 실시간 영역(Live Regions)

동적으로 변경되는 콘텐츠를 스크린 리더에 알린다.

<!-- 중요도에 따른 알림 설정 -->
<div aria-live="polite">중요하지 않은 업데이트는 이곳에</div>
<div aria-live="assertive">매우 중요한 알림은 이곳에</div>

<!-- 변경 범위 지정 -->
<div aria-live="polite" aria-atomic="true">전체 내용이 갱신됨</div>
<div aria-live="polite" aria-atomic="false">일부만 갱신됨</div>

<!-- 추가된 콘텐츠만 읽기 -->
<div aria-live="polite" aria-relevant="additions">새로운 항목만 읽음</div>

---

■ 복잡한 UI 패턴에서의 ARIA 활용 예시

1) 탭 패널

<div role="tablist">
  <button id="tab1" role="tab" aria-selected="true" aria-controls="panel1">첫 번째 탭</button>
  <button id="tab2" role="tab" aria-selected="false" aria-controls="panel2">두 번째 탭</button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">
  첫 번째 탭 내용
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
  두 번째 탭 내용
</div>

 

2) 모달 다이얼로그

<button aria-haspopup="dialog" aria-expanded="false" onclick="openDialog()">다이얼로그 열기</button>

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true" hidden>
  <h2 id="dialog-title">알림</h2>
  <p>변경사항을 저장하시겠습니까?</p>
  <div role="group">
    <button>확인</button>
    <button>취소</button>
  </div>
</div>

 

3) 자동완성 검색창

<label for="search">검색:</label>
<input id="search" type="text" aria-autocomplete="list" aria-controls="search-results">
<ul id="search-results" role="listbox" aria-label="검색 결과">
  <li role="option" aria-selected="true">첫 번째 결과</li>
  <li role="option">두 번째 결과</li>
</ul>

---

■ AIRA가 SEO에 미치는 영향

ARIA 속성은 웹 접근성을 향상시키기 위해 설계되었지만 SEO와도 간접적인 관련이 있다.

 

1) 직접적인 영향

제한적인 직접 영향

• ARIA 속성 자체는 검색 엔진 랭킹 알고리즘에 직접적인 랭킹 요소가 아니다.
• 검색 엔진은 주로 role, aria-label, aria-labelledby와 같은 몇몇 AIRA 속성만 제한적으로 활용한다.
• Google은 공식적으로 ARIA를 SEO 랭킹 요소로 언급하지 않는다.

Google의 콘텐츠 이해

<!-- Google은 이런 ARIA 레이블을 콘텐츠 이해에 사용할 수 있습니다 -->
<div role="navigation" aria-label="메인 메뉴">...</div>
<button aria-label="검색">🔍</button>

 

2) 간접적인 영향

사용자 경험 향상

• 접근성이 좋은 사이트는 이탈률 감소, 체류 시간 증가 등 긍정적인 사용자 반응을 야기한다.
• 이로 인해, SEO 랭킹에 영향을 미친다.

다양한 사용자층 확보

• 접근성이 좋은 사이트는 더 많은 사용자에게 서비스할 수 있어 잠재적 방문자와 전환율이 증가한다.

 

3) 특정 ARIA 속성과 SEO 연관성

ARIA 라이브 리전과 동적 콘텐츠

<div aria-live="polite">
  <!-- 동적으로 업데이트되는 콘텐츠 -->
</div>

• 동적 콘텐츠의 접근성을 향상시키나, SEO에는 큰 영향 없음
• JavaScript로 로드되는 콘텐츠는 검색 엔진이 완전히 인식하지 못할 수 있음

 

ARIA 레이블과 내용 이해

<div aria-label="제품 추천">...</div>
<nav aria-labelledby="menu-heading">
  <h2 id="menu-heading">사이트 내비게이션</h2>
  <!-- 메뉴 항목들 -->
</nav>

• aria-label과 aria-labelledby는 검색 엔진이 페이지 구조와 컨텍스트를 이해하는 데 도움을 줄 수 있음
• 특히 시각적인 콘텐츠가 부족한 경우 중요해진다.

 

역할(Role) 속성

• 페이지 구조를 명확히 하며, 검색 엔진에 주요 콘텐츠 영역을 식별하는 데 도움을 줄 수 있음
• 특히 HTML5 시맨틱 태그를 사용할 수 없는 경우 유용함

 

4) ARIA와 HTML5 시맨택 태그 비교

SEO 관점에서 시맨틱 태그 우선

• HTML5 시맨틱 태그는 검색 엔진에 직접적인 구조적 신호를 제공합니다.
• ARIA 역할은 그에 비해 SEO 영향력이 제한적입니다.
• 가능하면 HTML5 시맨틱 태그를 우선 사용하고, 필요할 때만 ARIA를 보완적으로 추가하세요.