아티클

WAI-ARIA 1.2 업데이트 내용 알아보기 1부 : 추가된 역할 알아보기

2020-02-27 15:42:15

안녕하세요? 엔비전스입니다. 지난 12월에 WAI-ARIA 바르게 사용하기 8부 – 자동완성 편집창의 올바른 구현방법으로 찾아뵈었습니다. 이번 아티클에서는 지난해 12월 18일에 새로 공개한 WAI-ARIA 1.2의 추가되거나 변경된 업데이트 내용을 살펴보도록 하겠습니다.

새로운 역할(role) 속성값 살펴보기

이번 WAI-ARIA 1.2에서는 문서 구조나 텍스트와 관련된 role 속성값이 많이 추가된 것이 특징이라고 할 수 있으며, 이번에 추가된 role의 값들은 모두 HTML 태그에 존재하는 요소들입니다..

새로 추가된 역할(role)은 다음과 같습니다.

1: 인용문(blockquote) 역할

인용문에 대한 요소 정보를 blockquote 태그나 q 태그처럼 role 속성을 추가하여 스크린 리더 사용자에게 제공할 수 있습니다.

NATIVE TAG
행복하게 여행하려면 가볍게 여행해야 한다.

- 앙투안 드 생텍쥐페리

WAI-ARIA ROLE

NVDA로 role="blockquote"를 체험하려면 이 페이지를 최신 버전의 Mozilla Firefox로 접속해주시기 바랍니다.

He who would travel happily must travel light.

- Antoine Marie Jean-Baptiste Roger de Saint-Exupéry

2: 위 첨자(superscript), 아래 첨자(subscript) 역할

HTML의 <sup>과 <sub>태그에 대응하는 커스텀 위 첨자(role="superscript"), 아래 첨자(role="subscript") 역할이 추가되었습니다.

NATIVE TAG
Apple[1]
사과
Apple[2]
Apple Inc(애플 컴퓨터)
H2O
물의 화학식
CO2
이산화탄소의 화학식
WAI-ARIA ROLE
사과[1]
사과나무의 열매
사과[2]
자기의 잘못을 인정하고 용서를 빔
H2
수소의 화학식
O2
산소의 화학식

3: 캡션(caption) 역할

이제 커스텀 테이블 요소에 사용이 가능한 HTML 네이티브의 <caption> 태그와 대응되는 role=”caption”이 추가되었습니다.

커스텀 캡션(role=”caption”)의 올바른 사용 조건은 다음과 같습니다.

  1. 커스텀 캡션(role=”caption”)은 table, grid, figure 역할을 가진 태그에 사용되어야 합니다.
  2. grid나 table에 사용 시 캡션은 반드시 셀 시작 전, 첫 번째 요소로 제공해야 합니다.
  3. Figure 태그는 예외로 첫 번째나 마지막에 캡션을 제공할 수 있습니다.
NATIVE TAG
MT 제주 여행 기획
시간/요일 2/20 목요일 2/21 화요일
9:00 ~ 11:50 오리엔테이션 및 아이스 브레이킹 팀별 여행 오리엔테이션 및 팀별 여행 계획
14:00 ~ 17:50 놀이 : 집을 만들어라 팀별 여행 1
19:00 ~ 20:00 레크리에이션 및 장기자랑 팀별 여행 2
WAI-ARIA ROLE
MT 제주 여행 기획
시간/요일
2/20 목요일
2/21 화요일
9:00 ~ 11:50
오리엔테이션 및 아이스 브레이킹
팀별 여행 오리엔테이션 및 팀별 여행 계획
14:00 ~ 17:50
놀이 : 집을 만들어라
팀별 여행 1
19:00 ~ 20:00
레크리에이션 및 장기자랑
팀별 여행 2

4: 코드(code) 역할

이제 컴퓨터 코드를 적을 때 사용하는 code 태그의 역할을 커스텀으로 제공할 수 있습니다.

컴퓨터 언어와 같이 기호가 많이 사용되는 코드의 일부분을 한 줄로 작성하여 사용자에게 보여줄 때 사용되는 code 태그를 role=”code”를 통해 커스텀으로 제공할 수 있습니다:

