mdn WAI-ARIA basic 전반부 공부/번역
참고 : https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
WAI-ARIA basics - Learn web development | MDN
This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.
developer.mozilla.org
unsemantic HTML과 자바스크립트에 의해 동적으로 업데이트되는 콘텐츠를 포함하는 복잡한 UI를 제어하는 것은 어려울 수 있다.
WAI-ARIA는 브라우저와 보조 기술이 인식하고 사용하여 사용자에게 현재 상황을 알려줄 수 있는 추가 의미를 제공하여 위와 같은 문제를 해결하는 데 도움이 되는 기술이다.
WAI-ARIA란 무엇인가.
Web Accessibility Initiative – Accessible Rich Internet Applications
A whole new set of problems
웹앱이 더 복잡하고 동적으로 되면서 접근성 기능과 문제가 새롭게 나타나기 시작했다.
예를 들어, HTML은 페이지의 일반적인 기능을 정의하기 위한 많은 시맨틱 요소들을 도입했다
이들이 사용 가능하기 전에는 div에 ID나 클래스를 사용했다.
ex) <div class=”nav”>
하지만 이런 방식은 문제가 있었다.
프로그래밍적으로 메인 내비게이션같은 특정 페이지 기능을 더 쉽게 찾을 수 있는 방법은 없었다.
초기 해결책은 페이지 내부를 탐색할 수 있게 내비게이션 역할을 하는 하나 이상의 링크들을 페이지 상단에 숨겨놓는 것이었다.
하지만, 확실한 방법은 아니였는데, 스크린리더가 페이지 상단부터 읽어줄때만 사용이 가능했다.
그리고, 앱에서 날짜를 선택하는 데 사용되는 날짜 선택기나 값을 선택하는 데 사용되는 슬라이더처럼 복잡한 컨트롤이 기능상 등장하기 시작했다.
그래서 HTML은 이런걸 렌더링하기 위한 특수한 input type 들을 제공했다.
type=date, type=range
이런 기능들은 초기에는 잘 지원되지 않았고, 아직도 몇몇 부분에서는 스타일을 적용하기 어렵다.
이로 인해 디자이너와 개발자들이 사용자 정의 솔루션을 선택하는 경우가 많았다.
이런 네이티브 기능 대신 일부 개발자는 자바스크립트 라이브러리에 의존해서 이런 부분의 컨트롤을 일련의 중첩된 div로 생성하고 스타일과 기능을 제어했다.
근데 이 방식의 문제점은 시각적으로 작동하지만 스크린 리더는 얘네가 뭔지 전혀 이해할 수 없었고, 사용자에게는 의미를 설명할 의미론이 없는 요소들의 집합이라고 전달되었다.
WAI-ARIA의 도입
WAI-ARIA는 W3C에서 작성한 명세서이다.
요소에 적용할 수 있는 추가 HTML 속성 집합을 정의하여 추가 의미를 제공하고 접근성을 향상시키는 데 사용된다.
해당 명세에는 3개의 주요 기능이 있다
Role (역할)
요소가 무엇인지, 무슨 동작을 하는지 정의한다.
이 중 많은 role은 주로 구조적인 요소의 의미 값을 중복하는 랜드마크 role 이라고 불린다.
role='navigation' (<nav>) 혹은 role='complementary' <aside> 같은 구조적 요소의 의미를 중복한다
다른 일부 역할은 banner, search, tablist, tabpanel 같은 다양한 페이지 구조를 설명하며,
이런 역할은 일반적으로 UI에서 찾아볼 수 있다.
Properties (속성)
요소의 속성을 정의하는데, 추가적인 의미나 의미론을 부여하기 위해 사용될 수 있다.
예를 들어서 aria-required 는 양식 입력이 유효하려면 채워져야 한다는 것을 지정한다.
aria-labelledby 는 요소에 id를 지정한 다음 해당 id를 페이지의 다른 요소를 나타내는 레이블로 참조할 수 있다.
이는 label의 for 속성을 사용하여 여러 요소에 대한 레이블을 지정하는 것이 불가능한 경우에 유용하다.
- aria-labelledby 를 사용해서 div에 포함된 핵심 설명이 여러 테이블 셀의 레이블임을 지정할 수 있다.
- 이미지 alt 속성의 대안으로도 사용 가능하다. 즉, 이미지 alt 속성안에 정보를 반복적으로 기술하지 않고 페이지에 이미 있는 정보를 이미지의 alt 값으로 지정할 수 있다.
State (상태)
aria-disabled 같이 요소의 현재 상태를 정의하는 특수한 속성이다.
스크린리더는 위와 같은 속성으로 disabled 인지 구체화할 수 있다.
상태는 앱의 라이프사이클동안 속성이 변하지 않는 property와 다르다.
state는 자바스크립트를 통해 일반적으로 프로그래밍상에서 변할수 있다.
언제 WAI-ARIA 를 사용해야 하는가?
WAI-ARIA가 유용한 4가지 영역
- Signposts/Landmarks
- Dynamic content updates
- Enhancing keyboard accessibility
- Acessibility of non-semantic controls
Signposts/Landmarks
ARIA의 role 속성값은 다음과 같이 landmark (지표) 역할을 할 수 있다.
- HTML요소의 의미를 복제
- ARIA의 role 값들은 HTML의 시맨틱한 요소들과 유사한 역할을 할 수 있다.
- role="navigation"
- 다양한 기능적 영역에 대한 지표
- HTML에 직접 대응되지 않는 특정 기능상의 표시를 하는데 사용될 수 있다.
Dynamic content updates
스크린 리더는 끊임없이 변하는 콘텐츠를 읽는것을 어려워한다
XMLHttpRequest나 DOM API들을 통해 콘텐츠 영역이 갱신될 때 스크린 리더가 유저에게 설명하도록 aria-live 를 사용할 수 있다.
Enhancing keyboard accessibility
일부 빌트인 HTML 요소들은 기본적으로 키보드 접근성을 갖는다.
하지만 JS를 사용해서 비슷한 상호작용을 구현할 때 다른 요소가 함께 사용되면 키보드 접근성과 스크린 리더에 문제가 생길 수 있다.
이걸 피할수 없는 경우, WAI-ARIA는 tabindex를 통해 다른 요소가 포커스 받을 수 있도록 하는 수단을 제공한다.
즉, 상호작용을 직접 구현할 때 키보드나 스크린 리더 사용자들에게 어려움을 주는 상황이 있을 수 있다.
이런 경우 tabindex를 활용할 수 있다.
Accessibility of non-semantic controls
div들을 중첩시켜 복잡한 UI기능을 만들때나, 기존의 컨트롤을 자바스크립트로 향상 혹은 변경하려 할 때 접근성에 안좋은 영향이 갈 수 있다.
스크린 리더 사용자는 의미나 다른 힌트가 없을 때 해당 기능이 뭘 하는지 이해하기 어려울 수 있다.
이런 상황에서 ARIA는 role, property의 조합으로 button, listbox, tablist 같은 추가 힌트를 제공시킬 수 있다.