[웹] ARIA 속성 알아보기

 ARIA 속성은 웹 접근성을 향상시킨다. 실제 동작에 영향을 주진 않지만, HTML 요소의 역할, 상호 작용 대상등을 명시함으로써 웹페이지에 대한 이해를 높일 수 있다.

[웹] ARIA 속성 알아보기

 

[웹] ARIA 속성 알아보기

 

1. ARIA는 무엇이고, 왜 사용하는가?

2. ARIA 속성 사용하기

 

1. ARIA는 무엇이고, 왜 사용하는가?

 Accessible Rich Internet Applications의 약자이다.
 웹 페이지를 사용하기 어려운 사람들의 보조 수단으로 볼 수 있다. ARIA 속성을 사용하면 스크린 리더기로 웹 페이지를 이요할 때 의도한 방식대로 진행되도록 명시할 수 있다.
 또한 비단 사용자 뿐만 아니라 개발자들이 이후 코드를 분석할 때에 ARIA 속성을 통해 이해도를 높일 수 있다.

 사용 이유

• 스크린 리더기 사용자 보조
• 키보드만 사용하는 경우에도 이용 보조
• ARIA 속성으로 각 HTML 요소의 역할 등을 명시하여 코드의 가독성을 높임

2. ARIA 속성 사용하기

1. role

요소의 역할을 정의한다. div 태그를 사용했으나, 실제 기능은 button의 역할을 하는 경우 등에 사용할 수 있다.

<div role="button" onclick="closeButton()">close</div>

 

2. aria-label

현재 속성이 어떠한 의미를 가지고 있는 지 명시한다.

<button aria-label="close">X</button>

 

3. aria-labelledby

어떤 레이블을 통해 제공되는 요소인 지 명시한다.

<label id="username">username</label>
<input aria-labelledby="username" />

 

4. aria-describedby

해당 요소를 설명하는 요소를 명시한다.

<label id="username">username</label>
<input aria-labelledby="username" aria-describedby="username-description" />
<p id="username-description">유저 이름은 최소 8자 이상이어야 합니다.</p>

 

5. aria-desabled

해당 요소가 비활성화 되었는지 여부를 나타낸다.

<button aria-disabled="true">확인</button>

 

6. aria-hidden

요소가 화면에 표시되는 지 여부를 나타낸다.

<button aria-hidden="true">로그 아웃</button>

 

7. aria-expanded

요소가 접힌 상태인지 펼쳐진 상태인지 여부를 나타낸다.

<div aria-expanded="true">열린 상태</div>

 

8. aria-controls

어떤 요소를 제어하는 지 명시한다.

<button aria-controls="menu">메뉴 펼치기</button>
<div id="menu">메뉴</div>

 

9. aria-valuemin, aria-valuemax

값의 범위를 나타낸다.

<input type="number" aria-valuemin="0" aria-valuemax="100" />