[HTML] WAI-ARIA란? 웹접근성을 고려하는 방법 (aria-role, aria-label, aria-labelledby, aria-hidden, aria-tab)

 

 

 목차

• WAI-ARIA란?
• ARIA가 필요한 이유
• ARIA는 언제 사용하는가?
• ARIA role 속성
• 태그 별 내장된 암묵적인 role의 역할
• ARIA label, labelledby
• ARIA hidden
• ARIA tab

 

 

1. WAI-ARIA란?

---

 Web Accessibility initiatives Accessible rich internet Application의 약자로 

 WAI는 웹접근성을 담당하는 W3C 조직이며 

 스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술이다. 

 

 

 

 

 

2. ARIA가 필요한 이유

---

스크린 리더란 브라우저를 시각적으로 읽는 것이 불편한 사용자들을 위해 컴퓨터 화면을 낭독해주는 소프트웨어다.

웹페이지를 만들 때 semantic tag를 사용하지 않고, 시각적으로 꾸미기 위해 일부속성을 사용하지 않는다면 스크린 리더 사용자가 이 웹페이지를 읽거나 사용하기 굉장히 어려울 것이다.

 

페이지가 정적 이던 사이트들이 동적으로 구현이 많이 늘어나면서 js와 ajax를  중심으로 많이 제작되는 편이다.

이러한 변화는 장점도 있지만 스크린을 보지 못하는 사람들에게 동적 콘텐츠는 사용하는데 어려움이라는 큰 벽을 느끼게 할 수 있으므로 ARIA가 필요한 것이다. 

 

 

시멘틱 태그란?(semantic tag)  >> 바로가기

 

 

 

 

3. ARIA는 언제 사용하는가?

---

• ARIA는 마크업에서 태그 안에 속성으로 추가하여 디테일한 정보를 제공할 떄 사용한다.
• ARIA는 세가지 성격을 띠는 속성 분류로 분할하여 정의 하고 있다. (roles, states, properties)
  • 아래와 같이  상황에 맞게 태그 안에 속성 값을 추가 할 수 있다.
  • roles 예시 ) role = "button", role = "alert" 
  • states 예시) aria-hidden = "true"
  • properties 예시)  aria-haspopup = "listbox"
• 자세한 내용은 링크 참고 >> https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques

ARIA 사용하기: 규칙, 상태, 속성 - 접근성 | MDN

 

 

 

 

 

4. ARIA role 속성 (ARIA roles)

---

• Role은 태그의 역할을 알려주는 속성이다. 
• Role에 들어가는 값은 우리가 마음대로 정하는게 아닌 정해진 값을 사용해야 한다. 올바르지 못한 값을 사용할 바에는 안쓰는게 낫다.
  • 종류 참고 >> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

Using ARIA: Roles, states, and properties - Accessibility | MDN

 

• 키보드 사용성 보장 (항상 마크업을 할때, 스크린 리더에 의지해서 콘텐츠를 이용하는 사용자도 있다는 것을 염두해두자!)

<!-- 예시 -->
<div class="btn" role="button"> 로그인 </div>  <!-- bad -->
<button type="submit">로그인</button>   <!-- good -->

키보드로 접근할때 a, button과 같이 return(enter)키로 누를수 있거나 터치할 수 있는 상호작용 태그가 아니라면 해당 컨텐츠를 키보드로 접근할 수 없기 때문에 버튼 용도에 맞게 a, button을 사용해야한다.

 

<!-- bad -->
<span role ="button"> 버튼 </span>
<!-- 해당 마크업은 키보드로 포커싱이 불가능하다.  아래와 같이 설정 추천-->
<span role="button" tabindex="0">버튼</span>

tabindex속성을 0 으로 설정하여 콘텐츠의 선형화 순서대로 키보드 포커싱이 진입한다. "0"보다 값이 작으면 키보드 포커스를 받지 못하도록 설정된다.

 

 

* 키보드로 태그접근가능여부

태그	접근가능여부
<div>	x
<span>	x
<p>	x
<button>	o
<a>	o
<input>	o

 

• 시멘틱적인 요소 즉, 의미가 있는 태그를 사용할 경우 굳이 role 속성을 중복해서 사용하지 않는다.

 <!-- good -->
<input type="checkbox">
<button>버튼</button>
<fieldset>...</fieldset>
<ul>...</ul>

<!-- bad -->
<input type="checkbox" role="checkbox">
<button role="button">버튼</button>
<fieldset role="group">...</fieldset>
<ul role="list">...</ul>

 

 

 

 

 

5. 태그별 내장된 암묵적인 role의 역할

