🤔wai-aria🤔

Web Accessibility Initiative – Accessible Rich Internet Applications

WAI는 W3C에서 웹 접근성을 담당하는 기관.
ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미함.
스크린 리더 등 보조 기술을 사용하는 장애인이 RIA 기술로 제작된 웹 애플리케이션을 제대로 사용할 수 없기때문에 RIA 기술이 접근성에 취약하다는 비판을 받아왔음.

이에 W3C(World Wide Web Consortium, 이하 W3C)에서는 웹 콘텐츠 및 웹 애플리케이션의 접근성과 상호 운용성을 개선하기 위해 기술 명세를 발표했는데 이 명세가 바로 WAI-ARIA(Web Accessibility Initiative - Web Accessible Rich Internet Applications, 이하 WAI-ARIA)임.

WAI-ARIA는 스크린 리더 및 보조 기기 등에서 접근성 및 상호 운용성을 향상시키기 위한 목적으로 탄생했으며 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있음

2014년 3월 20일 WAI-ARIA는 W3C 권고안으로 지정되었으며, WAI-ARIA 명세의 일부는 HTML5 명세와 통합됨.

❗WAI-ARIA 사용하는 이유❗

• RIA의 동적 웹 애플리케이션 접근성 보장 지침이 부족
• Ajax, 통한 실시간 변경 콘텐츠, SPA 방식의 콘텐츠 변경
• 화면 확대사용자의 경우, 가시 범위 밖 콘텐츠의 변경 내용 인지 불가능

WAI-ARIA를 이용해서 개발자가 의도한 유저 인터페이스(User Interface) 행동이나 구조적인 정보를 스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일하게 정보를 제공하고 행동을 유도함으로써 웹페이지 탐색을 돕는 사용자 경험(UX)을 제공합니다

❗WAI-ARIA 사용하는 방법❗

ARIA는 HTML 태그에 필요한 정보를 제공해주는 보조 기술로서 아래의 내용을 주의하여 WAI-ARIA를 사용해 주세요.

• HTML5 Section 요소와 중복되어 사용하지 말아 주세요.
• HTML5에서 추가된 의미 있는 태그를 먼저 사용하고 의미를 부가적으로 설명해주고자 할 때 WAI-ARIA의 role을 추가해줍니다.

HTML5 Section tag	Landmark Role	설명
<nav>	role="navigation"	다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역(메인 메뉴 혹은 서브 메뉴로 사용)
<main>	role="main"	role="main"본문의 주요 콘텐츠 영역.한 페이지 내에 1개만 사용이 가능하며,<article>,<aside>,<footer> 요소의 하위 요소로 사용할 수 없다
<aside>	role="complementary"	주요 콘텐츠와 연관이 적은 의미 있는 콘텐츠 영역 (예) 날씨, 주식
<form>	role="form"	가운데
X	role="application"	<div> 요소와 같이 그룹 역할을 하는 요소로 대체
X	role="banner"	<header> 요소와 비슷한 의미. <header role="banner">로 사용 시 페이지별 한 번만 사용
X	role="search"	검색의 역할을 담당하는 서식 영역 <div>또는 <form> 요소 사용 권장
X	role="search"	검색의 역할을 담당하는 서식 영역 <div> 또는 <form> 요소 사용 권장
X	role="contentinfo"	<footer> 요소와 비슷한 의미 <footer role="contentinfo">로 사용 시 페이지별 한 번만 사용

❗키보드 사용 보장❗

사용자와 상호 작용이 필요한 대화형 UI의 경우 키보드로도 접근 및 사용이 가능하도록 제공하여야 한다.

여기서 상호 작용이 필요한 대화형 UI란 사용자가 클릭할 수 있는 정보나 탭 또는 드래그 앤 드롭, 슬라이드, 스크롤 등의 기능이 필요한 콘텐츠를 의미한다.

기본적으로 키보드로 접근할 수 없는 HTML 요소의 경우 tabindex 속성을 사용하여 키보드로 접근이 가능하도록 할 수 있움.

또한 tabindex 속성에 0을 지정하면 콘텐츠의 선형화 순서대로 접근할 수 있고 0보다 작은 값을 지정하면 키보드로 접근이 불가능 한 상태가 된다.

<!-- 키보드로 접근 가능 -->
<span role="button" tabindex="0">버튼</span>

<!-- 키보드로 접근 불가능 -->
<span role="button" tabindex="-1">버튼</span>

❗숨김 콘텐츠❗

• 사용자에게 정보를 전달하되 단순히 화면에서만 보이지 않도록 처리된 콘텐츠에 aria-hidden=“true”를 지정해서는 안된다.

• 단순히 가시적으로만 숨긴 콘텐츠에 특정 role을 부여했더라도 스크린 리더 등의 보조 기기에서는 aria-hidden=“true”로 지정된 상태라면 의미적으로도 숨겨진 콘텐츠로 인식하게 된다.

• 또한 이와 비슷하게 특정한 의미를 전달해야 하는 요소에 presentation이나 none의 역할(Role)을 지정하여서도 안된다.

• 스크린 리더 등의 보조 기기는 role=“presentation”, role=”none”으로 지정된 요소를 의미 없이 단순히 가시적으로 전달하기 위한 요소로 인식하기 때문이다.

• aria-hidden=“true”를 사용하여 숨김 콘텐츠에 대한 사용자의 접근을 차단하고자 할 경우 CSS의 display 속성에 none 값을 지정하여 스크린 리더 등의 보조기 기에서 접근할 수 없도록 하고 ariahidden=“true”을 명시해야 한다.

❗레이블 제공❗

모든 대화형 UI의 경우 반드시 레이블을 제공하여야 합니다. 레이블 제공을 위해 HTML의 요소를 사용하는 것을 권장하며 WAI-ARIA 관련 속성으로 aria-label, aria-labelledby 등을 사용하여 접근 가능한 이름을 제공할 수도 있습니다.

<!-- 레이블 요소를 사용한 경우 -->
<div class="container">
	<label for="user-name">이름</label>
	<input type="text" id="user-name">
</div>

<!-- aria-label, aria-labelledby 속성을 사용한 경우 -->
<div>
	<div id="user-name">이름</div>
	<input type="text" aria-labelledby="user-name">
</div>

<button aria-label="닫기"> X </button>

❗유효성 검사❗

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

가령 헤딩의 의미를 가지는 <h1> 요소에 role=“button”을 부여하면 해당 요소에 적절하지 않은 속성을 사용했다는 문법 오류를 경험하게 될 것이다.

❗랜드마크❗

랜드마크(Landmark Role)는 웹 페이지에서 제공되는 콘텐츠 유형이 어떤 역할을 하는지 식별할 수 있도록 도와주는 표지판 기능으로 기존 웹접근성 지침에서 요구하고 있는 건너뛰기 링크의 발전된 모습이면서 콘텐츠 블록의 제목 제공보다 명확한 영역 구분이 가능하다는 장점을 가진다.

<div class="container">
	<div role="banner">banner</div>
	<div role="navigation">navigation</div>
	<div role="main">
		<div role="application">application</div>
	</div>
	<div class="complementary">
		<div role="search">search</div>
		<div role="form">form</div>
	</div>
	<div role="contentinfo">contentinfo</div>
</div>