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로 정의할 수 있습니다.
Document Structure Roles는 웹 페이지나 애플리케이션의 콘텐츠를 논리적이고 의미 있는 방식으로 구성하는 데 사용됩니다. 이 역할은 문서의 주요 부분을 정의하고, 보조 기술이 이 구조를 이해할 수 있도록 도와줍니다. Document Structure 역할은 페이지를 효율적으로 탐색할 수 있도록 콘텐츠를 구조화하는 데 필수적입니다.
W3C ARIA Document Structure Roles
application 역할은 웹 페이지의 특정 영역이 일반적인 웹 콘텐츠와는 다른, 고도의 상호작용이 필요한 애플리케이션처럼 동작함을 보조 기술에 알리는 데 사용됩니다. 이 역할은 웹 페이지에서 데스크탑 애플리케이션과 유사한 상호작용을 제공하는 UI 요소에 사용되며, 사용자에게 더 복잡한 기능을 제공하기 위해 사용됩니다.
W3C ARIA application
MDN ARIA application
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 이 예시는 application 역할을 일반적인 웹 콘텐츠에 사용하고 있습니다. application 역할은 복잡한 웹 애플리케이션 기능을 제공하는 영역에만 사용되어야 합니다. 단순한 정보 제공에는 적합하지 않습니다.
<div role="application">
<p>Welcome to our website. Here is some basic information.</p>
</div>
올바른 예시 이 예시는 복잡한 상호작용이 필요한 스프레드시트 애플리케이션을 나타내며, application 역할을 사용하여 사용자가 이 인터페이스를 데스크탑 애플리케이션처럼 사용할 수 있도록 설정했습니다.
<div role="application" aria-labelledby="spreadsheetTitle">
<h2 id="spreadsheetTitle">Spreadsheet Application</h2>
<!-- Complex spreadsheet interface goes here -->
</div>
application 역할이 적용된 복잡한 UI 예시 이 예시는 사용자 지정 스프레드시트 UI를 application 역할과 함께 구현한 것입니다. 사용자는 키보드를 사용하여 스프레드시트 셀 간을 이동할 수 있으며, 보조 기술은 이 영역을 일반적인 웹 페이지의 일부로 인식하지 않고, 애플리케이션처럼 처리합니다.
<div role="application" aria-labelledby="app-title">
<h1 id="app-title">Custom Spreadsheet</h1>
<div role="grid" aria-label="Spreadsheet Grid">
<div role="row">
<div role="gridcell" tabindex="0">A1</div>
<div role="gridcell" tabindex="-1">B1</div>
<div role="gridcell" tabindex="-1">C1</div>
</div>
<div role="row">
<div role="gridcell" tabindex="-1">A2</div>
<div role="gridcell" tabindex="-1">B2</div>
<div role="gridcell" tabindex="-1">C2</div>
</div>
</div>
</div>
고급 상호작용이 필요한 애플리케이션 예시 이 예시는 드로잉 애플리케이션을 구현한 것으로, 사용자에게 그리기 도구를 선택하고, 캔버스에 그림을 그릴 수 있는 기능을 제공합니다. application 역할은 보조 기술이 이 영역을 복잡한 상호작용을 필요로 하는 애플리케이션으로 인식하게 합니다.
<div role="application" aria-labelledby="app-label">
<h1 id="app-label">Drawing Application</h1>
<canvas id="drawing-canvas" aria-label="Drawing Canvas"></canvas>
<div>
<button aria-label="Select Pencil Tool">Pencil</button>
<button aria-label="Select Eraser Tool">Eraser</button>
</div>
</div>
복잡한 그래픽 에디터 예시 이 예시는 사용자가 다양한 도구를 사용하여 그래픽 작업을 수행할 수 있는 그래픽 에디터를 나타냅니다. application 역할은 이 영역을 일반적인 웹 콘텐츠와 구분하여, 보조 기술이 이를 애플리케이션으로 인식하게 합니다.
<div role="application" aria-labelledby="editorTitle">
<h2 id="editorTitle">Graphic Editor</h2>
<div class="toolbar">
<!-- Toolbar with various tools -->
</div>
<div class="canvas">
<!-- Canvas for drawing -->
</div>
</div>
article 역할은 웹 페이지에서 독립적으로 구분될 수 있는 콘텐츠 블록을 나타냅니다. 이 콘텐츠 블록은 독립적으로 배포하거나 재사용할 수 있으며, 문서의 다른 부분과 구별되는 자체적인 의미를 가지고 있습니다. 예를 들어, 뉴스 기사, 블로그 포스트, 포럼의 글 등이 이에 해당됩니다.
W3C ARIA article
MDN ARIA article
UXKM : article element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 이 예시는 회사 소개를 나타내는 콘텐츠에 article 역할을 사용하고 있지만, 이 콘텐츠는 독립적으로 이해되기보다는 문서 전체와 연관된 설명입니다. 이 경우, article 역할보다는 다른 시멘틱 역할이나 일반적인 블록 요소를 사용하는 것이 적합합니다.
<div role="article">
<h2>Our Company</h2>
<p>We provide the best services to our customers.</p>
</div>
올바른 예시 이 예시는 독립적인 뉴스 기사 또는 블로그 게시물로 읽힐 수 있는 콘텐츠에 article 역할을 적절히 사용하고 있습니다. 이 콘텐츠는 자체적으로 의미가 있으며, 다른 문맥에서도 이해될 수 있습니다. aria-labelledby 속성을 사용해 article의 제목을 보조 기술이 인식할 수 있도록 설정했습니다.
<div role="article" aria-labelledby="climateChangeTitle">
<h2 id="climateChangeTitle">The Impact of Climate Change</h2>
<p>Climate change has significant effects on the environment...</p>
</div>
(권장) 시멘틱 사용 예시 이 예시는 HTML5 시멘틱 요소인 <article>을 사용하여 블로그 게시물을 정의한 것입니다. <article> 요소는 기본적으로 article 역할을 가지며, aria-labelledby와 aria-describedby 속성을 통해 제목과 설명을 명확히 지정하여 보조 기술이 이 콘텐츠를 올바르게 처리할 수 있도록 돕습니다.
<article aria-labelledby="writingSkillsTitle" aria-describedby="writingSkillsDesc">
<h2 id="writingSkillsTitle">How to Improve Your Writing Skills</h2>
<p id="writingSkillsDesc">Writing is a critical skill that can be improved with practice...</p>
</article>
cell 역할은 ARIA 문서 구조 역할 중에서 표(table)의 개별 셀을 나타내는 중요한 역할입니다. HTML의 <td>(표의 데이터 셀)와 <th>(표의 헤더 셀) 요소는 기본적으로 cell 역할을 수행하며, 이 역할은 표의 구조를 정의하고 각 셀이 데이터를 어떻게 표현하는지를 보조 기술에 설명하는 역할을 합니다.
W3C ARIA cell
MDN ARIA cell
UXKM : td element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 데이터 셀 및 헤더 셀 이 예시는 th와 td 요소를 사용하여 각각의 셀을 정의하고 있습니다. th 요소는 열 헤더로 설정되며, scope=”col” 속성을 통해 명확히 정의됩니다. 이 구조는 ARIA 문서 구조 역할에서 기본적인 cell 역할을 수행합니다.
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
</table>
복잡한 표 구조에서의 cell 역할 이 예시는 thead와 tbody 요소를 사용하여 복잡한 표 구조를 시멘틱하게 나누고 있습니다. th 요소는 행과 열 헤더로 사용되며, 각 데이터 셀(td)은 headers 속성을 사용해 관련 헤더를 참조합니다.
<table>
<thead>
<tr>
<th scope="col">Department</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Sales</th>
<td headers="Q1">5000</td>
<td headers="Q2">7000</td>
<td headers="Q3">8000</td>
<td headers="Q4">9000</td>
</tr>
<tr>
<th scope="row">Marketing</th>
<td headers="Q1">6000</td>
<td headers="Q2">8000</td>
<td headers="Q3">7500</td>
<td headers="Q4">8500</td>
</tr>
</tbody>
</table>
ARIA 속성을 활용한 예시 이 예시는 복잡한 표에서 각 셀의 정확한 위치를 나타내기 위해 aria-colindex와 aria-rowindex 속성을 사용하고 있습니다. 이러한 속성들은 보조 기술이 셀의 위치를 올바르게 파악할 수 있도록 도와줍니다.
<table>
<thead>
<tr>
<th scope="col" aria-colindex="1">Name</th>
<th scope="col" aria-colindex="2">Age</th>
<th scope="col" aria-colindex="3">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-rowindex="2" aria-colindex="1">John Doe</td>
<td aria-rowindex="2" aria-colindex="2">30</td>
<td aria-rowindex="2" aria-colindex="3">Sales</td>
</tr>
<tr>
<td aria-rowindex="3" aria-colindex="1">Jane Smith</td>
<td aria-rowindex="3" aria-colindex="2">28</td>
<td aria-rowindex="3" aria-colindex="3">Marketing</td>
</tr>
</tbody>
</table>
columnheader 역할은 HTML 테이블에서 열의 제목을 나타내는 헤더 셀을 정의합니다. 이 역할은 주로 <th> 요소와 함께 사용되며, 특정 열의 데이터를 설명하거나 요약하는 기능을 합니다. columnheader 역할을 통해 보조 기술은 해당 열이 무엇을 나타내는지 사용자에게 명확하게 전달할 수 있습니다.
W3C ARIA columnheader
MDN ARIA columnheader
UXKM : th element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 열 헤더 사용 예시 이 예시는 열 제목을 나타내기 위해 <th> 요소를 사용하고 있으며, scope=”col” 속성을 통해 열 전체에 적용되는 헤더임을 명확히 하고 있습니다. 이 구조는 ARIA에서 columnheader 역할을 암시적으로 수행합니다.
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Sales</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Marketing</td>
</tr>
</tbody>
</table>
정렬 가능한 열 헤더 예시 이 예시는 aria-sort=”ascending” 속성을 사용하여 현재 열이 오름차순으로 정렬되어 있음을 나타냅니다. 이는 보조 기술이 현재 열의 정렬 상태를 사용자에게 전달하는 데 유용합니다.
<table>
<thead>
<tr>
<th scope="col" aria-sort="ascending">Name</th>
<th scope="col">Age</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Sales</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Marketing</td>
</tr>
</tbody>
</table>
병합된 열 헤더 예시 이 예시는 aria-colspan 속성을 사용해 첫 번째 행의 “Employee Details” 헤더 셀이 두 개의 열을 병합하고 있음을 명확히 나타냅니다. 보조 기술은 이 정보를 바탕으로 셀이 포함하는 열의 범위를 이해할 수 있습니다.
<table>
<thead>
<tr>
<th scope="col" colspan="2" aria-colspan="2">Employee Details</th>
<th scope="col">Department</th>
</tr>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Sales</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Marketing</td>
</tr>
</tbody>
</table>
definition 역할은 웹 콘텐츠에서 용어의 정의를 제공하는 콘텐츠를 나타냅니다. 이 역할은 일반적으로 텍스트 내에서 중요한 용어의 의미를 명확하게 설명할 때 사용됩니다. definition 역할은 보조 기술이 특정 용어의 정의를 사용자에게 올바르게 전달할 수 있도록 도와줍니다.
W3C ARIA definition
MDN ARIA definition
MDN dfn element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
기본 용어 정의 사용 예시 이 예시는 <dfn> 요소를 사용하여 “HyperText” 용어의 정의를 제공하고 있습니다. 보조 기술은 이 요소를 통해 “HyperText”가 정의되고 있음을 사용자에게 전달합니다.
<p>HTML은 HyperText Markup Language의 약자입니다. <dfn>HyperText</dfn>는 웹 페이지 간의 연결을 의미합니다.</p>
용어와 정의의 시멘틱 구분 예시 이 예시는 <dfn> 요소를 사용하여 “API” 용어를 정의하고 있으며, 링크를 통해 동일한 정의로 참조할 수 있도록 설정했습니다. 이는 문서 내에서 용어의 의미를 명확하게 구분하는 데 도움이 됩니다.
<p>용어 <dfn id="dfn-api">API</dfn>는 응용 프로그램 인터페이스(Application Programming Interface)의 약자로, 소프트웨어 간의 상호작용을 정의합니다.</p>
<p>예를 들어, <a href="#dfn-api">API</a>는...</p>
학술 자료에서의 정의 사용 예시 이 예시는 학술 문서에서 사용되는 중요한 용어를 정의하는 예시입니다. <dfn> 요소는 용어 “엔트로피”의 정의를 제공하며, 독자가 문서의 내용을 더 잘 이해할 수 있도록 돕습니다.
<p>과학에서, <dfn>엔트로피</dfn>는 시스템의 무질서 정도를 나타내는 물리적 개념입니다.</p>
directory 역할은 트리 구조로 조직된 목차나 파일 목록과 같은 계층적인 항목의 집합을 나타냅니다. 이 역할은 파일 시스템, 카탈로그, 탐색 메뉴와 같은 콘텐츠에서 사용될 수 있습니다. directory 역할은 보조 기술이 이 목록을 탐색할 때, 항목 간의 계층 구조를 이해할 수 있도록 돕습니다.
W3C ARIA directory
MDN ARIA directory
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 이 예시는 <div> 요소를 사용하여 디렉토리 구조를 표현했지만, role=”directory”와 같은 ARIA 속성 없이 사용되었습니다. 이로 인해 보조 기술이 이 구조를 올바르게 해석하지 못할 수 있습니다.
<div>
<div>Documents</div>
<div>Pictures
<div>
<div>Vacation</div>
<div>Family</div>
</div>
</div>
<div>Music</div>
</div>
올바른 예시 - div 요소 마크업을 사용한 디렉토리 구조 이 예시는 <div> 요소에 role=”directory”를 사용하여 디렉토리 구조를 명시적으로 나타냅니다. aria-expanded와 aria-level 속성을 사용해 항목의 계층 구조와 확장 상태를 지정하고 있습니다.
<div role="directory">
<div role="treeitem">Documents</div>
<div role="treeitem" aria-expanded="false">Pictures
<div role="group">
<div role="treeitem" aria-level="2">Vacation</div>
<div role="treeitem" aria-level="2">Family</div>
</div>
</div>
<div role="treeitem">Music</div>
</div>
시멘틱 마크업을 사용한 기본 디렉토리 구조 예시 이 예시는 기본적인 디렉토리 구조를 시멘틱한 <ul> 및 <li> 요소를 사용하여 나타내고 있습니다. 이 구조는 기본적으로 보조 기술이 올바르게 인식할 수 있습니다.
<ul>
<li>Documents</li>
<li>Pictures
<ul>
<li>Vacation</li>
<li>Family</li>
</ul>
</li>
<li>Music</li>
</ul>
document 역할은 웹 페이지에서 특정 섹션이 독립된 문서나 주요 콘텐츠 블록을 나타내도록 지정하는 데 사용됩니다. 이 역할은 웹 애플리케이션의 일부가 아닌 문서형 콘텐츠(예: 텍스트, 이미지, 비디오 등)를 설명하는 데 유용합니다. document 역할은 주로 전체 페이지가 아닌 특정 섹션이 문서로서 해석되도록 할 때 사용됩니다.
W3C ARIA document
MDN ARIA document
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 웹 애플리케이션 전체에 사용 이 예시는 role=”document”를 전체 웹 애플리케이션에 적용했으나, 이 역할은 특정 섹션을 독립된 문서로 나타낼 때 사용해야 하므로 부적절합니다.
<div role="document">
<header>
<h1>My Web Application</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<main>
<p>Welcome to my web application!</p>
</main>
</div>
올바른 예시 - 문서 섹션에 사용 이 예시는 <div> 요소에 role=”directory”를 사용하여 디렉토리 구조를 명시적으로 나타냅니다. aria-expanded와 aria-level 속성을 사용해 항목의 계층 구조와 확장 상태를 지정하고 있습니다.
<section role="document" aria-labelledby="doc-title">
<h1 id="doc-title">User Guide</h1>
<p>This guide provides detailed instructions on how to use the web application...</p>
</section>
(권장) 시멘틱 마크업에서의 기본 사용 이 예시는 시멘틱 마크업을 사용하여 <article> 요소로 독립된 문서 콘텐츠를 나타냅니다. 보조 기술은 이 콘텐츠를 문서로 인식하고 탐색할 수 있습니다.
<article>
<h1>Understanding Climate Change</h1>
<p>Climate change is a long-term shift in weather patterns...</p>
</article>
feed 역할은 소셜 미디어 타임라인, 뉴스 피드, 블로그 목록과 같이 지속적으로 업데이트되는 항목의 집합을 나타냅니다. 이 역할은 보조 기술이 이러한 콘텐츠의 특성을 이해하고, 사용자에게 적절히 전달할 수 있도록 돕습니다. feed 역할은 주로 소셜 네트워크, 뉴스 애그리게이터, 블로그 플랫폼에서 사용됩니다.
W3C ARIA feed
MDN ARIA feed
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 피드 역할의 부적절한 사용 이 예시는 role=”feed”를 단순한 콘텐츠 블록에 적용했으나, 이 블록은 지속적으로 갱신되는 동적 콘텐츠가 아니므로 부적절합니다. feed 역할은 주기적으로 업데이트되는 콘텐츠에만 사용해야 합니다.
<div role="feed">
<div>
<h2>Welcome to Our Website</h2>
<p>This is the homepage of our website...</p>
</div>
<div>
<h2>About Us</h2>
<p>Learn more about our company and team...</p>
</div>
</div>
올바른 예시 - 피드 역할의 적절한 사용 이 예시는 role=”feed”를 적절하게 사용하여 동적으로 갱신되는 콘텐츠 목록을 나타내고 있습니다. aria-live=”polite”와 aria-relevant=”additions” 속성을 사용해 피드가 업데이트될 때 사용자에게 알리도록 설정했습니다.
<div role="feed" aria-live="polite" aria-relevant="additions">
<div role="article">
<h2>Latest Blog Post: The Future of AI</h2>
<p>Artificial intelligence continues to advance...</p>
</div>
<div role="article">
<h2>Health Tips: Staying Active in Winter</h2>
<p>Winter can be a tough time to stay active...</p>
</div>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 예시 이 예시는 시멘틱 마크업을 사용하여 <article> 요소로 독립된 문서 콘텐츠를 나타냅니다. 보조 기술은 이 콘텐츠를 문서로 인식하고 탐색할 수 있습니다.
<article>
<h1>Understanding Climate Change</h1>
<p>Climate change is a long-term shift in weather patterns...</p>
</article>
div 요소 마크업을 사용한 피드 예시 <div> 요소에 role=”feed”를 지정하여 피드 역할을 명시적으로 나타냅니다. 각 피드 항목은 role=”article”을 사용해 독립적인 콘텐츠로 처리됩니다. aria-busy=”true”로 설정하여 피드가 업데이트 중임을 알립니다.
<div role="feed" aria-busy="true">
<div role="article">
<h2>Breaking News: Market Hits All-Time High</h2>
<p>The stock market reached an all-time high today...</p>
</div>
<div role="article">
<h2>New Tech Innovations in 2024</h2>
<p>The tech industry is abuzz with new innovations...</p>
</div>
</div>
시멘틱 마크업을 사용한 피드 예시 이 예시는 시멘틱 마크업을 사용하여 <section> 요소에 role=”feed”를 지정했습니다. 각 피드 항목은 <article> 요소로 구성되어 있어 보조 기술이 이를 독립적인 콘텐츠로 처리할 수 있도록 했습니다.
<section role="feed" aria-busy="false">
<article>
<h2>Breaking News: Market Hits All-Time High</h2>
<p>The stock market reached an all-time high today...</p>
</article>
<article>
<h2>New Tech Innovations in 2024</h2>
<p>The tech industry is abuzz with new innovations...</p>
</article>
</section>
figure 역할은 이미지, 차트, 삽화, 코드 블록 등 독립적으로 설명할 수 있는 콘텐츠의 묶음을 나타냅니다. 이 역할은 콘텐츠가 본문 내의 특정 부분과 관련이 있지만, 독립적으로 이해될 수 있는 것을 나타낼 때 사용됩니다. 일반적으로 figcaption 요소를 사용하여 설명(캡션)을 포함하며, 이 설명은 figure 요소에 속한 콘텐츠를 보충하는 데 사용됩니다.
W3C ARIA figure
MDN ARIA figure
UXKM : figure element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 독립적인 콘텐츠로 취급되지 않는 경우 이 예시는 <div> 요소를 사용하여 이미지를 설명하지만, 이 콘텐츠는 본문과 독립적으로 취급되지 않으며, 보조 기술이 이를 독립적인 콘텐츠로 인식하지 못할 수 있습니다. figure 요소를 사용하는 것이 더 적절합니다.
<div>
<img src="climate-change-graph.png" alt="Graph showing climate change over the last century">
<p>This graph illustrates climate change over the past century.</p>
</div>
올바른 예시 - 피드 역할의 적절한 사용 이 예시는 role=”feed”를 적절하게 사용하여 동적으로 갱신되는 콘텐츠 목록을 나타내고 있습니다. aria-live=”polite”와 aria-relevant=”additions” 속성을 사용해 피드가 업데이트될 때 사용자에게 알리도록 설정했습니다.
<div role="feed" aria-live="polite" aria-relevant="additions">
<div role="article">
<h2>Latest Blog Post: The Future of AI</h2>
<p>Artificial intelligence continues to advance...</p>
</div>
<div role="article">
<h2>Health Tips: Staying Active in Winter</h2>
<p>Winter can be a tough time to stay active...</p>
</div>
</div>
(권장) 올바른 예시 - 시멘틱 마크업에서의 기본 사용 이 예시는 <figure> 요소를 사용하여 콘텐츠를 그룹화하고, figcaption 요소를 사용하여 설명을 제공합니다. 이 구조는 시멘틱하게 올바르며, 보조 기술이 이 콘텐츠를 올바르게 해석할 수 있도록 합니다.
<figure>
<img src="climate-change-graph.png" alt="Graph showing climate change over the last century">
<figcaption>Figure 1: Climate change trends over the last 100 years.</figcaption>
</figure>
div 요소 마크업을 사용한 figure 역할 예시 이 예시는 <div> 요소에 role=”figure”를 사용하여 figure 역할을 명시적으로 지정합니다. div 요소를 사용하여 설명 텍스트를 제공하고 있지만, figcaption 요소를 사용하는 것이 더 적절합니다.
<div role="figure">
<img src="climate-change-graph.png" alt="Graph showing climate change over the last century">
<div>Figure 1: Climate change trends over the last 100 years.</div>
</div>
시멘틱 마크업을 사용한 피드 예시 이 예시는 시멘틱 마크업을 사용하여 <section> 요소에 role=”feed”를 지정했습니다. 각 피드 항목은 <article> 요소로 구성되어 있어 보조 기술이 이를 독립적인 콘텐츠로 처리할 수 있도록 했습니다.
<section role="feed" aria-busy="false">
<article>
<h2>Breaking News: Market Hits All-Time High</h2>
<p>The stock market reached an all-time high today...</p>
</article>
<article>
<h2>New Tech Innovations in 2024</h2>
<p>The tech industry is abuzz with new innovations...</p>
</article>
</section>
generic 역할은 특정 시멘틱한 의미를 가지지 않는 일반적인 컨테이너를 나타냅니다. 이 역할은 기본적으로 아무 의미도 부여되지 않는 요소를 설명하며, HTML의 기본적인 <div>와 <span> 요소와 유사한 역할을 합니다. generic 역할은 보조 기술이 해당 요소에 특별한 시멘틱이 부여되지 않았음을 이해하도록 돕습니다.
W3C ARIA generic
MDN ARIA generic
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - generic 역할을 사용하지 않아야 하는 경우 이 예시는 header 요소에 role=”generic”을 지정하여 시멘틱한 의미를 제거했으나, header 요소는 시멘틱하게 중요한 역할을 하므로 generic 역할을 사용하지 말아야 합니다.
<header role="generic">
<h1>Website Header</h1>
</header>
올바른 예시 - 시멘틱한 요소를 유지 이 예시는 header 요소에 시멘틱한 역할을 유지하여 웹 페이지의 구조와 의미를 명확히 합니다. 이 경우, generic 역할을 사용하지 않고 기본 시멘틱 역할을 유지하는 것이 적절합니다.
<header>
<h1>Website Header</h1>
</header>
(권장) 마크업에서의 기본 사용 이 예시는 <div> 요소를 사용하여 단순히 레이아웃을 구성하고 있습니다. 이 경우, div는 암시적으로 generic 역할을 수행합니다.
<div>
<p>This is a paragraph inside a div.</p>
</div>
group 역할은 여러 요소를 논리적으로 묶어 하나의 그룹으로 취급하는 데 사용됩니다. 이 역할은 보조 기술이 이러한 요소들이 하나의 논리적 단위로 묶여 있음을 인식하게 하여, 사용자에게 이를 일관되게 전달할 수 있도록 합니다. group 역할은 주로 폼 요소, 메뉴 항목, 또는 기타 연관된 컨텐츠를 그룹화할 때 사용됩니다.
W3C ARIA group
MDN ARIA group
UXKM : fieldset element
UXKM : legend element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 불필요한 그룹화 이 예시는 논리적인 그룹화가 필요하지 않은 콘텐츠에 role=”group”을 사용했습니다. 불필요한 그룹화는 보조 기술의 해석을 혼란스럽게 할 수 있으므로 피해야 합니다.
<div role="group">
<h1>Welcome to Our Website</h1>
<p>Explore our features and content to learn more.</p>
</div>
올바른 예시 - 의미 있는 그룹화 이 예시는 네비게이션 메뉴를 <div> 요소에 role=”group”을 사용해 논리적으로 그룹화한 예시입니다. aria-labelledby 속성을 통해 그룹의 제목을 지정하여, 보조 기술이 이 정보를 사용자에게 전달할 수 있게 했습니다.
<header>
<h1>Website Header</h1>
</header>
(권장) 시멘틱 마크업을 사용한 기본 그룹화 사용 예시 이 예시는 <fieldset>과 <legend> 요소를 사용하여 라디오 버튼을 그룹화하고 있습니다. 보조 기술은 이 그룹을 논리적 단위로 인식하여 사용자에게 전달합니다.
<fieldset>
<legend>Select your favorite fruit:</legend>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana"> Banana</label>
<label><input type="radio" name="fruit" value="cherry"> Cherry</label>
</fieldset>
div 요소 마크업을 사용한 그룹화 예시 이 예시는 <div> 요소에 role=”group”을 지정하고, aria-labelledby 속성을 사용해 그룹의 제목을 연결한 예시입니다. <fieldset>을 사용할 수 없는 상황에서 유용합니다.
<div role="group" aria-labelledby="fruit-group-label">
<span id="fruit-group-label">Select your favorite fruit:</span>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana"> Banana</label>
<label><input type="radio" name="fruit" value="cherry"> Cherry</label>
</div>
heading 역할은 웹 페이지나 애플리케이션의 구조를 정의하는 데 사용되는 제목을 나타냅니다. 이 역할은 콘텐츠의 계층적 구조를 명확히 하여, 보조 기술이 문서의 내용과 구조를 쉽게 파악할 수 있도록 돕습니다. HTML에서 <h1>부터 <h6>까지의 제목 요소가 기본적으로 이 역할을 수행합니다.
W3C ARIA heading
MDN ARIA heading
UXKM : heading element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 일관되지 않은 계층 구조 이 예시는 제목 요소의 계층 구조가 일관되지 않아, 보조 기술이 문서의 구조를 올바르게 해석하는 데 어려움을 겪을 수 있습니다. 제목의 순서를 일관되게 유지해야 합니다.
<h1>Main Title</h1>
<h3>Subheading 1</h3>
<p>This is a paragraph under Subheading 1.</p>
<h2>Subheading 2</h2>
<p>This is a paragraph under Subheading 2.</p>
(권장) 올바른 예시 - 시멘틱 마크업을 사용 이 예시는 HTML 제목 요소(<h1>, <h2>)를 사용하여 문서의 계층 구조를 정의하고 있습니다. 이 구조는 보조 기술이 문서의 내용을 쉽게 탐색하고 이해하는 데 도움을 줍니다.
<h1>Main Title</h1>
<h2>Subheading 1</h2>
<p>This is a paragraph under Subheading 1.</p>
<h2>Subheading 2</h2>
<p>This is a paragraph under Subheading 2.</p>
명시적으로 heading 역할 지정 예시 이 예시는 <div> 요소에 role=”heading”과 aria-level 속성을 사용하여 제목의 계층 구조를 정의하고 있습니다. 이는 시멘틱한 제목 요소를 사용할 수 없는 상황에서 유용합니다.
<div role="heading" aria-level="1">Main Title</div>
<div role="heading" aria-level="2">Subheading 1</div>
<p>This is a paragraph under Subheading 1.</p>
<div role="heading" aria-level="2">Subheading 2</div>
<p>This is a paragraph under Subheading 2.</p>
img 역할은 웹 페이지에서 이미지 콘텐츠를 나타내는 데 사용됩니다. 이 역할은 시각적 정보를 전달하는 이미지를 설명하며, 보조 기술이 이러한 이미지를 사용자에게 올바르게 전달할 수 있도록 돕습니다. HTML의 <img> 요소는 자동으로 img 역할을 수행합니다. 이 역할은 특히 접근성 측면에서 중요한 역할을 하며, 적절한 대체 텍스트(alt 텍스트)를 제공하는 것이 핵심입니다.
W3C ARIA img
MDN ARIA img
UXKM : img element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 대체 텍스트가 없는 이미지 이 예시는 중요한 다이어그램 이미지를 대체 텍스트 없이 사용하고 있으며, 이는 접근성에 부정적인 영향을 미칩니다. 모든 중요한 이미지에는 적절한 alt 속성을 제공해야 합니다.
<img src="important-diagram.png">
(권장) 올바른 예시 - 대체 텍스트가 포함된 이미지 이 예시는 중요한 다이어그램 이미지를 설명하는 대체 텍스트와 함께 사용하여, 보조 기술이 이미지를 사용자에게 올바르게 전달할 수 있도록 했습니다.
<img src="important-diagram.png" alt="Diagram showing the process of photosynthesis">
(권장) 시멘틱 마크업에서의 기본 사용 이 예시는 <img> 요소를 사용하여 회사 로고를 나타내고 있으며, alt 속성으로 대체 텍스트를 제공하고 있습니다. 보조 기술은 이 텍스트를 사용자에게 전달하여 이미지의 의미를 이해할 수 있도록 합니다.
<img src="logo.png" alt="Company Logo">
명시적으로 img 역할 지정 예시 이 예시는 CSS 배경 이미지를 사용한 <div> 요소에 role=”img”와 aria-label을 사용해 이미지의 의미를 지정하고 있습니다. 이는 <img> 요소를 사용할 수 없는 상황에서 유용합니다.
<div role="img" aria-label="Company Logo" style="background-image: url('logo.png'); width: 100px; height: 100px;"></div>
장식용 이미지 처리 예시 이 예시는 장식용 이미지를 나타내며, alt=”“와 aria-hidden=”true”를 사용하여 보조 기술이 이 이미지를 무시하도록 설정했습니다. 이로 인해 사용자는 불필요한 시각적 정보에 방해받지 않습니다.
<img src="decorative.png" alt="" aria-hidden="true">
list 역할은 항목들이 모여 있는 목록을 나타내는 데 사용됩니다. 이 역할은 항목들 간의 관계를 정의하고, 보조 기술이 이러한 항목들이 논리적으로 그룹화되어 있음을 인식할 수 있도록 돕습니다. HTML에서 <ul>, <ol>, <dl> 요소가 기본적으로 list 역할을 수행합니다.
W3C ARIA list
MDN ARIA list
UXKM : ul element
UXKM : ol element
UXKM : dl element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 목록 항목에 listitem 역할 누락 이 예시는 listitem 역할을 명시하지 않아 보조 기술이 목록 항목을 올바르게 인식하지 못할 수 있습니다. 목록 항목에는 반드시 listitem 역할을 지정해야 합니다.
<div role="list">
<div>Apples</div>
<div>Bananas</div>
<div>Cherries</div>
</div>
올바른 예시 - 일관된 목록 구조 유지 이 예시는 role=”list”와 role=”listitem”을 사용하여 목록과 목록 항목을 명확하게 정의하고, aria-labelledby 속성으로 목록의 제목을 지정하여 보조 기술이 목록을 올바르게 설명할 수 있도록 했습니다.
<div role="list" aria-labelledby="fruit-list">
<h2 id="fruit-list">Favorite Fruits</h2>
<div role="listitem">Apples</div>
<div role="listitem">Bananas</div>
<div role="listitem">Cherries</div>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 이 예시는 HTML의 <ul> 요소를 사용하여 비순서형 목록을 정의하고 있습니다. 각 항목은 <li> 요소로 표시되며, 이 구조는 자동으로 list와 listitem 역할을 수행합니다.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
명시적으로 list 역할 지정 예시 이 예시는 <div> 요소에 role=”list”를 지정하고, 각 항목에 role=”listitem”을 사용하여 비표준 마크업에서 목록을 정의한 예시입니다. 이는 시멘틱한 목록 요소를 사용할 수 없는 상황에서 유용합니다.
<div role="list">
<div role="listitem">Apples</div>
<div role="listitem">Bananas</div>
<div role="listitem">Cherries</div>
</div>
listitem 역할은 목록 내의 개별 항목을 나타냅니다. 이 역할은 항목들이 논리적으로 그룹화된 list 요소 내에서 사용되며, 보조 기술이 각 항목을 독립적으로 식별하고, 사용자에게 목록의 내용을 명확하게 전달할 수 있도록 돕습니다. HTML에서 <li> 요소가 기본적으로 listitem 역할을 수행합니다.
W3C ARIA listitem
MDN ARIA listitem
UXKM : li element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - listitem 역할을 list 없이 사용 이 예시는 list 역할을 가진 요소 없이 listitem 역할을 사용하고 있으며, 이는 보조 기술이 이 항목을 목록의 일부로 인식하지 못하게 할 수 있습니다. listitem 역할은 항상 list 역할 내에서 사용되어야 합니다.
<div role="listitem">Item without list context</div>
올바른 예시 - list 역할과 함께 사용 이 예시는 role=”list”와 role=”listitem”을 함께 사용하여 목록과 목록 항목을 명확하게 정의하고, aria-labelledby 속성으로 목록의 제목을 지정하여 보조 기술이 목록을 올바르게 설명할 수 있도록 했습니다.
<div role="list" aria-labelledby="todo-list">
<h2 id="todo-list">To-Do List</h2>
<div role="listitem">Buy groceries</div>
<div role="listitem">Call the bank</div>
<div role="listitem">Schedule a doctor's appointment</div>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 이 예시는 HTML의 <ul> 요소 내에서 <li> 요소를 사용하여 목록 항목을 정의하고 있습니다. 각 <li> 요소는 자동으로 listitem 역할을 수행합니다.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
명시적으로 listitem 역할 지정 예시 이 예시는 <div> 요소에 role=”listitem”을 지정하여 마크업에서 목록 항목을 정의한 예시입니다. 이는 시멘틱한 목록 요소를 사용할 수 없는 상황에서 유용합니다.
<div role="list">
<div role="listitem">First item</div>
<div role="listitem">Second item</div>
<div role="listitem">Third item</div>
</div>
math 역할은 수학적 표현이나 수식을 나타내는 콘텐츠를 정의하는 데 사용됩니다. 이 역할은 보조 기술이 수식이나 수학적 내용을 올바르게 이해하고, 사용자에게 적절히 전달할 수 있도록 돕습니다. HTML의 <math> 요소 또는 MathML(Markup Language for Mathematical Notation)을 사용하여 수학적 표현을 나타낼 수 있습니다.
W3C ARIA math
MDN ARIA math
MDN math element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 수학적 표현을 일반 텍스트로 처리 이 예시는 수학적 표현을 일반 텍스트로만 제공하고 있으며, math 역할이나 대체 텍스트가 없어 보조 기술이 이 수식을 올바르게 해석하지 못할 수 있습니다. 적절한 역할 지정이나 MathML 사용이 필요합니다.
<p>a = (-b ± √(b² - 4ac)) / 2a</p>
올바른 예시 - MathML과 함께 math 역할 사용 이 예시는 MathML과 함께 role=”math”을 사용하여 수학적 표현을 명확히 정의하고 있으며, aria-labelledby 속성을 통해 수식의 의미를 설명하는 레이블을 제공하고 있습니다.
<div role="math" aria-labelledby="equation-label">
<p id="equation-label">Quadratic formula:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mtext>b</mtext>
<mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4ac</mn>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2a</mn>
</mrow>
</mfrac>
</mrow>
</math>
</div>
(권장) MathML을 사용한 수학적 표현 예시 이 예시는 MathML을 사용하여 이차 방정식의 해를 나타내는 수식을 표현하고 있습니다. MathML은 수학적 표현을 시멘틱하게 정의하며, 다양한 출력 장치와 보조 기술에서 일관되게 표현할 수 있도록 합니다.
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mtext>b</mtext>
<mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4ac</mn>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2a</mn>
</mrow>
</mfrac>
</mrow>
</math>
명시적으로 math 역할 지정 예시 이 예시는 <div> 요소에 role=”math”를 지정하여 수학적 표현을 명시적으로 나타내고 있으며, aria-label을 사용해 수식의 의미를 설명하고 있습니다. MathML을 사용할 수 없는 상황에서 유용한 방법입니다.
<div role="math" aria-label="Quadratic formula">
<p>a = (-b ± √(b² - 4ac)) / 2a</p>
</div>
note 역할은 웹 페이지나 애플리케이션에서 부가적인 정보를 제공하는 데 사용됩니다. 이 역할은 중요한 정보를 보완하거나, 추가적인 설명을 제공하기 위한 콘텐츠를 나타내며, 보조 기술이 이 정보를 사용자에게 명확히 전달할 수 있도록 돕습니다. 일반적으로 노트, 팁, 경고 등과 같은 콘텐츠를 설명하는 데 사용됩니다.
W3C ARIA note
MDN ARIA note
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - note 역할을 사용하지 않아야 하는 경우 이 예시는 페이지의 주요 제목에 note 역할을 사용했으나, 이는 잘못된 사용입니다. note 역할은 부가적인 정보나 설명을 제공할 때 사용되어야 하며, 주 콘텐츠에 적용해서는 안 됩니다.
<div role="note">
<h1>Welcome to Our Website</h1>
</div>
올바른 예시 - note 역할의 적절한 사용 이 예시는 부가적인 정보를 제공하는 데 role=”note”를 적절하게 사용하여, 보조 기술이 이 정보를 올바르게 사용자에게 전달할 수 있도록 했습니다.
<div role="note">
<p>Note: Make sure to check your email for order confirmation.</p>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 예시 이 예시는 HTML의 <aside> 요소를 사용하여 추가적인 정보를 제공하고 있습니다. <aside> 요소는 부가적인 정보를 나타내며, 자동으로 note 역할을 수행합니다.
<aside>
<p>Note: This product is only available in select regions.</p>
</aside>
명시적으로 note 역할 지정 예시 이 예시는 <div> 요소에 role=”note”를 지정하여 비표준 마크업에서 추가 정보를 제공하는 예시입니다. 이 방법은 시멘틱한 요소를 사용할 수 없는 상황에서 유용합니다.
<div role="note">
<p>Tip: You can save 10% by signing up for our newsletter.</p>
</div>
paragraph 역할은 텍스트를 그룹화하여 하나의 논리적인 단락을 나타내는 역할을 합니다. HTML에서 <p> 요소가 기본적으로 paragraph 역할을 수행합니다. 이 역할은 보조 기술이 텍스트의 구조와 의미를 올바르게 이해하고, 사용자에게 전달할 수 있도록 돕습니다.
W3C ARIA paragraph
MDN Web Docs: HTML: p element
UXKM : p element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - paragraph 역할을 불필요하게 사용 이 예시는 <span> 요소에 role=”paragraph”를 지정했으나, <span>은 인라인 요소로 단락을 나타내는 데 적합하지 않습니다. 또한, 시멘틱한 마크업인 <p> 요소를 사용하는 것이 더 적절합니다.
<span role="paragraph">This text is incorrectly marked as a paragraph.</span>
(권장) 올바른 예시 - 시멘틱 마크업에서의 기본 사용 예시 이 예시는 HTML의 <p> 요소를 사용하여 텍스트 단락을 정의하고 있습니다. <p> 요소는 자동으로 paragraph 역할을 수행하여, 보조 기술이 이 텍스트를 올바르게 인식하고 사용자에게 전달할 수 있도록 합니다.
<p>This is a paragraph of text that provides information on a particular topic.</p>
명시적으로 paragraph 역할 지정 예시 이 예시는 <div> 요소에 role=”paragraph”를 지정하여 비표준 마크업에서 텍스트 단락을 정의한 예시입니다. 이는 <p> 요소를 사용할 수 없는 상황에서 유용할 수 있지만, 일반적으로는 <p> 요소를 사용하는 것이 더 적절합니다.
<div role="paragraph">
This is a paragraph of text that is wrapped in a div element.
</div>
presentation 역할은 HTML 요소의 시멘틱 의미를 제거하여, 보조 기술이 해당 요소를 단순히 레이아웃 목적으로만 인식하도록 하는 역할을 합니다. 이 역할은 시각적으로는 중요한 요소이지만, 접근성 측면에서는 의미를 전달할 필요가 없는 경우에 사용됩니다. 주로 시멘틱 마크업을 무효화하고, 콘텐츠를 단순히 시각적으로만 표시할 때 사용됩니다.
W3C ARIA presentation
MDN ARIA presentation
기본 설명
사용 시 주의사항
상속된 상태 및 속성
role=”presentation 과 aria-hidden=”true의 비교
잘못된 예시 - 중요한 콘텐츠에 role=”presentation”을 사용하여 스크린 리더에서 이 콘텐츠를 무시하게 만든 경우. 이 예시에서, role=”presentation”을 div 요소에 적용했기 때문에 그 안에 포함된 모든 내용(h1과 p)이 스크린 리더에 의해 무시됩니다. 하지만 이 콘텐츠는 매우 중요한 정보이므로, 사용자가 이를 인식하지 못하게 됩니다.
<div role="presentation">
<h1>Welcome to Our Site</h1>
<p>This website provides important information about accessibility.</p>
</div>
(권장) 올바른 예시 - 시각적인 레이아웃을 위해 사용된 비중요 요소에 role=”presentation”을 사용하여 스크린 리더가 무시하도록 설정 이 예시는 visual-separator 요소는 단순히 레이아웃 구분을 위한 것이므로, 스크린 리더가 이를 무시하도록 role=”presentation”을 사용했습니다. 이로써 스크린 리더 사용자는 구분선을 읽지 않고 중요한 콘텐츠에 집중할 수 있습니다.
<div class="layout-container">
<div class="sidebar">
<p>Sidebar content here</p>
</div>
<!-- 이 요소는 단순히 시각적 구분을 위한 것이므로 role="presentation"을 사용 -->
<div class="visual-separator" role="presentation"></div>
<div class="content">
<h1>Main Content Area</h1>
<p>This is where the main content of the page resides.</p>
</div>
</div>
표 안의 role=”presentation” 상황 - 레이아웃용 표에서 의미 없는 행과 셀에 role=”presentation”을 사용 예시 이 예시는 빈 행은 시각적으로만 필요하고, 접근성 도구에서는 중요하지 않으므로 role=”presentation”을 사용했습니다. 스크린 리더는 이 행을 무시하고 다른 중요한 정보로 넘어갑니다.
<table>
<tr>
<td>Name:</td>
<td>John Doe</td>
</tr>
<tr>
<!-- 시각적 구분을 위한 빈 행 -->
<td colspan="2" role="presentation"></td>
</tr>
<tr>
<td>Email:</td>
<td>johndoe@example.com</td>
</tr>
</table>
아이콘에 role=”presentation” 적용 예시 이 예시는 아이콘이 단순히 장식적인 요소라면 alt 속성을 비워두고 role=”presentation”을 사용하여 스크린 리더가 이 이미지를 무시하도록 설정했습니다. 이렇게 하면 사용자가 불필요한 정보를 듣지 않게 됩니다.
<button>
<img src="icon.png" alt="" role="presentation">
Submit
</button>
role=”presentation 과 aria-hidden=”true의 비교 예시 이 두 속성은 서로 다른 용도로 사용되므로, 어떤 상황에서 어느 속성을 사용하는 것이 적절한지 판단하는 것이 중요합니다. role=”presentation”은 주로 구조적 의미가 없을 때 사용되고, aria-hidden=”true”는 특정 콘텐츠를 스크린 리더에서 숨기고자 할 때 사용됩니다.
// table 요소는 스크린 리더에게 테이블로 인식되지 않고, 단순히 텍스트와 이미지가 나열된 것처럼 인식됩니다.
<table role="presentation">
<tr>
<td><img src="icon.png" alt=""></td>
<td>Item description here</td>
</tr>
</table>
// div 요소와 그 안에 있는 모든 콘텐츠(이미지와 텍스트 포함)는 스크린 리더에 의해 완전히 무시됩니다.
<div aria-hidden="true">
<img src="decorative-image.png" alt="Decorative">
<p>This text is hidden from screen readers.</p>
</div>
row 역할은 테이블, 그리드, 트리그리드 등에서 데이터를 행(row) 단위로 그룹화하여 나타내는 역할을 합니다. 이 역할은 보조 기술이 행 단위로 데이터를 올바르게 인식하고, 각 셀이나 항목 간의 관계를 사용자에게 전달할 수 있도록 돕습니다.
W3C ARIA row
MDN ARIA row
UXKM : tr element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - row 역할을 사용하지 않아야 하는 경우 이 예시는 데이터 구조와 무관한 단락에 row 역할을 사용했습니다. row 역할은 반드시 데이터 테이블, 그리드, 트리그리드 등의 구조 내에서 사용해야 하며, 단순한 텍스트 블록에는 사용하지 않아야 합니다.
<div role="row">
<p>This is not a data row</p>
</div>
올바른 예시 - 그리드 구조 내에서 row 역할 사용 이 예시는 그리드 구조 내에서 role=”row”와 role=”gridcell”을 사용하여, 보조 기술이 데이터를 올바르게 인식하고 사용자에게 전달할 수 있도록 했습니다.
<div role="grid">
<div role="row">
<div role="gridcell">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
<div role="row">
<div role="gridcell">Banana</div>
<div role="gridcell">$0.50</div>
<div role="gridcell">100</div>
</div>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 예시 이 예시는 HTML의 <tr> 요소를 사용하여 테이블 행을 정의하고 있습니다. <tr> 요소는 자동으로 row 역할을 수행하여, 보조 기술이 이 구조를 올바르게 인식할 수 있도록 합니다.
<table>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>100</td>
</tr>
</table>
명시적으로 row 역할 지정 예시 이 예시는 <div> 요소에 role=”row”를 지정하여 비표준 마크업에서 그리드 행을 정의한 예시입니다. 각 셀은 role=”gridcell”로 정의되어 있습니다.
<div role="row">
<div role="gridcell">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
rowgroup 역할은 테이블, 그리드, 트리그리드 등의 데이터 구조에서 여러 행(row)을 묶어 하나의 그룹으로 나타내는 역할을 합니다. 이 역할은 행 그룹을 정의하여 보조 기술이 이 그룹을 올바르게 인식하고, 사용자에게 데이터를 더 구조적으로 전달할 수 있도록 돕습니다. HTML에서 <thead>, <tbody>, <tfoot> 요소가 기본적으로 rowgroup 역할을 수행합니다.
W3C ARIA rowgroup
MDN ARIA rowgroup
UXKM : thead element
UXKM : tbody element
UXKM : tfoot element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 의미 없는 그룹화 이 예시는 데이터 구조와 무관한 텍스트를 role=”rowgroup”으로 지정했으나, rowgroup 역할은 반드시 데이터 구조 내에서 사용되어야 합니다. 의미 없는 콘텐츠에 이 역할을 사용하면 보조 기술이 혼란스러울 수 있습니다.
<div role="rowgroup">
<p>This text does not belong to a row group</p>
</div>
올바른 예시 - 그리드 구조 내에서 rowgroup 역할 사용 사용 이 예시는 그리드 구조 내에서 role=”rowgroup”과 role=”row”를 사용하여, 보조 기술이 데이터를 그룹 단위로 인식하고, 사용자에게 구조화된 정보를 제공할 수 있도록 했습니다.
<div role="table">
<div role="rowgroup" aria-labelledby="header-row">
<div role="row" id="header-row">
<div role="columnheader">Product</div>
<div role="columnheader">Price</div>
<div role="columnheader">Quantity</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="gridcell">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
<div role="row">
<div role="gridcell">Banana</div>
<div role="gridcell">$0.50</div>
<div role="gridcell">100</div>
</div>
</div>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 예시 이 예시는 HTML의 <thead>, <tbody>, <tfoot> 요소를 사용하여 테이블의 행을 그룹화하고 있습니다. 각 요소는 자동으로 rowgroup 역할을 수행하며, 보조 기술이 이 구조를 올바르게 인식할 수 있도록 합니다.
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
</tr>
</tfoot>
</table>
명시적으로 rowgroup 역할 지정 예시 이 예시는 <div> 요소에 role=”rowgroup”을 지정하여 비표준 마크업에서 행 그룹을 정의한 예시입니다. 각 그룹은 role=”row”를 사용하여 행을 포함하며, 보조 기술이 그룹 간의 관계를 인식할 수 있도록 돕습니다.
<div role="table">
<div role="rowgroup">
<div role="row">
<div role="columnheader">Product</div>
<div role="columnheader">Price</div>
<div role="columnheader">Quantity</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="gridcell">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
<div role="row">
<div role="gridcell">Banana</div>
<div role="gridcell">$0.50</div>
<div role="gridcell">100</div>
</div>
</div>
</div>
rowheader 역할은 테이블, 그리드, 또는 트리그리드에서 행의 제목을 나타내는 셀에 사용됩니다. 이 역할은 각 행의 주제를 설명하며, 보조 기술이 이를 올바르게 인식하고 사용자에게 전달할 수 있도록 돕습니다. 일반적으로 테이블의 첫 번째 열에 위치하며, 해당 행의 모든 데이터를 설명하는 역할을 합니다.
W3C ARIA rowheader
MDN ARIA rowheader
UXKM : th element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 의미 없는 셀에 rowheader 역할 사용 이 예시는 단순 텍스트 블록에 rowheader 역할을 사용했으나, rowheader 역할은 반드시 테이블, 그리드, 또는 트리그리드와 같은 데이터 구조 내에서 사용되어야 합니다. 의미 없는 콘텐츠에 이 역할을 사용하면 보조 기술이 혼란스러울 수 있습니다.
<div role="rowheader">This is not a row header</div>
올바른 예시 - 그리드 구조 내에서 rowheader 역할 사용 이 예시는 그리드 구조 내에서 role=”rowheader”과 role=”gridcell”을 사용하여, 보조 기술이 데이터를 올바르게 인식하고, 사용자에게 행의 주제를 명확히 전달할 수 있도록 했습니다.
<div role="grid">
<div role="row">
<div role="rowheader">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
<div role="row">
<div role="rowheader">Banana</div>
<div role="gridcell">$0.50</div>
<div role="gridcell">100</div>
</div>
</div>
(권장) 시멘틱 마크업에서의 기본 사용 예시 이 예시는 HTML의 <th scope=”row”> 요소를 사용하여 테이블 행의 머리글을 정의하고 있습니다. <h> 요소는 자동으로 rowheader 역할을 수행하며, 보조 기술이 이 구조를 올바르게 인식할 수 있도록 합니다.
<table>
<tr>
<th scope="row">Apple</th>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Banana</th>
<td>$0.50</td>
<td>100</td>
</tr>
</table>
명시적으로 rowheader 역할 지정 예시 이 예시는 <div> 요소에 role=”rowheader”를 지정하여 비표준 마크업에서 행 머리글을 정의한 예시입니다. 각 행의 데이터는 role=”gridcell”을 사용하여 정의됩니다.
<div role="row">
<div role="rowheader">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
<div role="row">
<div role="rowheader">Banana</div>
<div role="gridcell">$0.50</div>
<div role="gridcell">100</div>
</div>
table 역할은 데이터를 행과 열로 구성된 표 형식으로 나타내는 구조를 정의하는 데 사용됩니다. 이 역할은 보조 기술이 데이터를 테이블 형식으로 인식하고, 각 셀 간의 관계를 사용자에게 명확히 전달할 수 있도록 돕습니다. HTML의 <table> 요소는 기본적으로 table 역할을 수행합니다.
W3C ARIA table
MDN ARIA table
UXKM : table element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 레이아웃 테이블에 table 역할 사용 이 예시는 레이아웃을 위한 테이블에 table 역할을 사용하고 있으며, 이는 잘못된 사용입니다. 레이아웃 목적으로 사용되는 테이블에는 role=”presentation”을 사용하여 보조 기술이 이를 무시하도록 하는 것이 좋습니다.
<table role="table">
<tr>
<td><img src="image1.jpg" alt="Image 1"></td>
<td><img src="image2.jpg" alt="Image 2"></td>
<td><img src="image3.jpg" alt="Image 3"></td>
</tr>
</table>
(권장) 시멘틱 마크업 - 데이터 테이블에 table 역할 사용 이 예시는 HTML의 <table> 요소를 사용하여 테이블 구조를 정의하고 있으며, <caption> 요소로 테이블의 제목을 제공하고 있습니다. table 역할은 자동으로 적용되며, 보조 기술이 이 테이블을 데이터 구조로 인식하고 사용자에게 전달할 수 있도록 합니다.
<table>
<caption>Product Pricing</caption>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>100</td>
</tr>
</tbody>
</table>
명시적으로 table 역할 지정 예시 이 예시는 <div> 요소에 role=”table”을 지정하여 비표준 마크업에서 테이블 구조를 정의한 예시입니다. 각 행과 셀은 role=”row” 및 role=”gridcell”로 정의되어 있습니다.
<div role="table">
<div role="rowgroup">
<div role="row">
<div role="columnheader">Product</div>
<div role="columnheader">Price</div>
<div role="columnheader">Quantity</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="gridcell">Apple</div>
<div role="gridcell">$1.00</div>
<div role="gridcell">50</div>
</div>
<div role="row">
<div role="gridcell">Banana</div>
<div role="gridcell">$0.50</div>
<div role="gridcell">100</div>
</div>
</div>
</div>
separator 역할은 콘텐츠를 논리적으로 구분하는 시각적인 구분선을 나타내는 데 사용됩니다. 이 역할은 주로 메뉴, 툴바, 대화 상자, 또는 기타 인터페이스 구성 요소 내에서 그룹을 나누거나 구획을 구분할 때 사용됩니다. 포커스 불가능한 separator는 보조 기술이 해당 요소를 콘텐츠 간의 구분자로 인식하지만, 이 요소에 포커스를 둘 수 없도록 설정된 경우입니다.
W3C ARIA separator
MDN ARIA separator
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 불필요한 포커스 가능 설정 사용 이 예시는 구분선에 tabindex=”0”을 지정하여 포커스 가능하게 만들었지만, 구분선이 단순히 시각적인 구분만 제공하는 경우 포커스가 필요하지 않습니다. 이러한 설정은 사용자에게 혼란을 줄 수 있습니다.
<div role="separator" tabindex="0"></div>
올바른 예시 - 포커스 불가능한 상태 유지 사용 이 예시는 마크업에서 role=”separator”와 aria-orientation=”vertical”을 사용하여, 포커스 불가능한 수직 구분선을 정의하고 있습니다. 포커스가 불가능하므로, 이 요소는 시각적 구분만 제공하며 사용자 인터페이스에서 중요한 역할을 하지 않습니다.
<div role="separator" aria-orientation="vertical"></div>
(권장) 시멘틱 마크업에서의 기본 사용 이 예시는 HTML의 <hr> 요소를 사용하여 콘텐츠를 구분하는 구분선을 나타냅니다. <hr> 요소는 기본적으로 포커스 불가능하며, separator 역할을 자동으로 수행합니다.
<hr>
명시적으로 separator 역할 지정 예시 이 예시는 <div> 요소에 role=”separator”를 지정하여, 포커스 불가능한 수평 구분선을 비표준 마크업으로 정의한 예시입니다. aria-orientation=”horizontal” 속성은 구분선의 방향을 명확히 지정합니다.
<div role="separator" aria-orientation="horizontal"></div>
term 역할은 정의 목록에서 정의될 용어 또는 단어를 나타내는 데 사용됩니다. 이 역할은 용어가 정의된 내용과 함께 그룹화되어 보조 기술이 이를 올바르게 해석하고 사용자에게 전달할 수 있도록 돕습니다. HTML에서 <dt> 요소가 기본적으로 term 역할을 수행합니다.
W3C ARIA term
MDN ARIA term
UXKM : dl element
UXKM : dt element
UXKM : dd element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 정의 없이 term 역할 사용 이 예시는 용어를 정의하는 내용 없이 term 역할만 사용하고 있으며, 이는 부적절한 사용입니다. term 역할은 항상 정의(definition 역할)와 함께 사용되어야 합니다.
<div role="term">Web API</div>
올바른 예시 - 용어와 정의를 함께 사용 이 예시는 role=”term”과 role=”definition”을 함께 사용하여 용어와 그 정의를 명확히 연결하고 있습니다. 보조 기술이 이 정보를 사용자에게 올바르게 전달할 수 있도록 합니다.
<div role="term">Web API</div>
<div role="definition">An interface that allows software applications to interact with each other over the web.</div>
(권장) 시멘틱 마크업에서의 기본 사용 이 예시는 HTML의 <dl>, <dt>, <dd> 요소를 사용하여 정의 목록을 시멘틱하게 구조화하고 있습니다. <dt> 요소는 자동으로 term 역할을 수행합니다.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for documents designed to be displayed in a web browser.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, a language used to describe the presentation of a document written in HTML or XML.</dd>
</dl>
명시적으로 term 역할 지정 예시 이 예시는 <div> 요소에 role=”term”과 role=”definition”을 지정하여 비표준 마크업에서 정의 목록을 구성한 예시입니다. 보조 기술이 용어와 정의를 올바르게 연결할 수 있도록 돕습니다.
<div role="term">JavaScript</div>
<div role="definition">A programming language that conforms to the ECMAScript specification and is used to create interactive effects within web browsers.</div>
toolbar 역할은 웹 애플리케이션에서 여러 상호작용 가능한 도구(버튼, 메뉴 등)가 모여 있는 도구 모음(툴바)을 나타내는 데 사용됩니다. 이 역할은 보조 기술이 도구 모음을 인식하고, 사용자에게 이 도구들이 한 그룹으로 묶여 있다는 정보를 제공할 수 있도록 돕습니다. 툴바는 일반적으로 관련된 작업을 수행하는 여러 컨트롤을 포함하고 있으며, 이는 사용자가 한 번에 접근할 수 있는 인터페이스 요소로 그룹화됩니다.
W3C ARIA toolbar
MDN ARIA toolbar
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 툴바 내에 적절한 역할 미지정 이 예시는 툴바 내의 컨트롤에 적절한 역할(button 등)을 지정하지 않았으며, 이는 보조 기술이 툴바의 개별 도구를 올바르게 인식하지 못하게 합니다. 각 컨트롤에는 그에 맞는 역할을 지정해야 합니다.
<div role="toolbar">
<div>Bold</div>
<div>Italic</div>
<div>Underline</div>
</div>
(권장) 올바른 예시 - 툴바 내에 적절한 역할 지정 이 예시는 툴바 내의 각 컨트롤에 button 역할을 지정하여, 보조 기술이 툴바의 개별 도구를 올바르게 인식하고 사용자에게 전달할 수 있도록 했습니다.
<div role="toolbar" aria-label="Formatting options">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
수평 툴바 사용 예시 이 예시는 수평 툴바를 나타내며, 텍스트 서식 옵션을 제공하는 버튼들이 그룹화되어 있습니다. aria-label 속성은 툴바의 목적을 설명하며, aria-orientation=”horizontal”은 툴바가 수평으로 배열되어 있음을 명시합니다.
<div role="toolbar" aria-label="Text formatting options" aria-orientation="horizontal">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
<div role="separator"></div>
<button>Left Align</button>
<button>Center Align</button>
<button>Right Align</button>
</div>
수직 툴바 사용 예시 이 예시는 수직 툴바를 나타내며, 문서 관련 작업을 수행하는 버튼들이 수직으로 배열되어 있습니다. aria-orientation=”vertical”은 툴바가 수직으로 배열되어 있음을 명시합니다.
<div role="toolbar" aria-label="Document tools" aria-orientation="vertical">
<button>New</button>
<button>Open</button>
<button>Save</button>
<div role="separator"></div>
<button>Print</button>
</div>
tooltip 역할은 요소와 연관된 추가 정보를 제공하는 작은 팝업 창을 나타냅니다. 툴팁은 일반적으로 마우스오버, 포커스, 또는 키보드 상호작용 시 나타나며, 해당 요소에 대한 설명이나 추가 정보를 간략하게 제공하는 데 사용됩니다. 툴팁은 시각적으로 나타나며, 보조 기술이 이를 사용자에게 올바르게 전달할 수 있도록 해야 합니다.
W3C ARIA tooltip
MDN ARIA tooltip
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 툴팁의 정보 부족 이 예시는 툴팁에 제공되는 정보가 불충분하여, 사용자에게 도움이 되지 않습니다. 툴팁은 해당 요소에 대한 명확한 설명이나 추가 정보를 제공해야 합니다.
<button aria-describedby="tooltip3">Submit</button>
<div role="tooltip" id="tooltip3">
Click
</div>
(권장) 올바른 예시 - 명확한 정보 제공 이 예시는 툴팁에 명확한 정보를 제공하여, 사용자가 해당 버튼의 기능을 쉽게 이해할 수 있도록 합니다.
<button aria-describedby="tooltip4">Submit</button>
<div role="tooltip" id="tooltip4">
This button will submit the form data to the server.
</div>
동적 툴팁 사용 예시 이 예시는 버튼에 마우스를 올리면 툴팁이 나타나고, 마우스를 떼면 툴팁이 사라지도록 동적으로 처리한 예시입니다. aria-describedby 속성을 사용해 툴팁을 연결합니다.
<button onmouseover="showTooltip()" onmouseout="hideTooltip()" aria-describedby="tooltip2">Info</button>
<div role="tooltip" id="tooltip2" style="display:none;">
More information available on hover.
</div>
<script>
function showTooltip() {
document.getElementById('tooltip2').style.display = 'block';
}
function hideTooltip() {
document.getElementById('tooltip2').style.display = 'none';
}
</script>
time 역할은 웹 페이지에서 날짜나 시간을 나타내는 요소에 사용됩니다. 이 역할은 특정한 시간, 날짜, 기간을 명확하게 표현하고, 보조 기술이 이를 사용자에게 올바르게 전달할 수 있도록 돕습니다. HTML의 <time> 요소는 기본적으로 time 역할을 수행합니다.
W3C ARIA time
MDN Web Docs : time element
UXKM : time element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - datetime 속성 누락 이 예시는 날짜를 나타내고 있지만, datetime 속성이 없어 보조 기술이 이를 정확히 해석하지 못할 수 있습니다. 날짜와 시간을 명확히 전달하기 위해 datetime 속성을 포함하는 것이 좋습니다.
<p>The conference will be held on <time>August 25</time>.</p>
(권장) 올바른 예시 - datetime 속성을 포함한 날짜 표시 이 예시는 <time> 요소를 사용하여 이벤트 시작 시간을 나타내고 있으며, datetime 속성을 통해 ISO 8601 형식으로 시간을 명시하고 있습니다. 보조 기술은 이를 통해 정확한 시간을 사용자에게 전달할 수 있습니다.
<p>The conference will be held on <time datetime="2024-08-25">August 25</time>.</p>
날짜를 나타내는 예시 이 예시는 프로젝트 마감일을 <time> 요소로 나타내고 있으며, datetime 속성을 통해 보조 기술이 날짜를 정확히 해석할 수 있도록 합니다.
<p>Project deadline is <time datetime="2024-09-15">September 15, 2024</time>.</p>
meter 역할은 웹 콘텐츠에서 특정 범위 내에서의 측정된 값이나 분포를 나타내는 데 사용됩니다. 이 역할은 보조 기술이 해당 값을 적절히 해석하고 사용자에게 전달할 수 있도록 돕습니다. 일반적으로 진행률, 점수, 용량 등의 상대적인 값을 표현하는 데 사용됩니다.
W3C ARIA meter
MDN Web Docs : meter element
UXKM : meter element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 불명확한 값과 범위 설정 이 예시는 meter 역할을 사용했으나, aria-valuenow, aria-valuemin, aria-valuemax와 같은 중요한 속성들을 누락하여 보조 기술이 값을 올바르게 해석할 수 없습니다. 이러한 속성들은 값이 무엇을 의미하는지 명확히 설명할 수 있도록 추가되어야 합니다.
<div role="meter">70%</div>
올바른 예시 - 명시적으로 meter 역할 지정하여 명확한 범위와 값 설정 이 예시는 role=”meter”를 사용하여 div 요소를 통해 값을 표시합니다. aria-valuenow, aria-valuemin, aria-valuemax 속성을 통해 값의 범위를 명확히 지정합니다. 이로 인해 보조 기술이 값을 정확히 인식하고 사용자에게 전달할 수 있습니다.
<div role="meter" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
70%
</div>
(권장) 시멘틱 마크업으로 제공되는 meter 역할 예시 이 예시는 value, min, max 속성을 사용하여 현재 값이 전체 범위 내에서 어디에 위치하는지를 표시합니다. <meter> 요소는 기본적으로 meter 역할을 수행합니다.
<meter value="70" min="0" max="100">70%</meter>
blockquote 요소는 웹 페이지에서 인용된 텍스트를 나타내는 데 사용되는 시멘틱 HTML 요소입니다. 이 요소는 다른 출처에서 인용된 긴 텍스트 블록을 구분하여, 보조 기술이 이를 사용자에게 명확하게 전달할 수 있도록 돕습니다. 일반적으로 인용문은 들여쓰기를 통해 시각적으로 구분되며, 출처를 명시할 수도 있습니다.
W3C ARIA blockquote
MDN Web Docs : blockquote element
UXKM : blockquote element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - blockquote 요소 없이 인용문 표시 이 예시는 blockquote 요소 없이 인용문을 단락(<p>) 내에 포함시켰습니다. 이 경우 인용문이 시각적으로 또는 시멘틱적으로 구분되지 않으며, 보조 기술이 이를 인용문으로 인식하지 못할 수 있습니다.
<p>
"The greatest glory in living lies not in never falling, but in rising every time we fall." - Nelson Mandela
</p>
(권장) 올바른 예시 - blockquote 요소 사용 이 예시는 blockquote 요소를 사용하여 인용문을 명확히 구분하고 있으며, cite 속성을 통해 인용문의 출처를 제공하여 보조 기술이 이를 올바르게 전달할 수 있도록 합니다.
<blockquote cite="https://www.w3.org/WAI/fundamentals/accessibility-intro/ko#context">
웹의 힘은 보편성에 있습니다. 장애에 상관없이 모두가 접근할 수 있다는 것이 가장 중요한 부분입니다.
</blockquote>
출처를 명시하지 않은 인용문 예시 이 예시는 blockquote 요소를 사용하여 인용문을 나타내고 있으며, cite 속성을 사용하지 않아 출처를 명시하지 않은 인용문입니다. 출처를 명시하지 않은 경우, 인용문이 어디에서 왔는지 보조 기술이 사용자에게 알리지 못할 수 있습니다.
<blockquote>
웹의 힘은 보편성에 있습니다. 장애에 상관없이 모두가 접근할 수 있다는 것이 가장 중요한 부분입니다.
</blockquote>
caption 역할은 웹 콘텐츠에서 표, 그림, 동영상 등의 요소에 대한 제목이나 설명을 제공하는 역할을 합니다. 이 역할을 통해 보조 기술이 표나 다른 미디어 콘텐츠에 대한 제목 또는 설명을 인식하고 사용자에게 전달할 수 있도록 돕습니다. HTML의 <caption> 요소는 기본적으로 표의 제목을 제공하는 데 사용되며, 시멘틱하게 콘텐츠의 목적을 명확히 합니다.
W3C ARIA caption
MDN Web Docs : caption element
UXKM : caption element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - caption 역할 없이 표 표시 이 예시는 표에 제목이나 설명을 제공하지 않아서, 표의 목적을 이해하기 어려울 수 있습니다. caption 요소를 사용하여 표의 내용을 설명하는 것이 중요합니다.
<table>
<tr>
<th>Product</th>
<th>Sales</th>
<th>Revenue</th>
</tr>
<tr>
<td>Apples</td>
<td>1000</td>
<td>$500</td>
</tr>
<tr>
<td>Oranges</td>
<td>1500</td>
<td>$750</td>
</tr>
</table>
(권장) 올바른 예시 - caption 요소를 사용하여 설명 제공 이 예시는 caption 요소를 사용하여 표의 내용을 설명하는 “Quarterly Revenue by Product”라는 제목을 제공하고 있습니다. 이는 보조 기술이 표의 목적을 사용자에게 올바르게 전달하는 데 도움이 됩니다.
<table>
<caption>Quarterly Revenue by Product</caption>
<tr>
<th scope="col">Product</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
</tr>
<tr>
<td>Apples</td>
<td>$1000</td>
<td>$1200</td>
</tr>
<tr>
<td>Oranges</td>
<td>$1500</td>
<td>$1600</td>
</tr>
</table>
동영상에 설명 제공 예시
이 예시는 동영상 콘텐츠에 대한 설명을 제공하기 위해 <figcaption> 요소를 사용했습니다. 이와 같이 다양한 미디어 콘텐츠에 caption 역할을 적용하여 사용자에게 추가 정보를 제공할 수 있습니다.
<figure>
<video src="video.mp4" controls></video>
<figcaption>This video explains the process of data analysis.</figcaption>
</figure>
명시적으로 사용한 예시
<div role="table" aria-labelledby="name" aria-describedby="desc">
<div role="caption">
<div id="name">Contest Entrants</div>
<div id="desc">
This table shows the total number of entrants (500) the
contest accepted over the past four weeks.
</div>
</div>
</div>
deletion 역할은 웹 콘텐츠에서 삭제된 텍스트를 나타내는 데 사용됩니다. 이 역할을 통해 보조 기술이 해당 텍스트가 문서에서 삭제되었음을 인식하고 사용자에게 이를 전달할 수 있습니다. 이 역할은 보통 HTML에서 <del> 요소로 구현되며, 삭제된 텍스트는 취소선으로 표시됩니다.
W3C ARIA deletion
MDN Web Docs : del element
UXKM : del element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 단순 취소선 이 예시는 span 요소에 취소선 스타일을 적용하여 텍스트를 시각적으로 삭제된 것처럼 보이게 하지만, 시멘틱 마크업을 사용하지 않았기 때문에 보조 기술이 이를 삭제된 텍스트로 인식하지 못합니다.
<p>This is an <span style="text-decoration: line-through;">outdated</span> information.</p>
(권장) 올바른 예시 - 시멘틱 마크업 사용 이 예시는 HTML의 <del> 요소를 사용하여 “outdated”라는 단어가 삭제되었음을 표시하고 있습니다. 이 요소는 텍스트가 문서에서 삭제되었음을 명확히 표시하고 있으며, 보조 기술이 이를 올바르게 인식할 수 있습니다.
<p>This is an <del>outdated</del> information.</p>
(권장) cite 및 datetime 속성을 사용한 예시 이 예시는 cite 속성을 사용하여 삭제된 텍스트의 출처를 명시하고, datetime 속성을 통해 텍스트가 삭제된 날짜를 지정하고 있습니다. 이는 보조 기술이 삭제된 텍스트에 대한 추가 정보를 사용자에게 전달할 수 있도록 돕습니다.
<p>The policy was updated from <del cite="https://www.example.com/old-policy" datetime="2024-08-10">previous terms</del> to reflect new guidelines.</p>
emphasis 역할은 웹 콘텐츠에서 텍스트를 강조하는 데 사용됩니다. 이 역할은 텍스트의 중요성을 강조하거나 특정 부분에 의미를 부여할 때 사용되며, 보조 기술이 이 강조를 인식하고 사용자에게 전달할 수 있도록 돕습니다. HTML에서 <em> 요소는 이 역할을 기본적으로 수행하며, 일반적으로 이탤릭체로 표시됩니다.
W3C ARIA emphasis
MDN Web Docs : em element
UXKM : em element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 스타일링을 위한 잘못된 사용 이 예시는 <span> 요소에 이탤릭 스타일을 적용하여 텍스트를 강조하고 있지만, 시멘틱 마크업을 사용하지 않았기 때문에 보조 기술이 이를 강조된 텍스트로 인식하지 못합니다. em 요소를 사용하는 것이 더 적절합니다.
<p>This is <span style="font-style: italic;">important</span> information.</p>
(권장) 올바른 예시 - 기본적으로 제공되는 emphasis 역할 사용 이 예시는 HTML의 <em> 요소를 사용하여 “always”라는 단어를 강조하고 있습니다. 이 텍스트는 브라우저에서 이탤릭체로 표시되며, 보조 기술이 이를 강조된 텍스트로 인식하여 사용자에게 전달할 수 있습니다.
<p>You should <em>always</em> check your work before submitting it.</p>
insertion 역할은 웹 콘텐츠에서 새로 추가된 텍스트를 나타내는 역할을 합니다. 이 역할은 보조 기술이 문서에 추가된 내용을 인식하고 사용자에게 전달할 수 있도록 돕습니다. HTML에서 이 역할은 <ins> 요소를 통해 구현되며, 일반적으로 밑줄로 표시됩니다.
W3C ARIA insertion
MDN Web Docs : ins element
UXKM : ins element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 단순 밑줄 스타일링 이 예시는 <span> 요소에 밑줄 스타일을 적용하여 텍스트를 시각적으로 추가된 것처럼 보이게 했지만, 시멘틱 마크업을 사용하지 않았기 때문에 보조 기술이 이를 추가된 텍스트로 인식하지 못합니다.
<p>This is an <span style="text-decoration: underline;">updated</span> information.</p>
(권장) 올바른 예시 - 시멘틱 마크업 사용 이 예시는 <ins> 요소를 사용하여 텍스트가 시멘틱하게 추가되었음을 명확히 표시하고 있으며, 보조 기술이 이를 올바르게 인식할 수 있습니다.
<p>This is an <ins>updated</ins> information.</p>
(권장) cite 및 datetime 속성을 사용한 예시 이 예시는 cite 속성을 사용하여 새로 추가된 텍스트의 출처를 명시하고, datetime 속성을 통해 텍스트가 추가된 날짜를 지정하고 있습니다. 이는 보조 기술이 추가된 텍스트에 대한 추가 정보를 사용자에게 전달할 수 있도록 돕습니다.
<p>The policy was revised to include <ins cite="https://www.example.com/new-policy" datetime="2024-08-10">new terms</ins> for better clarity.</p>
strong 역할은 웹 콘텐츠에서 텍스트의 중요성을 강조하는 역할을 합니다. 이 역할은 해당 텍스트가 문맥적으로 매우 중요한 의미를 가지며, 보조 기술이 이를 인식하여 사용자에게 전달할 수 있도록 돕습니다. HTML에서는 <strong> 요소가 이 역할을 기본적으로 수행하며, 브라우저에서 일반적으로 굵은 글씨체로 표시됩니다.
W3C ARIA strong
MDN Web Docs : strong element
UXKM : strong element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 단순 굵은 글씨를 위한 잘못된 사용 이 예시는 <span> 요소에 굵은 글씨 스타일을 적용하여 텍스트를 강조하고 있지만, 시멘틱 마크업을 사용하지 않았기 때문에 보조 기술이 이를 강조된 텍스트로 인식하지 못합니다. strong 요소를 사용하는 것이 더 적절합니다.
<p>This is <span style="font-weight: bold;">important</span> information.</p>
(권장) 올바른 예시 - 시멘틱 마크업 사용 이 예시는 HTML의 <strong> 요소를 사용하여 “very important”라는 단어를 강조하고 있습니다. 이 텍스트는 브라우저에서 굵은 글씨로 표시되며, 보조 기술이 이를 강조된 텍스트로 인식하여 사용자에게 전달할 수 있습니다.
<p>This is <strong>very important</strong> information.</p>
subscript 역할은 웹 콘텐츠에서 텍스트를 아래 첨자로 표시하는 역할을 합니다. 이 역할은 주로 수학적 표현, 화학식, 또는 특정 약어에서 사용되며, 텍스트가 일반 텍스트 라인 아래로 이동하여 표시됩니다. HTML에서 <sub> 요소가 이 역할을 기본적으로 수행합니다.
W3C ARIA subscript
MDN Web Docs : sub element
UXKM : sub element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 스타일링을 위한 잘못된 사용 이 예시는 단순히 텍스트 크기를 줄이는 방식으로 아래 첨자 효과를 내고 있지만, 시멘틱 마크업을 사용하지 않았기 때문에 보조 기술이 이를 아래 첨자로 인식하지 못합니다. sub 요소 또는 subscript 역할을 사용하는 것이 더 적절합니다.
<span style="font-size: smaller;">2</span>
(권장) 올바른 예시 - 시멘틱 마크업 사용 이 예시는 시멘틱한 HTML 요소인 <sub>를 사용하여 “mc²”에서 숫자 2를 아래 첨자로 표시하고 있습니다. <sub> 요소는 기본적으로 subscript 역할을 수행합니다.
<p>The equation is E = mc<sub>2</sub>.</p>
명시적으로 subscript 역할 지정 이 예시는 div 요소에 role=”subscript”를 사용하여 숫자 2를 아래 첨자로 명시적으로 지정한 예시입니다.
<div role="subscript">2</div>
superscript 역할은 웹 콘텐츠에서 텍스트를 위 첨자로 표시하는 역할을 합니다. 이 역할은 주로 수학적 지수, 상표 기호, 또는 특정 약어에서 사용되며, 텍스트가 일반 텍스트 라인 위로 이동하여 표시됩니다. HTML에서 <sup> 요소가 이 역할을 기본적으로 수행합니다.
W3C ARIA superscript
MDN Web Docs : sup element
UXKM : sup element
기본 설명
사용 시 주의사항
상속된 상태 및 속성
잘못된 예시 - 스타일링을 위한 잘못된 사용 이 예시는 단순히 텍스트 크기를 줄이고 위치를 올리는 방식으로 위 첨자 효과를 내고 있지만, 시멘틱 마크업을 사용하지 않았기 때문에 보조 기술이 이를 위 첨자로 인식하지 못합니다. sup 요소 또는 superscript 역할을 사용하는 것이 더 적절합니다.
<span style="vertical-align: super; font-size: smaller;">2</span>
(권장) 올바른 예시 - 시멘틱 마크업 사용 이 예시는 HTML의 <sup> 요소를 사용하여 “mc²”에서 숫자 2를 위 첨자로 표시하고 있습니다. <sup> 요소는 기본적으로 superscript 역할을 수행합니다.
<p>The equation for energy is E = mc<sup>2</sup>.</p>
명시적으로 superscript 역할 지정 이 예시는 div 요소에 role=”superscript”를 사용하여 숫자 2를 위 첨자로 명시적으로 지정한 예시입니다.
<div role="superscript">2</div>