a11y

WAI-ARIA 역할

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 역할(Role)은 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위해 사용되는 속성입니다. 이 속성들은 특히 스크린 리더와 같은 보조 기술이 웹 페이지의 구조와 기능을 더 잘 이해하도록 도와줍니다. WAI-ARIA 역할은 HTML 요소에 추가되어 보조 기술이 사용자 인터페이스의 목적과 행동을 더 명확하게 이해할 수 있게 합니다.
주요 WAI-ARIA 역할은 Abstract Roles, Widget Roles, Document Structure Roles, Landmark Roles, Live Region Roles, Window Roles로 정의할 수 있습니다.

Landmark Roles (랜드마크 역할)

Landmark Roles는 웹 페이지에서 주요 영역을 식별하고 쉽게 탐색할 수 있도록 도와주는 ARIA 역할입니다. 이 역할들은 페이지의 중요한 섹션을 구분하여 보조 기술을 사용하는 사용자들이 빠르게 페이지의 주요 콘텐츠로 이동할 수 있도록 합니다. 이러한 역할들은 웹 페이지의 구조를 정의하고, 페이지 내에서 중요한 영역을 강조하는 데 사용됩니다.
W3C ARIA Landmark Roles

1. banner 역할

banner 역할은 기본적으로 시멘틱 마크업 사용을 권장하며 웹 페이지의 상단에 위치하는 주목할 만한 영역을 나타냅니다. 이 역할은 일반적으로 웹사이트의 로고, 제목, 주요 탐색 링크 등을 포함하는 페이지의 헤더 부분에 사용됩니다. banner 역할은 사이트 전체에 걸쳐 일관되게 반복되는 콘텐츠를 나타내며, 사용자가 페이지의 주요 제목과 탐색 메뉴를 쉽게 찾을 수 있도록 돕습니다.
W3C ARIA banner
MDN ARIA banner
UXKM : header element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 한 페이지에 두 개의 banner 역할을 사용하고 있습니다. banner 역할은 페이지에 하나만 사용해야 하며, 중복 사용은 접근성을 저해할 수 있습니다.

<div role="banner">
  <h1>Main Site</h1>
  <img src="logo.png" alt="Logo">
</div>

<div role="banner">
  <h1>Secondary Site</h1>
  <img src="secondary-logo.png" alt="Secondary Logo">
</div>

올바른 예시 이 예시는 하나의 banner 역할을 사용하여 페이지의 주요 헤더를 명확하게 정의합니다. 이 헤더는 사이트의 제목, 로고, 주요 탐색 메뉴를 포함하고 있습니다.

<div role="banner">
  <h1>Main Site</h1>
  <img src="logo.png" alt="Logo">
  <nav role="navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <header>를 사용하여 banner 역할을 자연스럽게 수행합니다. HTML5 시멘틱 마크업을 사용하면, 보조 기술은 자동으로 이 영역을 페이지의 헤더로 인식합니다. 추가적인 ARIA 속성 없이도 접근성이 보장되며, 코드의 가독성도 높아집니다.

<header>
  <h1>Main Site</h1>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

2. complementary 역할

complementary 역할은 웹 페이지에서 주 콘텐츠와 직접적인 연관은 없지만, 부가적인 정보를 제공하는 콘텐츠 영역을 나타냅니다. 이 역할은 주로 페이지의 주요 콘텐츠와는 독립적으로 보조적인 정보를 제공하는 경우에 사용되며, 보조 기술이 이러한 정보를 주요 콘텐츠와 구분하여 인식할 수 있도록 도와줍니다.
W3C ARIA complementary
MDN ARIA complementary
UXKM : aside element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 complementary 역할을 페이지의 주 콘텐츠에 사용하고 있습니다. complementary는 주 콘텐츠가 아닌, 보조적인 정보를 제공하는 데 사용되어야 합니다.

<div role="complementary">
  <h2>Main Content</h2>
  <p>This is the primary content of the page, containing the most important information.</p>
</div>

