aria-hidden, ARIA-Modal, presentation 역할 및 none 역할 바르게 사용하기

WAI-ARIA 명세 실무 적용하게 된 배경

(aria-hidden aria-modal, WAI-ARIA의 내용이다.)

페이지를 새로고침하지 않고 콘텐츠를 Ajax 방식으로 갱신했을 때 전맹 시각장애인은 어떤 응답을 받을 수 있을까? 갱신 사실을 보조기기에 즉시 알려줄 수 있으면 좋겠다. 비장애인이 화면에 등장하는 툴팁을 보면서 비밀번호를 바르게 생성(입력)하는 동안 시각 장애인은 아무런 안내도 받지 못한 상태로 잘못된 비밀번호를 계속해서 입력하고 있다.

 

자세한 설명은 밑의 문서에서..

https://github.com/lezhin/accessibility/blob/master/aria/README.md#aria-modal

aria-hidden

웹페이지 제작자는 웹 페이지의 일부 콘텐츠를 숨길 필요가 있습니다. 대표적으로, 버튼을 클릭했을 때 관련 콘텐츠가 펼쳐지거나, 탭 위젯에서 탭을 활성화하는 등 사용자가 페이지에서 컨트롤과 상호작용한 후 불필요한 콘텐츠 등이 될 수 있습니다. 콘텐츠를 숨기는 대표적인 기술로는 CSS의 display:none, visibility:hidden 등이 있습니다. 이러한 기술은 웹페이지에서 콘텐츠가 보이지 않도록 시각적으로 콘텐츠를 숨길 뿐만 아니라 스크린 리더와 같은 보조기술로도 탐색할 수 없습니다. aria-hidden은 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한합니다. aria-hidden이 "true"로 설정되면, 스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없습니다. aria-hidden이 사용될 수 있는 대표적인 사례는 다음과 같은 것이 있습니다:

1. 요소에 장식용으로 간주될 수 있는 콘텐츠가 포함되어 있거나 페이지에 렌더링 된 동등하게 액세스 가능한 콘텐츠에 중복되는 요소를 보조기술 사용자에게 노출되지 않도록 설정할 수 있습니다. 이를테면, 시각적으로 렌더링 된 텍스트와 함께 SVG 또는 글꼴 아이콘을 포함하는 링크입니다. 이 상황에서 아이콘은 링크 텍스트와 중복될 수 있으므로 보조기술 사용자에게 아이콘 정보를 숨김으로써 콘텐츠 탐색을 용이하게 할 수 있습니다.
2. Modal 대화상자와 같은 위젯에서 보조기술 사용자가 Modal 본문에만 탐색을 제한하도록 설정할 수 있습니다. aria-hidden을 대화상자 외부 콘텐츠에 설정하고, 키보드 초점을 대화상자 내로 제한하여 Modal 대화상자 본문 내에서만 보조기술 사용자의 탐색을 제한할 수 있습니다.

aria-hidden은 키보드 및 마우스 사용자 등과 같은 모든 사용자를 대상으로 콘텐츠를 숨기는 방법이 아니므로, 사용에 주의해야 합니다. aria-hidden 상태를 다음의 값으로 설정하여 보조기술 사용자의 콘텐츠의 숨김 여부를 결정할 수 있습니다:

• true: 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한합니다. aria-hidden이 "true"로 설정된 콘텐츠는 스크린 리더의 가상 커서에서 탐색되지 않습니다. ul, table과 같이 하위 요소를 포함할 수 있는 요소에 aria-hidden을 "true"로 설정하면 하위 요소까지 숨길 수 있습니다.
• false: 접근성 API가 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있습니다.

 

주의

aria-hidden을 사용하여 스크린 리더와 같은 보조 기술에 콘텐츠를 숨기는 경우 웹페이지 제작자는 반드시 동일하거나 유사한 의미와 기능이 스크린 리더와 같은 보조 기술로 탐색할 수 있는지 확인해야 합니다. 또한, 링크, 버튼과 같이 초점을 받을 수 있는 요소를 aria-hidden으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 합니다.

 

aria-modal

이전 섹션에서 Modal 대화 상자 내에서만 콘텐츠 탐색을 제한하기 위해 aria-hidden을 적용하는 방법을 소개했습니다. aria-modal 속성을 사용하면 접근성 API는 스크린 리더와 같은 보조기술에서 Modal 대화상자 내에서만 콘텐츠가 탐색되도록 알립니다. 하지만, 모든 스크린 리더가 aria-modal을 지원하지 않으므로 적용에 주의해야 합니다.