---

HTML 각 태그별로 암묵적으로 의미하는(갖고 있는) role이 있다. 

<a href="{link}"></a>  <!-- 암묵적으로 role = link를 가지고 있다.-->
<article>...</article>  <!-- 암묵적으로 role = article 가지고 있다.-->
<fieldset>...</fieldset>  <!-- 암묵적으로 role = group 가지고 있다.-->

자세한 사항은 링크 참고 >> https://www.w3.org/TR/html-aria/

ARIA in HTML

 

또한 role별로 쌍으로 같이 써야하는 속성, 규칙 등등이 있으니 사용하기 전에 아래 링크 참고하기!

www.w3.org/TR/html-aria/#case-sensitivity

ARIA in HTML

 

 

 

 

6. ARIA label, labelledby

---

※ label과 labelledby 속성 요약
- aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담는다.
- aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 즉 그룹핑 할때 사용된다.

 

aria-label

 

• <label> 태그가 있으면 굳이 안써도 된다. 
• 설명 텍스트가 포함된 보여지는 태그가 있으면 "aria-labelledby"를 대신 사용하자.  
  
  

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

 

• "aria-label"을 남용하지 말자 예를 들어 추가적인 정보를 제공하기 위해 "aria-describedby" 또는 "aria-description"을 사용하는게 더 알맞은 경우도 있다.
• 태그가 의미하는 것을 "aria-label"로 중복으로 나타낼 필요는 없다. 
•  

<!-- bad 예 -->

<button type="button>
	<a href="#" aria-label="button">...</a>
</button>

• 자세한 내용 참고 >>  https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Attributes/aria-label

aria-label - 접근성 | MDN

 

 

 

• aria-labelledby는 숨겨져있는 요소도 참조할 수 있다. (display: none, visibility: hidden)
• aria-label은 "저는 이역할을 해요!" 라고 표기하는 방면, aria-labelledby는 "저는 이역할 하는 그룹에 속해요" 라고 맵핑 하는 것이다

 

 

7. ARIA aria-hidden

---

• aria-hidden 이란?
  • Display none, visibility hidden을 활용하여 콘텐츠를 숨김처리하면 웹페이지에서 보이지 않고 스크린 리더와 같은 보조 기술로도 탐색이 불가능하다.
  • 이때 스크린리더에서는 탐색을 제!한! 하고 화면에 보여져야 할 경우  예를들어 의미가 전혀 없는 지극히 시각적 디자인 요소인 경우 에 aria-hidden=“true”를 설정하여 스크린리더가 읽지 않도록 할 수 있다.
• aria-hidden 사용법
  •  aria-hidden="true"로 셋팅하면 스크린리더에서 탐색 안된다. ul, table과 같이 하위요소가 있는 부모 태그에 aria-hidden="true" 로 설정하면 하위 요소까지 통째로 숨길 수 있다.
  • aria-hidden="false"는 default(기본) 값이다. 

 

 

 

8. ARIA tab 이란?

---

tab에 aria를 적용하는 방법은 무엇일까?

- tab들을 감싸는 wrapper에는 role="tablist"

- 해당 tab들에는 role="tab"

- tab에 해당하는 content에는 role="tabpanel"을 명시해준다.

예시를 들자면 아래와 같다.

 

<p class=“tab_tit” id=“favoriteList”>  내가가장좋아하는 것들</p>

<ul  aria-labelledby=“favoriateList” class=“tab_list” role=“tablist”>
	<li class=“tab_items” role=“tab” id=“favoriteTab1” aria-controls=“tabPanel1” >강아지</li>
	<li class=“tab_items” role=“tab” id=“favoriteTab2” aria-controls=“tabPanel2”>고양이</li>
<li> 

<div class=“tab_panel”  aria-labelledby=“favoriteTab1” id=“tabPanel1” role="tabpanel"> 강아지 contents </div>
<div class=“tab_panel”  aria-labelledby=“favoriteTab2” id=“tabPanel2” role="tabpanel"> 고양이 contents </div>

 

- tabList인 <ul>의 제목이 구현되어 있는 경우에는 "aria-labelledby"로 이름과 맵핑 시켜준다.(없으면 aria-label)

- tab의 버튼 역할을 하는 <li>는 "나로인해 컨트롤 되는 컨텐츠는 이것 입니다." 라고  "aria-controls"에 해당 컨텐츠 ID를 맵핑시켜준다.

- 콘텐츠를 나타내는 <div>에는 "나는 어떠한 탭의 컨텐츠입니다.!" 라고 해당하는 탭과 연결해준다.

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