NATIVE TAG

<code></code>는 컴퓨터가 이해할 수 있는 컴퓨터의 언어의 일부분을 한 줄로 표기하는 태그입니다!

WAI-ARIA ROLE

role="code"는 aria로 제공한 code 태그로, 마찬가지로 컴퓨터가 이해할 수 있는 컴퓨터의 언어의 일부분을 한 줄로 표기하는 태그입니다!

5: 미터(meter) 역할

HTML5에서 고정된 수치의 값을 표시하기 위한 스칼라 수치 막대를 추가하는 <meter> 태그를 이제 role=”meter”를 통해 제공할 수 있습니다.

커스텀 미터(role=”meter”)의 올바른 사용 조건은 다음과 같습니다.

  1. meter 태그에는 min, max를 통해 최솟값과 최댓값을 정하며, value 속성으로 수치를 제공합니다. 이와 마찬가지로 role=”meter"에는 이것들을 대체하는 aria-valuemin, aria-valuemax를 제공해야 하며, 현재 값을 나타내기 위한 aria-valuenow를 제공해야 합니다. 즉, 반드시 정해진 최솟값과 최댓값이 있어야 합니다.
  2. meter 태그(role=”meter”)는 정적인 수치 콘텐츠를 제공해야 합니다: 실시간으로 변경되는 진행률을 표시하기 위한 태그가 아닙니다. 미터 요소를 실시간으로 변경되는 진행률을 표시하는 용도로 사용해서는 안 됩니다. 실시간 진행률을 표시하려면 role=”progressbar”로 제공하여야 합니다.

HTML5에 새로 추가된 meter 태그에는 슬라이더에 구성되는 속성 이외에도 low, optimum, high라는 속성값이 있으며, 이 속성에 정해진 값을 제공하여, 수치의 높고 낮음을 작성할 수 있습니다. 하지만, 이번 WAI-ARIA 1.2에서는 해당 속성과 관련된 aria 속성이 추가되지 않았으며, 다음 버전인 WAI-ARIA 1.3에서 추가할 예정입니다.

NATIVE TAG
배터리 잔량:
WAI-ARIA ROLE
배터리 잔량:

6: 삽입과 삭제를 나타내는, 추가(insertion), 삭제(deletion) 역할

HTML의 <ins> 와 <del> 태그를 대체 가능한 role=”insertion”과 role=”deletion” 요소 유형이 추가되었습니다.

NATIVE TAG
Accessible Naver | Inaccessible Naver
WAI-ARIA ROLE
Accessible Naver | The Most Accessible Naver

7: 시간이나 날짜 정보를 제공하기 위한 time 역할

HTML에서 시간이나 날짜 등을 표기할 때 사용되는 <time> 요소를 대체하는 WAI-ARIA 역할인 role=”time”이 추가되었습니다.

본래 time 태그에는 datetime 속성이 따로 존재하나, 현재 WAI-ARIA의 time 요소에는 datetime을 제공할 수 있는 속성이 따로 존재하지 않습니다. 이는 WAI-ARIA 1.3에서 추가를 고려할 것입니다.

datetime 태그를 통해 날짜를 데이터로 전달할 수 있으나, 현재 role="time"의 경우, 해당 속성이 없으므로, 태그에 사용하는 텍스트에 다소 제한이 있습니다. 자세한 사항은 WAI-ARIA 1.2 문서 - time 요소 섹션의 표시 형식 목록을 참고하시기 바랍니다.

NATIVE TAG
2020년 2월 20일
WAI-ARIA ROLE
2020-02-20

8: 문단을 나누는 paragraph 역할

HTML에서 문단을 표기하고 나눌 때 사용하는 <p> 요소를 대체하는 WAI-ARIA 역할인 role=”paragraph”가 추가되었습니다.

NATIVE TAG

document.getElementById("{HTML Identifier}")는 문자열과 일치하는 id의 웹페이지 DOM 요소 하나를 가져오는 고전적인 DOM 메서드입니다.