• true: aria-modal 속성을 "true"로 설정하여 스크린 리더와 같은 보조기술 사용자가 대화상자 내에서만 콘텐츠를 탐색할 수 있도록 제한합니다.
• false: aria-modal을 "false"로 설정하여 보조기술이 대화상자 외부의 콘텐츠를 탐색할 수 있도록 설정합니다.

 

presentation 역할

HTML에서의 각 요소는 고유한 역할을 가지고 있습니다. 예를 들어, a 태그는 링크, button 태그는 버튼과 같은 역할 등이 부여되어 있습니다. 이러한 요소의 역할을 브라우저의 접근성 API를 통해 보조기술 사용자에게 전달합니다. 웹페이지를 제작할 때 HTML의 부여된 기본적인 역할로 마크업할 수 있지만, 메시지 목록, 메뉴 모음과 같은 위젯을 제작하거나 HTML에서 지원하지 않는 역할을 ARIA로 제공하고자 할 때 또는 마크업한 요소의 의미를 제거하고 내용만을 보조기술 사용자에게 전달하려 할 때 presentation 역할을 사용할 수 있습니다.

1. HTML을 의미에 맞지 않게 마크업하여(table 레이아웃으로 콘텐츠를 구성하는 등) 보조기술 사용자에게 요소의 의미를 제거하여 콘텐츠의 내용만을 전달하도록 할 수 있습니다. 하지만, 이러한 의미에 맞지 않게 마크업한 콘텐츠의 사용을 지양해야 합니다.
2. 기존에 마크업된 요소에서 불필요한 요소의 의미를 제거하여 스크린 리더와 같은 보조기술 사용자의 탐색을 향상시킬 수 있습니다.
3. table, ul과 같은 하위 요소를 포함할 수 있는 요소에 presentation 역할을 적용 시 주의해야 합니다. ul, table과 같은 요소에 presentation 역할을 잘못 적용하면 테이블 목록과 같은 요소의 의미가 스크린 리더에 전달되지 않아 스크린 리더 사용자의 탐색에 영향이 있을 수 있습니다.
   

 

주의

ARIA 1.1에서는 presentation 역할과 동일한 none 역할을 사용할 수 있으며, presentation 역할이 none 역할로 대체됩니다.  이러한 이유는, presentation 역할을 aria-hidden="true"로 동의어로 잘못 생각하는 사람들이 많음에 따라 역할의 의미를 명확히 전달하기 위해 none이 도입되었습니다. 하지만, 보조기술의 호환성을 위해  role="none presentation" 형식으로 작성하거나 role="presentation"과 같이 사용하는 것이 좋습니다.

aria-presentation역할 및 aria-hidden 사용 시 주의사항

aria-hidden과 presentation 역할의 바른 사용 방법 및 주의할 점을 정리하면 다음과 같습니다:

1. display:none이나 visibility:hidden으로 숨겨진 콘텐츠는 시각적으로 콘텐츠를 숨김으로 화면에 표시되지 않으며, 스크린 리더와 같은 보조기술로도 탐색할 수 없습니다.
2. aria-hidden은 요소의 의미와 내용을 스크린 리더와 같은 보조기술로 노출되지 않지만, none 역할은 요소의 의미만 제거되며 스크린 리더로 요소의 내용을 읽을 수 있습니다.
3. 링크, 버튼과 같이 초점을 받을 수 있는 요소를 aria-hidden으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 합니다.
   
4. modal 대화상자와 같은 위젯을 구현할 때 대화상자 외부의 콘텐츠에 aria-hidden을 "true"로 설정하여 보조기술 사용자의 탐색을 대화상자 내로 제한할 수 있지만, 키보드 및 마우스 사용자는 대화상자 외부의 콘텐츠 밖의 요소와 상호작용할 수 있으므로 이러한 요소가 초점을 받지 않도록 처리해야 합니다.
   
5. 하위 요소를 포함할 수 있는 요소에 aria-hidden이나 presentation 역할을 잘못 적용하면 요소의 의미가 스크린 리더에 전달되지 않거나 하위 요소 전체를 탐색하지 못할 수 있으므로 적용에 주의해야 합니다.
   
6. modal 대화상자를 좀 더 쉽게 구현하기 위해 aria-hidden이 아닌 aria-modal 속성을 사용할 수 있지만, 보조 기술이 이를 지원하지 않을 수 있으므로 사용에 주의해야 합니다.

이번 아티클에서 사용된 예제 코드는 다음 페이지에서 확인하실 수 있습니다:

• aria-hidden 예제 페이지
• aria-modal 예제 페이지
• presentation 역할 예제 페이지