올바른 예시 이 예시는 페이지의 주요 콘텐츠와 관련된 관련 기사를 제공하는 complementary 역할을 적절하게 사용한 예입니다. 이 영역의 정보는 보조적인 것이며, 페이지의 주요 콘텐츠와는 독립적으로 제공됩니다.

<div role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#article1">Understanding ARIA Roles</a></li>
    <li><a href="#article2">Accessible Web Design Practices</a></li>
  </ul>
</div>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <aside>를 사용하여 보조적인 정보를 제공하는 영역을 정의한 것입니다. <aside>는 HTML5에서 기본적으로 complementary 역할을 수행하며, 보조 기술이 이 영역을 독립적인 보조 콘텐츠로 인식합니다.

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#article1">Understanding ARIA Roles</a></li>
    <li><a href="#article2">Accessible Web Design Practices</a></li>
  </ul>
</aside>

3. contentinfo 역할

contentinfo 역할은 웹 페이지나 애플리케이션의 바닥글 영역을 나타내는 데 사용됩니다. 이 영역은 일반적으로 저작권 정보, 법적 고지, 사이트 맵 링크, 연락처 정보 등을 포함하며, 페이지의 주요 콘텐츠와는 독립적으로 페이지의 전반적인 정보와 관련된 내용을 제공합니다.
W3C ARIA contentinfo
MDN ARIA contentinfo
UXKM : footer element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 contentinfo 역할을 페이지의 주요 콘텐츠에 사용하고 있습니다. contentinfo 역할은 페이지의 바닥글에만 사용해야 하며, 주 콘텐츠에 적용하면 안 됩니다.

<div role="contentinfo">
  <h1>Welcome to Our Website</h1>
  <p>This is the main content of the website.</p>
</div>

올바른 예시 이 예시는 저작권 정보와 법적 링크를 포함하는 바닥글에 contentinfo 역할을 적절히 사용한 예입니다. 이 영역은 페이지의 주요 콘텐츠와는 독립적인 정보를 제공합니다.

<div role="contentinfo">
  <p>&copy; 2024 My Website. All rights reserved.</p>
  <a href="/privacy-policy">Privacy Policy</a> | <a href="/terms-of-service">Terms of Service</a>
</div>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <footer>를 사용하여 바닥글 정보를 정의한 것입니다. <footer>는 HTML5에서 기본적으로 contentinfo 역할을 수행하며, 보조 기술이 이 영역을 페이지의 바닥글 정보로 자동 인식합니다.

<footer>
  <p>&copy; 2024 My Website. All rights reserved.</p>
  <a href="/privacy-policy">Privacy Policy</a> | <a href="/terms-of-service">Terms of Service</a>
</footer>

4. form 역할

form 역할은 사용자가 데이터를 입력하고 이를 서버로 제출할 수 있는 인터페이스를 나타냅니다. 이 역할은 HTML 폼 요소와 함께 사용되며, 보조 기술이 사용자가 데이터를 입력하고 전송할 수 있는 영역을 명확하게 인식하도록 도와줍니다. 기본적으로 HTML <form> 요소는 자동으로 form 역할을 가집니다.
W3C ARIA form
MDN ARIA form
UXKM : form element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 div 요소에 role=”form”을 사용했지만, <form> 요소를 사용하지 않았습니다. <form> 요소를 사용해야 전송 기능이 제대로 작동하며, 보조 기술이 이 영역을 올바르게 인식합니다.

<div role="form">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <button type="submit">Submit</button>
</div>

올바른 예시 이 예시는 <form> 요소에 role=”form”을 명시적으로 지정하고, 폼에 대한 레이블을 aria-labelledby 속성을 통해 제공하여 폼의 목적을 명확히 했습니다.

<form role="form" aria-labelledby="loginFormTitle">
  <h2 id="loginFormTitle">Login Form</h2>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <button type="submit">Submit</button>
</form>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <form>을 사용하여 폼을 정의한 것입니다. <form> 요소는 기본적으로 form 역할을 가지므로, 추가적인 ARIA 속성이 필요하지 않습니다. 보조 기술이 이 요소를 자동으로 인식하고, 폼의 목적을 명확히 전달할 수 있습니다.