document.querySelector("{CSS Selector}")는 CSS 선택자 문자열로 웹페이지의 DOM 요소를 하나를 가져오는 아주 편리한 메서드입니다.

WAI-ARIA ROLE

role="paragraph"를 체감할 수 있도록 inline 요소에 해당 역할을 제공하였습니다.

하지만, NVDA의 화면 레이아웃 사용을 켠 상태에서는 일반적인 span처럼 읽습니다.

반드시 Insert(NVDA) + V로 화면 레이아웃을 끄고 들어주세요!

document.getElementsByClassName("{HTML CLASS}"), document.getElementsByTagName("{HTML Tag Name}"), document.getElementsByName("{HTML Name Attribute}")는 각각 문자열과 일치하는 클래스, 태그, name 속성값을 가진 웹사이트의 DOM 요소를 배열 형태로 가져오는 고전적인 DOM 메서드입니다. 위 메서드들은 document.querySelectorAll("{CSS Selector}")로 대체할 수 있습니다. 이 메서드는 CSS 선택자 문자열과 일치하는 웹페이지의 DOM 요소를 배열 형태로 가져올 수 있는 아주 편리한 DOM 메서드입니다.

9: 접근성 API가 인지할 수 있으나 시멘틱 의미를 부여하지 않는 제네릭(Generic) 요소

div나 span에 해당하는 제네릭 역할, role="generic"이 추가되었습니다. 모델이 되는 네이티브 태그를 보면 알 수 있듯이

이 역할은 시멘틱에서 아무런 의미가 없는 요소입니다.

Generic은 시멘틱 의미가 없는 요소인데, 의미가 없는 역할은 무엇 때문에 필요한가요?

일반적인 div나 span처럼 시멘틱한 의미가 없어야 하지만 접근성 API를 지원해야 하는 경우에 이 Generic 역할을 사용합니다.

그렇다면 none 역할이나 presentation 역할이 있는데, 이것들과는 무슨 차이점이 있나요?

generic 역할은 별도의 의미가 없는 요소지만 보조기술을 제공해야 할 때 사용하는 부여된 의미가 없는 역할입니다.

none 역할이나 presentation 역할은 특정 요소에 역할을 덮어씌워 의미를 없애는 것에 초점을 두고 있습니다. 결과적으로는 generic처럼 아무 의미도 없는 요소를 만들게 되는 것은 동일합니다.

하지만, generic 역할은 위 두 가지 역할처럼 다른 태그에 의미를 덮어씌워 의미를 없애는 용도로 사용되어서는 안 된다는 차이점이 있습니다. 다시 풀어서 설명하자면, presentation과 none처럼 의미가 있는 네이티브 태그(a, button, ul, ol, li...) 등에 사용되어서는 안 된다는 것입니다.

이는 개발자가 보조기술을 웹페이지나 웹 애플리케이션에 구현할 때, 아무런 의미 및 기능이 부여되지 않은 div 나 span 요소에 접근성 API를 제공받을 수 있도록 만드는 용도이기 때문입니다.

따라서 generic 역할을 제공하여도 스크린 리더 사용자에게는 특별히 다른 정보를 제공하지는 않습니다.

지금까지 WAI-ARIA 1.2에서 추가된 총 아홉 가지의 역할에 대해 알아보았습니다.

WAI-ARIA 1.2에서 추가된 역할은 모두 HTML 표준 태그를 근간으로 만들어진 것이 공통점입니다. 이번에 추가된 요소들은 모두 표준 태그가 존재하므로, 표준 태그로 대체할 수 있습니다.

따라서 특별한 경우가 아니라면 표준 태그를 사용하는 것을 고려하는 것 또한 접근성 향상을 위한 빠른 방법이라고 말할 수 있습니다.

다음 2부에서는 WAI-ARIA 1.2에서 변경된 기존 속성에 대해 다룰 예정입니다. 더 좋은 양질의 내용으로 찾아뵙도록 노력하겠습니다. 읽어주셔서 감사합니다.

댓글 0
댓글을 작성하려면 해주세요.