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

WAI-ARIA 에서는 보조기술 사용자를 위해 컨텐츠의 노출 여부를 제어하는 aria-hidden, Modal 및 탭 컨트롤과 같은 복잡한 위젯 제작 시 HTML 요소의 기본 역할을 적절한 ARIA 역할로 대체하기 위한 presentation 및 none 역할이 있습니다.

이번 시간에는 aria-hidden 상태를 사용하여 스크린 리더와 같은 보조기술 사용자에게 컨텐츠를 숨기는 방법과 presentation 역할 및 ARIA 1.1에 도입된 presentation 역할과 동일한 none 역할을 바르게 사용하는 방법에 대해 살펴보겠습니다.

 

 

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 속성을 사용할 수 있지만, 보조 기술이 이를 지원하지 않을 수 있으므로 사용에 주의해야 합니다.

 

 

 

 

 

 

참고:)

https://nuli.navercorp.com/community/article/1132937

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