WAI-ARIA 사용법 및 주의점

2020-12-27

HTML & CSS / WAI-ARIA

WAI-ARIA를 사용하는 방법 및 주의사항은 아래와 같다.

ARIA와 HTML5

ARIA 역할(role)과 HTML5 섹션 요소 중복 사용하지 않는다.

1	<nav role="navigation">

role=”application”

동일한 역할의 요소 없음.
주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.

동일한 역할의 요소 없음.
비슷한 의미로 <header> 요소를 사용할 수 있으나 <header role="banner">로 사용하였다면 한 페이지에서 하나의 요소만 사용하길 권장한다.

<nav> 요소
다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메뉴 및 서브 메뉴 등에 사용할 수 있다.

role=”main”

<main> 요소
본문의 주요 콘텐츠 영역으로 한 페이지 내에 하나 만 사용이 가능하며, <article>, <aside>, <footer> 요소의 하위 요소로 사용할 수 없다.

role=”aside”

<aside> 요소
주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현할 수 있다.
<aside> 영역에는 현재 날씨, 관련된 기사 또는 주식 정보 등의 부가 콘텐츠를 포함할 수 있다.

role=”form”

<form> 요소
폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함할 수 있다.

role=”search”

동일한 역할의 요소 없음.
검색의 역할을 담당하는 서식 영역임을 의미하며 <div> 또는 <form> 요소를 사용하는 것을 권장한다.

role=”contentinfo”

동일한 역할의 요소 없음.
비슷한 의미로 <footer> 요소를 사용할 수 있으나 <footer role="contentinfo">로 사용하였다면 한 페이지에서 하나의 요소만 사용하길 권장한다.

HTML 요소의 기능 변경 제한

html 요소에 네이티브 의미나 기능을 aria 규칙을 이용하여 변경하는 것은 바람직하지 않다.

<!-- X -->
<h1 role="button">버튼</h1>

<!-- O -->
<h1><button>버튼</button></h1>
<h1><span role="button">버튼</span></h1>

키보드 사용 보장

사용자와 상호작용이 필요한 대화용 UI(사용자가 클릭할 수 있는 정보나 탭, 드래그 앤 드롭, 슬라이드, 스크롤 등) 의 경우 키보드로도 접근 및 사용이 가능하도록 제공하여야 한다.
tabindex 속성에 0을 지정하면 콘텐츠의 선형화 순서대로 키보드 포커스가 진입하게 되고 0보다 작은 값을 지정하면 키포드 포커스를 받을 수 없는 상태가 된다.

<!-- X -->
<span role="button">버튼</h1>

<!-- O -->
<span role="button" tabindex="0">버튼</h1>

숨김 콘텐츠

사용자에게 정보를 전달하되 단순히 화면에서만 보이지 않도록 처리된 콘텐츠에 aria-hidden="true"를 지정해서는 안된다. 스크린 리더기에도 의미적으로 숨겨진 콘텐츠로 인식하기 때문이다.
특정한 의미를 전달해야 하는 콘텐츠에 role="presentation"을 지정해주어서는 안된다. 스크린 리더기에서는 보여주기 위한 가시적으로 전달하기 위한 요소로 인식하기 때문이다.
aria-hidden="true"를 사용하여 숨김 콘텐츠에 대한 사용자의 접근을 차단하고자 할 경우 display: none 처리를 하여 스크린 리더기에서 접근할 수 없게 하고 aria-hidden="true"를 명시하여야 한다.

<!-- X -->
<button aria-hidden="true">버튼</button>
<button role="presentation">버튼</button>

<!-- O -->
button {display: none;}
<button aria-hidden="true">버튼</button>

레이블 제공

모든 대화형 UI의 경우 반드시 레이블을 제공하여야 한다. 레이블 제공을 위해 <label>를 사용하는 것을 권장하며 aria-label, aria-labelledby 등의 ARIA 관련 속성을 사용하여 레이블을 제공할 수도 있다.

<div>
    <div id="user-name">이름</div>
    <input type="text" id="name" aria-labelledby="user-name">
</div>

유효성 검사

ARIA를 사용할 경우 의미를 가지는 시맨틱 요소와 충돌되지 않도록 하는 것이 필요하다.

1 2	<!-- X --> <h1 role="button">버튼</h1>

REFERENCE
https://www.youtube.com/watch?v=08ha5EkByIo&list=PLtaz5vK7MbK355QFGb4q8DfFPbh3NQDda