정의 및 사용 방법

role 속성의 none 값은 웹 접근성 측면에서 해당 HTML 요소의 고유한 의미(semantic meaning)에 해당하는 역할(role)이 접근성 API에 매핑되지 않도록 합니다.

해당 요소는 고유한 역할의 의미(semantic meaning)가 제거되었음을 선언하여, 단지 역할이 없는(none role) 시각적 표시 용도로 사용하는 콘텐츠라는 것을 스크린 리더 등과 같은 웹 접근성 도구가 식별할 수 있도록 해줍니다.

role 속성의 none 값은 presentation 값과 동의어입니다. 동일하게 작동합니다.

특징

  • 스크린 리더 등과 같은 웹 접근성 도구에게 해당 요소는 고유한 역할의 의미(semantic meaning)가 제거되었음을 선언합니다.
  • 해당 요소의 콘텐츠 자체는 여전히 사용할 수 있습니다.
  • 하지만 하위 요소들이 있는 경우 그 요소들의 고유한 역할의 의미(semantic meaning)도 제거됩니다. 단, 하위 요소 중 상호 작용이 가능한 대화형 요소(Interactive Elements, 예: <a>)의 경우에는 그 고유한 역할의 의미가 제거되지 않습니다.

고려할 점

기본적으로 HTML의 많은 요소들은 이미 고유한 역할의 의미(semantic meaning)를 가지고 있습니다.

요소에 role 속성의 none 값을 지정하면 이미 있는 고유한 역할의 의미(semantic meaning)는 제거됩니다. 이렇게 되면 특히, 스크린 리더를 사용해서 콘텐츠를 파악하는 시각장애인에게는 해당 요소의 고유한 역할의 의미가 제거된 채 정보가 전달됩니다. 하지만, 시각장애인이 아닌 경우에는 여전히 시각적으로(예를 들면 시각적인 모양이나 표시 자체를 바꾸지 않았을 경우) 해당 요소의 기존의 고유한 역할의 의미(semantic meaning)을 인지할 수도 있습니다.

이러한 상황에서는 시각장애인과 비 시각장애인에게 서로 다른 고유한 역할의 의미로 콘텐츠가 전달될 수 있다는 점에 주목해야 합니다.

따라서, role 속성의 none 값을 지정할 때에는 해당 요소의 시각적인 표시 측면과 접근성 측면 모두를 고려해서 사용해야 합니다.

role 속성의 none 값 사용하기

role 속성의 none 값은 HTML의 의미론적 측면을 고려하지 않고 단지 시각적 레이아웃 또는 표시 용도로만 사용하고 싶은 요소에 사용합니다.

기본 예제

예를 들어, 해당 요소는 웹 접근성 측면에서 특별한 의미는 없지만 시각적으로 <table>처럼 테이블 격자 레이아웃을 구현하고 싶다고 가정하겠습니다.

물론 CSS를 활용하면 테이블 레이아웃을 구현할 수도 있지만, HTML의 구조적인 측면과 편의성을 고려해 <table>로 만들고 싶은데 <table>은 HTML의 의미론적 측면, 즉 고유한 역할의 의미(semantic meaning)로 데이터가 있는 테이블(table, 표)을 나타냅니다.

이때, <table>에 role 속성의 none 값을 사용하면 고유한 역할의 의미(semantic meaning)가 제거되지만 시각적으로 테이블 격자 레이아웃을 구현할 수 있습니다.

HTML 
<!-- 시각적 배치와 편의성을 위해 <table>을 사용한 경우 -->
<table role="none">
    <tr>
        <td>메뉴 1</td>
        <td>메뉴 2</td>
    </tr>
</table>
실제 적용된 모습

위 예제처럼 <table>에 role="none"을 사용하면 하위 요소인 <tr>과 <td>의 고유한 역할의 의미(semantic meaning)도 제거됩니다.

하위 요소에 대화형 요소가 포함된 경우

role 속성의 none 값을 사용한 요소의 하위 요소중 상호 작용이 가능한 대화형 요소(Interactive Elements, 예: <a>)의 경우에는 그 고유한 역할의 의미가 제거되지 않습니다.

예를 들어 다음과 같은 상황을 가정하겠습니다.

HTML 
<!-- 시각적 배치와 편의성을 위해 <table>을 사용한 경우 -->
<table role="none">
    <tr>
        <td>메뉴 1</td>
        <td>메뉴 2</td>
        <td><a href="/about">소개</a></td>
    </tr>
</table>
실제 적용된 모습

위 예제처럼 role 속성의 none 값을 <table>에 사용하면 하위 요소인 <tr>과 <td>의 고유한 역할의 의미(semantic meaning)는 제거됩니다. 하지만 하위 요소인 <a>는 상호 작용이 가능한 대화형 요소(Interactive Elements)이므로 고유한 역할의 의미가 제거되지 않습니다.

<a>가 가지고 있는 고유의 역할의 의미인 링크도 유지되며, 클릭하면 URL로 이동할 수 있고 키보드로 포커스할 수 있는 기능도 유지합니다.

참고하세요!
aria-label 및 aria-labelledby 속성은 role="presentation"이거나 동의어인 role="none"인 요소에는 허용되지 않습니다.

주의할 점

role 속성의 none 값이 지정된 요소에 글로벌 aria-* 속성(Global ARIA States and Properties)이 설정되어 있으면 none 역할이 무시되고 해당 요소의 고유한 역할의 의미(semantic meaning)가 사용될 수 있습니다.

명세서

role 속성의 none 값에 대한 명세서 사양
명세서 사양
role="none" Accessible Rich Internet Applications (WAI-ARIA)
#none

참고문헌

같이 보기