<form>
  <h2>Login Form</h2>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <button type="submit">Submit</button>
</form>

5. main 역할

main 역할은 웹 페이지에서 주요 콘텐츠 영역을 나타냅니다. 이 역할은 페이지의 핵심 콘텐츠를 포함하며, 보조 기술이 이 영역을 페이지의 주요 부분으로 인식하도록 도와줍니다. main 역할은 페이지 내에서 유일해야 하며, 보조 기술이 사용자가 이 영역으로 빠르게 접근할 수 있도록 지원합니다.
W3C ARIA main
MDN ARIA main
UXKM : main element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 페이지에 두 개의 main 역할을 사용하고 있습니다. main 역할은 페이지 내에서 하나만 사용되어야 하며, 페이지의 주요 콘텐츠를 나타내는 데 사용됩니다.

<div role="main">
  <h1>Welcome to Our Website</h1>
  <p>This is the main content.</p>
</div>

<div role="main">
  <h1>Another Section</h1>
  <p>This is additional content.</p>
</div>

올바른 예시 이 예시는 페이지에 단 하나의 main 역할을 사용하여 페이지의 주요 콘텐츠를 명확히 정의하고 있습니다. 이 콘텐츠는 페이지의 핵심 정보를 포함하고 있습니다.

<div role="main">
  <h1>Welcome to Our Website</h1>
  <p>This is the main content of the page, where the most important information is displayed.</p>
</div>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <main>을 사용하여 페이지의 주요 콘텐츠를 정의한 것입니다. <main> 요소는 기본적으로 main 역할을 가지므로, 추가적인 ARIA 속성이 필요하지 않으며, 보조 기술이 이 요소를 자동으로 인식하게 합니다.

<main>
  <h1>Welcome to Our Website</h1>
  <p>This is the main content of the page, where the most important information is displayed.</p>
</main>

6. navigation 역할

navigation 역할은 웹 페이지에서 탐색 링크 모음을 나타냅니다. 이 역할은 사용자가 사이트의 다른 페이지나 섹션으로 이동할 수 있도록 돕는 주요 탐색 메뉴에 적용됩니다. 보조 기술은 navigation 역할을 통해 이 영역이 탐색 목적으로 사용된다는 것을 인식하여, 사용자가 사이트의 구조를 쉽게 파악하고 탐색할 수 있도록 도와줍니다.
W3C ARIA navigation
MDN ARIA navigation
UXKM : nav element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 navigation 역할을 페이지의 일반적인 콘텐츠에 사용하고 있습니다. navigation 역할은 탐색 링크를 그룹화하는 데만 사용되어야 하며, 일반 콘텐츠에 사용해서는 안 됩니다.

<div role="navigation">
  <h1>About Us</h1>
  <p>Welcome to the About Us page...</p>
</div>

올바른 예시 이 예시는 role=”navigation”을 사용하여 주요 탐색 메뉴를 정의하고, aria-label 속성을 통해 보조 기술 사용자에게 탐색 메뉴의 목적을 명확히 전달하고 있습니다.

<div role="navigation" aria-label="Main navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <nav>를 사용하여 탐색 메뉴를 정의한 것입니다. <nav> 요소는 기본적으로 navigation 역할을 가지므로, 추가적인 ARIA 속성이 필요 없지만, aria-labelledby 속성을 사용해 탐색 메뉴의 제목을 명확히 하고 있습니다.

<nav aria-labelledby="mainnav">
  <h2 id="mainnav">Main navigation</h2>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

7. region 역할

region 역할은 웹 페이지의 특정 콘텐츠 영역을 나타내며, 이 영역이 사용자에게 중요한 정보나 기능을 제공한다는 것을 보조 기술에 알립니다. region 역할은 보통 aria-labelledby 속성과 함께 사용되어, 이 영역에 대한 명확한 레이블을 제공하고, 사용자가 쉽게 이 영역을 탐색하고 이해할 수 있도록 합니다.
W3C ARIA region
MDN ARIA region
UXKM : main element
UXKM : section element
UXKM : aside element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 두 개의 region 역할이 사용되었으나, 각각의 region이 어떤 내용을 담고 있는지 명확히 알 수 있는 레이블이 제공되지 않았습니다. 또한, 필요 이상으로 많은 region 역할이 사용되었습니다.

