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

WAI-ARIA에서는 보조기술 사용자를 위해 콘텐츠의 노출 여부를 제어하는 aria-hidden, Modal 및 탭 컨트롤과 같은 복잡한 위젯 제작 시 HTML 요소의 기본 역할을 적절한 ARIA 역할로 대체하기 위한 presentation 및 none 역할이 있습니다.
aria-hidden 상태를 사용하여 스크린 리더와 같은 보조기술 사용자에게 콘텐츠를 숨기는 방법과 presentation 역할 및 ARIA 1.1에 도입된 presentation 역할과 동일한 none 역할을 바르게 사용하는 방법에 대해 살펴보겠습니다.

1. 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가 스크린리더와 같은 보조기술 사용자에게 수겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있습니다.

주의

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

2. aira-modal

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

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

수연님 피드백: aria-modal 예시 있으면 좋을 것 같아요.
role=“dialog” 이나 alertdialog 일 때 aria-modal 을 같이 선언하니까요!
aria-hidden=“true” 가 어느 영역에 쓰이는 건지도 알기 쉬울 거 같아요.

presentation 역할

HTML에서의 각 요소는 고유한 역할을 가지고 있습니다. 예를 들어, <a> 태그는 link, <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="ture"의 동의어로 잘못 생각하는 사람들이 많음에 따라 역할의 의미를 명확히 전달하기 위해 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으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 합니다.

   이때 함께 사용하는 게 tabindex="-1"

4. modal 대화상자와 같은 위젯을 구현할 때 대화상자 외부의 콘텐츠에 aria-hidden을 "true"로 설정하여 보조기술 사용자의 탐색을 대화상자 내로 제한할 수 있지만, 키보드 및 마우스 사용자는 대화상자 외부의 콘텐츠밖의 요소와 상호작용할 수 있으므로 이러한 요소가 초점을 받지 않도록 처리해야 합니다.

5. 하위 요소를 포함할 수 있는 요소에 aria-hidden이나 presentation 역할을 잘못 적용함녀 요소의 의미가 스크린 리더에 전달되지 않거나 하위 요소 전체를 탐색하지 못할 수 있으므로 적용에 주의해야 합니다.

6. modal 대화상자를 좀 더 쉽게 구현하기 위해 aria-hidden이 아닌 aria-modal 속성을 사용할 수 있지만, 보조기술이 이를 지원하지 않을 수 있으므로 사용에 주의해야 합니다.