HTML role="main" – 올바른 이해와 사용 방법

정의 및 사용 방법

role 속성의 main 값은 웹 접근성 측면에서 해당 HTML 요소에 문서의 메인(main) 콘텐츠 역할(role)이라는 의미(semantic meaning)를 부여합니다.

문서의 핵심 주제나 애플리케이션의 주요 기능 등 주요 콘텐츠(dominant content)를 포함하는 "랜드마크(landmark)" 영역을 의미합니다.

HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다.
이러한 랜드마크 요소들은 웹 페이지 내 특정 영역(예: 글로벌 헤더, 메인, 사이드바, 글로벌 푸터 등)을 정의하는 특별한 시멘틱 역할을 가지며, 웹 페이지를 이해하고 탐색하기 쉽게 만들고, 스크린 리더 및 기타 보조 기술을 사용하는 사용자에게 페이지의 레이아웃과 구조를 전달하는 데 중요한 역할을 합니다.

좀 더 자세한 내용은 ARIA Landmarks Example을 참조하시기 바랍니다.

role 속성의 main 값을 가지는 요소는 페이지의 주요 콘텐츠 영역을 나타내는 랜드마크 요소로서의 역할(role)이라는 의미(semantic meaning)가 부여되며, 페이지 내의 핵심 내용을 포함해야 합니다.

기본 예제

HTML 제목(<h1>~<h6>) 태그

고려할 점

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

role 속성의 main 값으로 부여할 수 있는 메인(main) 콘텐츠 역할(role)을 이미 가지고 있는 요소도 있습니다.

<main> 태그는 고유한 의미(semantic meaning)에 해당하는 역할(role)인 role 속성의 값이 main입니다. 즉, role 속성의 값을 별도로 지정하지 않으면, 암시적인(implicit) role 속성의 값은 main입니다.

<main> 태그는 이미 문서의 메인(main) 콘텐츠 역할(role)을 하기 때문에 이 요소에 role 속성의 main 값으로 역할을 부여할 필요는 없으며, 스크린 리더 등과 같은 웹 접근성 도구뿐만 아니라 관련 기술에서의 처리, 코드를 직접 다루는 개발자 및 코드의 가독성 측면에서도 올바른 의미론적 HTML 요소인 <main> 태그를 사용하는 것이 좋습니다.

브라우저 호환성 문제로 <main> 태그를 사용할 수 없는 경우를 제외하고, role="main" 사용 보다는 <main> 태그를 사용하세요.

주의할 점

문서에는 hidden 속성이 지정되지 않은 role 속성의 main 값이 지정된 요소가 두 개 이상 있어서는 안 됩니다.

명세서에 따르면 role 속성의 main 값은 문서 내에서 한 번만 사용해야 합니다.
이 규칙은 문서의 구조를 명확하게 유지하고 웹 페이지를 올바르게 해석하기 위해 따라야 하는 중요한 규칙 중 하나입니다.

만일 SPA(단일 페이지 애플리케이션)을 자바스크립트로 서버의 왕복 없이 콘텐츠를 구현하기 위해서 role="main"을 지정한 여러 개의 요소를 미리 마크업할 경우에는, 현재 보여지는 콘텐츠가 아닌 role="main" 요소들에게는 hidden 속성을 사용해서 숨겨야 합니다.

다음 예제를 참조하시기 바랍니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>단일 페이지 애플리케이션</title>
        <link rel="stylesheet" href="spa.css">
        <script src=spa.js async></script>
    </head>
    <body>
        <nav>
            <!-- 링크를 클릭하면
            자바스크립트로 서버의 왕복 없이
            관련 main 콘텐츠를 동적으로 구현 -->
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
        <div role="main" aria-labelledby="title1">
            <h1 id="title1">Home</h1>
            ...
        </div>
        <div role="main" hidden aria-labelledby="title2">
            <h1 id="title2">About</h1>
            ...
        </div>
        <div role="main" hidden aria-labelledby="title3">
            <h1 id="title3">Contact</h1>
            ...
        </div>
    </body>
</html>

문서 내에서 여러 개의 role="main"이 사용되었을 경우에는 role="main"이 사용된 각각의 요소에 고유한 레이블을 지정해야 합니다. 콘텐츠 내에 적절한 레이블이 있다면 aria-labelledby를 사용하고, 그렇지 않다면 aria-label을 사용합니다. 단, 문서 내에서 한 개의 role="main"이 사용되었을 경우 레이블의 사용은 선택 사항입니다.

올바른 구문 구조

role="main"을 지정한 요소는 페이지의 주요 콘텐츠 영역을 나타내는 랜드마크 요소로서의 역할(role)이라는 의미(semantic meaning)를 부여받았으므로 HTML 문서 내에서도 이 주요 콘텐츠가 잘 드러나도록 올바른 위치에 있어야 합니다.

해당 요소가 올바른 위치에 있지 않으면 HTML 문서 전체의 의미론적인 측면에서 구조의 파악 등에 문제가 될 수 있습니다. 이러한 이유로 인해서 해당 요소는 다음과 같은 HTML 계층 구조에 위치해야 합니다.

<html>, <body>, <div>, <form> 등의 제한적인 부모 요소 아래에만 위치해야 합니다.
독립적인 사용자 정의 태그(Autonomous custom elements)를 부모 요소로 사용할 수 있습니다.
이들 부모 요소는 의미론적 측면에서 그 태그 고유한 역할의 의미를 바꾸는 WAI-ARIA(role 속성으로)을 가지고 있지 말아야 하는 것을 원칙으로 합니다.

내비게이션 건너뛰기 링크(접근성 고려사항)

많은 웹 페이지에서 키보드 및 스크린 리더 사용자는 메인 콘텐츠에 도달하기 전에 탐색 링크 및 기타 요소의 긴 목록을 탐색해야 합니다. 이는 일부 형태의 운동 장애가 있는 사용자에게 특히 어려울 수 있습니다. 메인 콘텐츠에 도달하기 전에 사용자가 여러 번 동작을 수행하도록 요구하는 것은 접근성 장벽이 됩니다.

물론 마우스를 사용하는 시각이 있는 사람들은 이와 같은 웹 페이지에 아무런 문제가 없습니다. 그들은 거의 즉시 페이지를 훑어보고 주요 콘텐츠가 어디에 있는지 확인할 수 있습니다.

내비게이션 건너뛰기 링크는 화면 리더와 키보드 사용자에게 주요 콘텐츠로 바로 이동하는 기능을 제공합니다.