<div role="region">
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
</div>

<div role="region">
  <h2>Additional Content</h2>
  <p>This is some additional content.</p>
</div>

올바른 예시 이 예시는 role=”region”을 사용하여 중요한 콘텐츠 영역을 정의하고, aria-labelledby 속성을 통해 해당 영역의 제목을 제공하여 보조 기술이 이 영역을 명확히 설명할 수 있도록 했습니다.

<div role="region" aria-labelledby="main-content">
  <h2 id="main-content">Main Content</h2>
  <p>This is the main content of the page, where the most important information is displayed.</p>
</div>

(권장) 시멘틱 사용 예시 이 예시는 시멘틱 요소인 <section>을 사용하여 관련 기사 목록을 정의한 것입니다. <section> 요소는 이미 특정 콘텐츠 영역을 나타내는 의미를 가지며, aria-labelledby 속성을 추가하여 이 영역의 제목을 명확히 하고 있습니다. 이 방법은 불필요한 region 역할의 사용을 피하면서도 접근성을 보장합니다.

<section aria-labelledby="related-articles">
  <h2 id="related-articles">Related Articles</h2>
  <ul>
    <li><a href="#article1">Understanding ARIA Roles</a></li>
    <li><a href="#article2">Accessible Web Design Practices</a></li>
  </ul>
</section>

8. search 역할

search 역할은 웹 페이지에서 검색 기능을 제공하는 영역을 나타냅니다. 이 역할은 사용자가 사이트나 애플리케이션 내에서 특정 정보를 검색할 수 있는 기능을 명확하게 지정합니다. 보조 기술은 search 역할을 통해 이 영역이 검색 목적을 가진다는 것을 인식하고, 사용자에게 이를 알립니다.
W3C ARIA search
MDN ARIA search
UXKM : input=”search” element

기본 설명

사용 시 주의사항

상속된 상태 및 속성

잘못된 예시 이 예시는 search 역할을 검색 기능이 아닌 일반 콘텐츠 영역에 사용하고 있습니다. search 역할은 검색 인터페이스에만 사용해야 하며, 일반적인 콘텐츠에 적용해서는 안 됩니다.

<div role="search">
  <h2>Our Latest Articles</h2>
  <ul>
    <li><a href="#article1">Article 1</a></li>
    <li><a href="#article2">Article 2</a></li>
  </ul>
</div>

올바른 예시 이 예시는 role=”search”을 사용하여 검색 인터페이스를 정의하고 있습니다. 검색 입력 필드와 검색 버튼이 그룹화되어 있으며, 사용자가 검색 기능임을 명확히 인식할 수 있습니다.

<div role="search">
  <label for="site-search">Search the site:</label>
  <input type="search" id="site-search" name="q" aria-label="Search through site content">
  <button type="submit">Search</button>
</div>

시멘틱 사용 예시 이 예시는 시멘틱 요소인 <form>에 role=”search”를 명시적으로 지정하여 검색 인터페이스를 정의한 것입니다. 추가적으로 aria-label 속성을 사용해 검색 영역의 목적을 명확히 하고 있습니다.

<form role="search" aria-label="Site-wide search">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search">
  <button type="submit">Search</button>
</form>

(권장) HTML5 시멘틱 마크업 사용 예시 이 예시는 시멘틱 요소인 <form>과 <input type=”search”>를 사용하여 검색 기능을 정의한 것입니다. HTML5 시멘틱 마크업은 기본적으로 검색 역할을 수행하므로, 추가적인 ARIA 속성이 필요하지 않습니다.

<form>
  <label for="search">Search:</label>
  <input type="search" id="search" name="search">
  <button type="submit">Search</button>
</form>

참조