요약 설명문서 구조 역할(Document Structure Roles)은 웹 페이지나 애플리케이션의 콘텐츠를 논리적이고 의미 있는 방식으로 구성하는 데 사용됩니다. 이 역할은 문서의 주요 부분을 정의하고, 보조 기술이 이 구조를 이해할 수 있도록 도와줍니다. 또한, 페이지를 효율적으로 탐색할 수 있도록 콘텐츠를 구조화하는 데 필수적입니다.
요약 설명
application역할은 웹 페이지의 특정 영역이 일반적인 웹 콘텐츠와는 다르게, 고도의 상호작용이 필요한 애플리케이션처럼 동작함을 보조 기술에 알리는 데 사용됩니다. 이 역할은 웹 페이지에서 데스크탑 애플리케이션과 유사한 상호작용을 제공하는 UI 요소에 사용되며, 사용자에게 더 복잡한 기능을 제공하기 위해 사용됩니다.
application 역할은 복잡한 상호작용을 요구하는 웹 애플리케이션의 특정 영역을 나타냅니다.
이 역할을 사용하면 보조 기술이 이 콘텐츠를 데스크탑 애플리케이션처럼 처리할 수 있게 되며,
사용자는 더 정교한 상호작용을 수행할 수 있습니다.
application 역할은 복잡한 기능이 필요한 웹 애플리케이션에만 사용해야 하며,
일반적인 웹 페이지나 단순 인터페이스에는 사용하지 않는 것이 좋습니다.
이는 사용자의 웹 탐색 경험을 보호하고, 불필요한 복잡성을 피하는 데 중요합니다.
application 역할을 사용하는 경우,
사용자가 애플리케이션 모드에서 필요한 상호작용 방법을 이해할 수 있도록 충분한 안내를 제공해야 합니다.
이를 통해 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
application 역할은 특정 기능이 복잡하고, 상호작용이 고도화된 영역에만 사용해야 합니다.
예를 들어, 사용자 입력과 피드백이 빈번하고 즉각적인 처리가 필요한 인터페이스에 사용됩니다.
일반적인 콘텐츠 탐색을 필요로 하는 웹 페이지나 단순한 인터페이스에는 application 역할을 사용하지 않는 것이 좋습니다.
이는 사용자가 웹 페이지와 상호작용하는 기본적인 방법을 방해할 수 있습니다.
application 역할을 사용하면 스크린 리더는 기본 탐색 모드를 비활성화하고,
애플리케이션 모드로 전환됩니다. 이로 인해 사용자는 일반적인 문서 탐색 키보드 명령을 사용할 수 없게 되므로,
필요한 경우 키보드 단축키와의 상호작용 방법을 안내해야 합니다.
애플리케이션 영역의 레이블을 참조합니다.
애플리케이션 영역에 대한 추가 설명을 제공합니다.
애플리케이션 내에서 실시간으로 업데이트되는 정보를 사용자에게 전달할 수 있습니다.
이 예시는 application 역할을 일반적인 웹 콘텐츠에 사용하고 있습니다.
application 역할은 복잡한 웹 애플리케이션 기능을 제공하는 영역에만 사용되어야 합니다.
단순한 정보 제공에는 적합하지 않습니다.
이 예시는 복잡한 상호작용이 필요한 스프레드시트 애플리케이션을 나타내며,
application 역할을 사용하여 사용자가 이 인터페이스를 데스크탑 애플리케이션처럼 사용할 수 있도록 설정했습니다.
사용자 지정 스프레드시트 UI를 application 역할과 함께 구현한 예시입니다.
사용자는 키보드를 사용하여 스프레드시트 셀 간을 이동할 수 있으며,
보조 기술은 이 영역을 일반적인 웹 페이지의 일부로 인식하지 않고, 애플리케이션처럼 처리합니다.
이 예시는 드로잉 애플리케이션을 구현한 것으로,
사용자에게 그리기 도구를 선택하고, 캔버스에 그림을 그릴 수 있는 기능을 제공합니다.
application 역할은 보조 기술이 이 영역을 복잡한 상호작용을 필요로 하는 애플리케이션으로 인식하게 합니다.
이 예시는 사용자가 다양한 도구를 사용하여 그래픽 작업을 수행할 수 있는 그래픽 에디터를 나타냅니다.
application 역할은 이 영역을 일반적인 웹 콘텐츠와 구분하여, 보조 기술이 이를 애플리케이션으로 인식하게 합니다.
요약 설명
article역할은 웹 페이지에서 독립적으로 구분될 수 있는 콘텐츠 블록을 나타냅니다. 이 콘텐츠 블록은 독립적으로 배포하거나 재사용할 수 있으며, 문서의 다른 부분과 구별되는 자체적인 의미를 가지고 있습니다. 예를 들어, 뉴스 기사, 블로그 포스트, 포럼의 글 등이 이에 해당됩니다.
article 역할은 웹 페이지에서 독립적으로 이해될 수 있는 콘텐츠를 정의하는 데 사용됩니다.
이 역할을 사용하면 보조 기술이 이 콘텐츠를 독립적인 문서로 처리할 수 있도록 도와줍니다.
가능하면 HTML5 시멘틱 요소인 <article>을 사용하여 독립적인 콘텐츠를 정의하는 것이 좋습니다.
이 방법은 문서의 의미를 명확히 하고, 접근성을 자연스럽게 향상시킵니다.
article 역할은 독립적인 의미를 가지는 콘텐츠에만 사용해야 하며,
문서의 다른 부분과 함께 이해되어야 하는 콘텐츠에는 적합하지 않습니다.
필요한 경우 aria-labelledby와 aria-describedby 속성을 사용해 콘텐츠의 제목과 설명을 명확히 제공하여,
보조 기술 사용자가 콘텐츠를 쉽게 이해할 수 있도록 해야 합니다.
article 역할은 독립적으로 읽히고 이해될 수 있는 콘텐츠에만 사용해야 합니다.
문서나 페이지의 일부로만 의미가 있는 콘텐츠에는 사용하지 않습니다.
가능하면 HTML5의 <article> 요소를 사용하여 시멘틱하게 콘텐츠를 정의하는 것이 좋습니다.
이는 보조 기술이 콘텐츠를 올바르게 인식하고 처리할 수 있도록 도와줍니다.
문서 내에서 중복되는 article 역할을 사용할 경우, 콘텐츠의 독립적인 의미를 잃을 수 있으므로 주의해야 합니다.
각각의 article은 고유한 의미를 가져야 합니다.
article의 제목을 지정하여 보조 기술이 이를 콘텐츠의 제목으로 식별하게 합니다. 이 속성은 콘텐츠의 제목 요소를 참조하도록 설정할 수 있습니다.
article의 설명을 제공하여 보조 기술이 이 콘텐츠의 목적이나 추가적인 설명을 사용자에게 전달할 수 있게 합니다.
article의 목적을 명확히 설명하는 레이블을 제공합니다.
이 속성은 article이 어떤 역할을 하는지 명확히 하여, 보조 기술 사용자가 이해하기 쉽게 합니다.
article 역할은 일반적으로 특정 상태를 상속받지 않지만,
필요에 따라 aria-live나 aria-busy 속성 등을 추가하여 콘텐츠가 동적으로 업데이트될 때 정보를 사용자에게 제공할 수 있습니다.
이 예시는 회사 소개를 나타내는 콘텐츠에 article 역할을 사용하고 있지만,
이 콘텐츠는 독립적으로 이해되기보다는 문서 전체와 연관된 설명입니다.
이 경우, article 역할보다는 다른 시멘틱 역할이나 일반적인 블록 요소를 사용하는 것이 적합합니다.
이 예시는 독립적인 뉴스 기사 또는 블로그 게시물로 읽힐 수 있는 콘텐츠에 article 역할을 적절히 사용하고 있습니다.
이 콘텐츠는 자체적으로 의미가 있으며, 다른 문맥에서도 이해될 수 있습니다.
또한, aria-labelledby 속성을 사용해 article의 제목을 보조 기술이 인식할 수 있도록 설정했습니다.
이 예시는 HTML5 시멘틱 요소인 <article>을 사용하여 블로그 게시물을 정의한 것입니다.
<article> 요소는 기본적으로 article 역할을 가지며,
aria-labelledby와 aria-describedby 속성을 통해 제목과 설명을 명확히 지정하여
보조 기술이 이 콘텐츠를 올바르게 처리할 수 있도록 돕습니다.
요약 설명
cell역할은 ARIA 문서 구조 역할 중에서 표(table)의 개별 셀을 나타내는 중요한 역할입니다. HTML의<td>(표의 데이터 셀)와<th>(표의 헤더 셀) 요소는 기본적으로cell역할을 수행하며, 이 역할은 표의 구조를 정의하고 각 셀이 데이터를 어떻게 표현하는지를 보조 기술에 설명하는 역할을 합니다.
cell 역할은 표의 각 셀을 시멘틱하게 정의하는 중요한 역할을 수행합니다.
<td>와 <th> 요소를 사용하여 데이터를 명확하게 구조화하고,
보조 기술이 이를 올바르게 해석할 수 있도록 돕습니다.
scope, headers, aria-colindex, aria-rowindex
등의 속성을 활용하여 표의 구조를 명확히 하고,
복잡한 표에서도 셀 간의 관계를 명확히 정의할 수 있습니다.
표의 각 셀을 정확하게 정의함으로써, 사용자가 표 데이터를 쉽게 탐색하고 이해할 수 있도록 돕는 중요한 도구입니다.
표의 셀을 정의할 때는 시멘틱한 마크업을 사용하여 표의 구조와 의미를 명확히 해야 합니다.
<th>와 <td> 요소를 적절하게 사용하고,
필요에 따라 scope 및 headers 속성을 추가하여 셀과 헤더 간의 관계를 명확히 정의하는 것이 중요합니다.
복잡한 표에서 aria-colindex, aria-rowindex,
aria-colspan, aria-rowspan과 같은 ARIA 속성을 활용하여,
보조 기술이 셀의 위치와 범위를 정확히 이해할 수 있도록 해야 합니다.
표의 셀에 대한 속성 설정 시 일관성을 유지하여, 사용자가 표를 쉽게 탐색하고 이해할 수 있도록 해야 합니다. 특히 복잡한 표의 경우, 일관성 있는 인덱스와 범위 설정이 중요합니다.
<th> 요소에 사용되어 해당 헤더 셀이 적용되는 셀의 범위를 지정합니다.
예를 들어, scope="col"은 열 헤더, scope="row"는 행 헤더를 나타냅니다.
<td> 요소에 사용되어 이 셀이 참조하는 헤더 셀의 id를 지정합니다.
이는 특히 복잡한 표에서 셀과 관련 헤더 간의 관계를 명확하게 설명하는 데 유용합니다.
ARIA 속성 중 하나로, 셀이 속한 열과 행의 인덱스를 지정하여 보조 기술이 표의 셀 위치를 정확히 이해할 수 있도록 합니다.
ARIA 속성으로, 셀이 가로 또는 세로로 몇 개의 셀을 병합하는지 설명합니다. 이는 복잡한 테이블 레이아웃에서 특히 유용합니다.
이 예시는 <th>와 <td> 요소를 사용하여 각각의 셀을 정의하고 있습니다.
<th> 요소는 열 헤더로 설정되며, scope="col" 속성을 통해 명확히 정의됩니다.
이 구조는 ARIA 문서 구조 역할에서 기본적인 cell 역할을 수행합니다.
이 예시는 <thead>와 <tbody> 요소를 사용하여 복잡한 표 구조를 시멘틱하게 나누고 있습니다.
<th> 요소는 행과 열 헤더로 사용되며,
각 데이터 셀(td)은 headers 속성을 사용해 관련 헤더를 참조합니다.
이 예시는 복잡한 표에서 각 셀의 정확한 위치를 나타내기 위해
aria-colindex와 aria-rowindex 속성을 사용하고 있습니다.
이러한 속성들은 보조 기술이 셀의 위치를 올바르게 파악할 수 있도록 도와줍니다.
요약 설명
columnheader역할은 HTML 테이블에서 열의 제목을 나타내는 헤더 셀을 정의합니다. 이 역할은 주로<th>요소와 함께 사용되며, 특정 열의 데이터를 설명하거나 요약하는 기능을 합니다.columnheader역할을 통해 보조 기술은 해당 열이 무엇을 나타내는지 사용자에게 명확하게 전달할 수 있습니다.W3C ARIA columnheader
MDN ARIA columnheader
UXKM : th element
columnheader 역할은 HTML 테이블에서 열의 제목을 나타내며, <th> 요소와 함께 사용됩니다.
이 역할은 테이블의 열이 나타내는 데이터 유형을 설명하고, 보조 기술이 이를 올바르게 해석하도록 돕습니다.
<th> 요소와 scope, aria-sort, aria-colspan 등의 속성을 적절히 사용하여,
열 헤더의 역할과 상태를 명확히 정의하는 것이 중요합니다.
테이블의 각 열을 시멘틱하게 정의함으로써, 사용자가 테이블 데이터를 쉽게 이해하고 탐색할 수 있도록 돕는 중요한 도구입니다. 표의 일관성과 명확성을 유지하여 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
<th> 요소와 scope="col" 속성을 함께 사용하여 열 헤더의 역할을 명확히 정의하는 것이 중요하며,
보조 기술이 표의 구조를 이해하는 데 도움을 줍니다.
열 헤더가 정렬 가능하다면, aria-sort 속성을 사용해 현재 열의 정렬 상태를 명확히 지정하여,
사용자들이 테이블의 데이터 정렬 상태를 쉽게 파악할 수 있도록 합니다.
aria-colspan 및 aria-rowspan 속성을 사용해 병합된 셀의 범위를 명확히 정의해야 합니다.
이는 복잡한 테이블에서 셀 간의 관계를 이해하는 데 필수적입니다.
<th> 요소에서 사용되며, 열 헤더가 적용되는 범위를 정의합니다.
예를 들어, scope="col"은 열 전체에 적용되는 헤더임을 나타냅니다.
정렬 가능한 열 헤더에 사용되며, 열이 오름차순(ascending), 내림차순(descending), 정렬되지 않음(none), 또는 기타 사용자 정의 정렬(other) 상태 중 어떤 상태인지 지정합니다. 이는 보조 기술이 현재 테이블의 정렬 상태를 사용자에게 전달하는 데 도움을 줍니다.
열 헤더가 가로로 병합된 열의 수를 지정합니다.
열 헤더가 세로로 병합된 행의 수를 지정합니다.
이 예시는 열 제목을 나타내기 위해 <th> 요소를 사용하고 있으며,
scope="col" 속성을 통해 열 전체에 적용되는 헤더임을 명확히 하고 있습니다.
이 구조는 ARIA에서 columnheader 역할을 암시적으로 수행합니다.
이 예시는 aria-sort="ascending" 속성을 사용하여 현재 열이 오름차순으로 정렬되어 있음을 나타냅니다.
이는 보조 기술이 현재 열의 정렬 상태를 사용자에게 전달하는 데 유용합니다.
이 예시는 aria-colspan 속성을 사용해 첫 번째 행의 "Employee Detail" 헤더 셀이 두 개의 열을 병합하고 있음을 명확히 나타냅니다.
보조 기술은 이 정보를 바탕으로 셀이 포함하는 열의 범위를 이해할 수 있습니다.
요약 설명
definition역할은 웹 콘텐츠에서 용어의 정의를 제공하는 콘텐츠를 나타냅니다. 이 역할은 일반적으로 텍스트 내에서 중요한 용어의 의미를 명확하게 설명할 때 사용됩니다.definition역할은 보조 기술이 특정 용어의 정의를 사용자에게 올바르게 전달할 수 있도록 도와줍니다.
용어의 정의를 제공할 때는 시멘틱하게 <dfn> 요소를 사용하여,
정의가 명확히 구분되도록 하는 것이 중요합니다.
용어의 정의는 문서 내에서 일관되고 명확하게 제공되어야 하며, 이를 통해 사용자가 용어를 쉽게 이해하고 문서의 내용을 효과적으로 학습할 수 있도록 해야 합니다.
용어의 정의를 나타낼 때는 <dfn> 요소를 사용하여 용어를 정의하는 콘텐츠를 명확히 구분하는 것이 중요합니다.
용어의 정의는 간결하고 명확하게 작성되어야 하며, 사용자가 해당 용어를 이해하는 데 도움이 되어야 합니다.
문서 내에서 동일한 용어에 대해 일관된 정의를 제공하여, 사용자 경험의 일관성을 유지하는 것이 중요합니다.
기본적으로 상속된 상태나 속성은 없습니다.
definition 역할은 용어의 정의를 시멘틱하게 나타내기 위한 역할이므로, 추가적인 ARIA 상태나 속성은 필요하지 않습니다.
이 예시는 <dfn> 요소를 사용하여 "HyperText" 용어의 정의를 제공하고 있습니다.
보조 기술은 이 요소를 통해 "HyperText"가 정의되고 있음을 사용자에게 전달합니다.
<dfn> 요소를 사용하여 "API" 용어를 정의하고 있으며,
링크를 통해 동일한 정의로 참조할 수 있도록 설정한 예시입니다.
이는 문서 내에서 용어의 의미를 명확하게 구분하는 데 도움이 됩니다.
이 예시는 학술 문서에서 사용되는 중요한 용어를 정의하는 예시입니다.
<dfn> 요소는 용어 "엔트로피"의 정의를 제공하며, 독자가 문서의 내용을 더 잘 이해할 수 있도록 돕습니다.
요약 설명
directory역할은 트리 구조로 조직된 목차나 파일 목록과 같은 계층적인 항목의 집합을 나타냅니다. 이 역할은 파일 시스템, 카탈로그, 탐색 메뉴와 같은 콘텐츠에서 사용될 수 있습니다.directory역할은 보조 기술이 이 목록을 탐색할 때, 항목 간의 계층 구조를 이해할 수 있도록 돕습니다.
directory 역할은 트리 구조로 구성된 항목의 집합을 나타내며,
사용자가 이러한 구조를 쉽게 탐색할 수 있도록 돕습니다.
시멘틱 마크업에서는 기본적인 HTML 요소를 사용하여 이 역할을 자연스럽게 수행하며,
비표준 마크업에서는 다른 HTML 요소에 role="directory"와 관련 ARIA 속성을 사용해 명시적으로 정의할 수 있습니다.
계층 구조를 명확히 정의하고,
aria-expanded와 aria-level 속성을 사용하여 항목 간의 관계를 정확히 설정하는 것이 중요합니다.
시멘틱 마크업을 사용하면 자연스럽게 보조 기술이 이를 인식할 수 있으며,
비표준 마크업에서는 ARIA 속성을 적절히 활용해야 합니다.
directory 역할을 사용하여 복잡한 목록 구조를 시멘틱하게 정의함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 트리 구조를 보다 쉽게 탐색하고, 필요한 정보를 효율적으로 찾을 수 있습니다.
directory 역할을 사용할 때는 각 항목의 계층 구조를 명확히 정의해야 합니다.
이를 통해 보조 기술이 목록을 올바르게 해석하고, 사용자에게 효율적인 탐색 경험을 제공합니다.
aria-expanded 속성을 사용해 항목의 확장 상태를 명확히 지정해야 합니다.
사용자가 목록을 탐색할 때, 현재 어떤 항목이 확장되어 있는지 알 수 있도록 해야 합니다.
directory 역할은 중첩된 목록 구조에서 사용될 때 효과적입니다.
중첩된 항목은 계층 구조를 명확히 나타내야 하며, aria-level 속성을 적절히 설정해야 합니다.
디렉토리 항목이 확장되어 있는지 여부를 나타냅니다.
true로 설정하면 항목이 확장되어 하위 항목이 표시되고, false로 설정하면 하위 항목이 숨겨집니다.
디렉토리 항목이 트리 구조에서 어느 계층에 속하는지를 지정합니다. 이 속성을 사용하여 보조 기술이 항목 간의 계층 구조를 이해할 수 있도록 합니다.
이 예시는 <div> 요소를 사용하여 디렉토리 구조를 표현했지만,
role="directory"와 같은 ARIA 속성 없이 사용되었습니다.
이로 인해 보조 기술이 이 구조를 올바르게 해석하지 못할 수 있습니다.
이 예시는 <div> 요소에 role="directory"를 사용하여 디렉토리 구조를 명시적으로 나타냅니다.
aria-expanded와 aria-level 속성을 사용해 항목의 계층 구조와 확장 상태를 지정하고 있습니다.
이 예시는 기본적인 디렉토리 구조를 시멘틱한 <ul> 및 <li> 요소를 사용하여 나타내고 있습니다.
이 구조는 기본적으로 보조 기술이 올바르게 인식할 수 있습니다.
요약 설명
document역할은 웹 페이지에서 특정 섹션이 독립된 문서나 주요 콘텐츠 블록을 나타내도록 지정하는 데 사용됩니다. 이 역할은 웹 애플리케이션의 일부가 아닌 문서형 콘텐츠(예: 텍스트, 이미지, 비디오 등)를 설명하는 데 유용합니다.document역할은 주로 전체 페이지가 아닌 특정 섹션이 문서로서 해석되도록 할 때 사용됩니다.
document 역할은 웹 애플리케이션 내 특정 섹션이 독립된 문서로서 해석되어야 할 때 유용합니다.
이를 통해 보조 기술은 해당 섹션을 문서 탐색 모드에서 처리할 수 있습니다.
document 역할은 전체 웹 페이지가 아닌, 독립된 문서로 간주해야 하는 특정 섹션에만 사용해야 합니다.
이 역할은 시멘틱하게 문서의 범위를 명확히 지정하고, 보조 기술이 이를 올바르게 인식할 수 있도록 해야 합니다.
document 역할을 사용하여 웹 애플리케이션 내에서 중요한 문서 콘텐츠를 명확히 지정함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 문서 콘텐츠를 더 쉽게 탐색하고, 필요한 정보를 효율적으로 찾을 수 있습니다.
document 역할은 주로 웹 애플리케이션 내에서 독립적인 문서 콘텐츠를 설명할 때 사용됩니다.
전체 웹 페이지에 이 역할을 사용하는 것은 적절하지 않습니다.
이 역할을 사용하면 보조 기술은 문서 탐색 모드를 활성화하여 콘텐츠를 더 쉽게 탐색할 수 있습니다.
document 역할을 사용할 때는 정확하게 해당 섹션만 독립된 문서로 지정해야 합니다.
잘못된 위치에 사용하면 사용자 경험에 혼란을 줄 수 있습니다.
이 속성은 문서의 제목을 지정하여 보조 기술이 이를 문서의 주요 제목으로 식별하도록 합니다.
이 속성은 문서에 대한 설명을 제공하여 보조 기술이 이 콘텐츠의 목적이나 추가 정보를 사용자에게 전달할 수 있게 합니다.
이 예시는 role="document"를 전체 웹 애플리케이션에 적용했으나,
이 역할은 특정 섹션을 독립된 문서로 나타낼 때 사용해야 하므로 부적절합니다.
이 예시는 <div> 요소에 role="directory"를 사용하여 디렉토리 구조를 명시적으로 나타냅니다.
aria-expanded와 aria-level 속성을 사용해 항목의 계층 구조와 확장 상태를 지정하고 있습니다.
이 예시는 시멘틱 마크업을 사용하여 <article> 요소로 독립된 문서 콘텐츠를 나타냅니다.
보조 기술은 이 콘텐츠를 문서로 인식하고 탐색할 수 있습니다.
요약 설명
feed역할은 소셜 미디어 타임라인, 뉴스 피드, 블로그 목록과 같이 지속적으로 업데이트되는 항목의 집합을 나타냅니다. 이 역할은 보조 기술이 이러한 콘텐츠의 특성을 이해하고, 사용자에게 적절히 전달할 수 있도록 돕습니다.feed역할은 주로 소셜 네트워크, 뉴스 애그리게이터, 블로그 플랫폼에서 사용됩니다.
feed 역할은 지속적으로 업데이트되는 콘텐츠 목록을 나타내며, 사용자가 이러한 동적 콘텐츠를 더 쉽게 탐색할 수 있도록 돕습니다.
이 역할은 보조 기술이 피드의 특성을 이해하고, 새로운 항목이 추가될 때 이를 사용자에게 전달할 수 있도록 설계되었습니다.
feed 역할은 동적으로 갱신되는 콘텐츠에만 사용해야 하며,
각 피드 항목에 article 역할을 지정하여 보조 기술이 이를 독립적인 콘텐츠로 인식할 수 있도록 해야 합니다.
feed 역할을 사용하여 동적인 콘텐츠를 명확히 지정함으로써, 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 피드를 쉽게 탐색하고, 최신 정보를 놓치지 않고 확인할 수 있습니다.
feed 역할은 지속적으로 갱신되는 콘텐츠 목록에 사용되어야 합니다.
사용자가 피드 내에서 항목을 쉽게 탐색하고, 새롭게 추가된 콘텐츠를 인식할 수 있도록 해야 합니다.
aria-live와 aria-busy 속성을 사용해 피드가 업데이트 중일 때 사용자에게 이를 명확히 알릴 수 있어야 합니다.
피드 내의 각 항목에는 article 역할을 지정하여, 보조 기술이 각 항목을 독립적인 콘텐츠로 인식하고 처리할 수 있도록 해야 합니다.
피드가 업데이트 중임을 나타내는 속성입니다. true로 설정되면 피드가 갱신 중임을 의미하며,
사용자가 새로운 콘텐츠가 추가되고 있음을 알 수 있습니다.
피드의 실시간 업데이트를 사용자에게 알릴 수 있도록 설정합니다.
polite나 assertive로 설정하여 피드 항목이 업데이트될 때 보조 기술이 이를 어떻게 처리할지 지정할 수 있습니다.
피드에서 어떤 종류의 변경 사항(추가, 삭제, 텍스트 변경 등)을 보조 기술이 사용자에게 알릴지 지정합니다.
이 예시는 role="feed"를 단순한 콘텐츠 블록에 적용했으나, 이 블록은 지속적으로 갱신되는 동적 콘텐츠가 아니므로 부적절합니다.
feed 역할은 주기적으로 업데이트되는 콘텐츠에만 사용해야 합니다.
이 예시는 role="feed"를 적절하게 사용하여 동적으로 갱신되는 콘텐츠 목록을 나타내고 있습니다.
또한, aria-live="polite"와 aria-relevant="additions" 속성을 사용해 피드가 업데이트될 때 사용자에게 알림을 제공합니다.
<div> 요소에 role="feed"를 지정하여 피드 역할을 명시적으로 나타냅니다.
각 피드 항목은 role="article"을 사용해 독립적인 콘텐츠로 처리됩니다.
aria-busy="true"로 설정하여 피드가 업데이트 중임을 알립니다.
시멘틱 마크업을 사용하여 <section> 요소에 role="feed"를 지정한 예시입니다.
각 피드 항목은 <article> 요소로 구성되어 있어 보조 기술이 이를 독립적인 콘텐츠로 처리할 수 있도록 합니다.
요약 설명
figure역할은 이미지, 차트, 삽화, 코드 블록 등 독립적으로 설명할 수 있는 콘텐츠의 묶음을 나타냅니다. 이 역할은 콘텐츠가 본문 내의 특정 부분과 관련이 있지만, 독립적으로 이해될 수 있는 것을 나타낼 때 사용됩니다. 일반적으로figcaption요소를 사용하여 설명(캡션)을 포함하며, 이 설명은figure요소에 속한 콘텐츠를 보충하는 데 사용됩니다.
figure 역할은 이미지, 그래픽, 코드 블록 등 본문과 관련된 시각적 콘텐츠를 묶어주는 데 사용됩니다.
figure 요소는 본문 흐름과 독립적으로 재배치될 수 있으며, 참조 목적으로 사용됩니다.
보조 기술이 이 콘텐츠를 별도로 인식하여 사용자에게 전달할 수 있게 돕습니다.
figcaption 요소는 figure 내에 포함된 콘텐츠를 설명하는 텍스트를 제공하며,
보조 기술은 이를 사용하여 콘텐츠의 의미를 사용자에게 전달합니다.
figure 요소는 시각적 콘텐츠나 코드 블록을 그룹화하고,
figcaption 요소를 사용해 설명을 제공하여 콘텐츠의 의미를 명확히 해야 합니다.
figure 역할을 사용하여 콘텐츠를 시멘틱하게 그룹화함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 시각적 콘텐츠의 맥락을 쉽게 이해하고, 필요한 정보를 효율적으로 찾을 수 있습니다.
시각적 콘텐츠나 코드 블록을 그룹화할 때는 <figure> 요소를 사용하여 시멘틱하게 표현하는 것이 중요합니다.
이는 콘텐츠의 의미를 명확히 하고, 보조 기술이 이를 올바르게 해석할 수 있도록 돕습니다.
figcaption 요소를 사용하여 figure 내 콘텐츠를 설명하는 캡션을 제공해야 합니다.
이는 콘텐츠의 맥락을 명확히 하여, 사용자가 내용을 이해하는 데 도움이 됩니다.
figure 요소 내 콘텐츠는 본문 흐름과 독립적으로 이해될 수 있어야 하며, 이를 통해 다양한 위치에서 참조될 수 있습니다.
기본적으로 상속된 상태나 속성은 없습니다.
figure 역할은 콘텐츠를 시멘틱하게 그룹화하는 역할을 하므로, 추가적인 ARIA 상태나 속성이 필요하지 않습니다.
이 예시는 <div> 요소를 사용하여 이미지를 설명하지만, 이 콘텐츠는 본문과 독립적으로 취급되지 않으며,
보조 기술이 이를 독립적인 콘텐츠로 인식하지 못할 수 있습니다. figure 요소를 사용하는 것이 더 적절합니다.
이 예시는 role="feed"를 적절하게 사용하여 동적으로 갱신되는 콘텐츠 목록을 나타내고 있습니다.
aria-live="polite"와 aria-relevant="additions"
속성을 사용해 피드가 업데이트될 때 사용자에게 알리도록 설정했습니다.
이 예시는 <figure> 요소를 사용하여 콘텐츠를 그룹화하고,
figcaption 요소를 사용하여 설명을 제공합니다.
이 구조는 시멘틱하게 올바르며, 보조 기술이 이 콘텐츠를 올바르게 해석할 수 있도록 합니다.
이 예시는 <div> 요소에 role="figure"를 사용하여 figure 역할을 명시적으로 지정합니다.
<div> 요소를 사용하여 설명 텍스트를 제공하고 있지만, figcaption 요소를 사용하는 것이 더 적절합니다.
요약 설명
generic역할은 특정 시멘틱한 의미를 가지지 않는 일반적인 컨테이너를 나타냅니다. 이 역할은 기본적으로 아무 의미도 부여되지 않는 요소를 설명하며, HTML의 기본적인<div>와<span>요소와 유사한 역할을 합니다.generic역할은 보조 기술이 해당 요소에 특별한 시멘틱이 부여되지 않았음을 이해하도록 돕습니다.
generic 역할은 시멘틱적으로 특별한 의미가 없는 요소에 할당됩니다.
레이아웃 구성이나 스타일링을 위해 사용되며,
보조 기술에서는 이를 단순한 구조적 컨테이너로 인식해 특별한 시멘틱 역할을 부여하지 않습니다.
generic 역할은 대부분의 경우 명시적으로 지정할 필요가 없으며,
기본적으로 시멘틱한 의미가 없는 요소에 암시적으로 적용됩니다.
generic 역할은 기본적으로 HTML의 <div>나 <span> 요소에 적용되며,
특별한 의미를 부여할 필요가 없는 경우에 사용됩니다.
대부분의 경우 명시적으로 지정할 필요는 없으며, 가능한 경우 시멘틱한 HTML 요소를 사용하는 것이 좋습니다.
시멘틱한 의미가 중요한 요소에 generic 역할을 부여하는 것은 피해야 하며,
문서의 구조와 의미를 명확히 하는 데 중점을 두어야 합니다. 이를 통해 사용자 경험과 접근성을 향상시킬 수 있습니다.
generic 역할은 콘텐츠에 특별한 시멘틱 의미를 부여할 필요가 없는 경우에 사용됩니다.
레이아웃이나 스타일링을 위한 단순한 컨테이너를 만들 때 적합합니다.
대부분의 경우 <div>나 <span> 같은 요소는 자동으로 generic 역할을 수행하므로,
명시적으로 role="generic"을 지정할 필요가 없습니다.
가능한 경우, generic 역할보다는 시멘틱한 HTML 요소를 사용하여 문서 구조와 의미를 명확히 하는 것이 좋습니다.
기본적으로 상속된 상태나 속성은 없습니다.
generic 역할은 의미 없는 일반적인 컨테이너를 나타내므로, 추가적인 ARIA 상태나 속성이 필요하지 않습니다.
이 예시는 header 요소에 role="generic"을 지정하여 시멘틱한 의미를 제거했으나,
header 요소는 시멘틱하게 중요한 역할을 하므로 generic 역할을 사용하지 말아야 합니다.
이 예시는 header 요소에 시멘틱한 역할을 유지하여 웹 페이지의 구조와 의미를 명확히 합니다.
이 경우, generic 역할을 사용하지 않고 기본 시멘틱 역할을 유지하는 것이 적절합니다.
이 예시는 <div> 요소를 사용하여 단순히 레이아웃을 구성하고 있습니다.
이 경우, div는 암시적으로 generic 역할을 수행합니다.
요약 설명
group역할은 여러 요소를 논리적으로 묶어 하나의 그룹으로 취급하는 데 사용됩니다. 이 역할은 보조 기술이 이러한 요소들이 하나의 논리적 단위로 묶여 있음을 인식하게 하여, 사용자에게 이를 일관되게 전달할 수 있도록 합니다.group>역할은 주로 폼 요소, 메뉴 항목, 또는 기타 연관된 컨텐츠를 그룹화할 때 사용됩니다.W3C ARIA group
MDN ARIA group
UXKM : fieldset element
UXKM : legend element
group 역할은 연관된 요소들을 논리적으로 그룹화해 보조 기술이 이를 하나의 단위로 인식하도록 돕습니다.
주로 라디오 버튼, 체크박스 그룹, 메뉴 항목, 대화 상자 내 섹션 등 관련된 컨트롤을 그룹화할 때 사용됩니다.
group 역할은 논리적으로 관련된 요소들을 묶는 데 사용해야 하며, 불필요한 경우에는 사용하지 않는 것이 좋습니다.
시멘틱한 HTML 요소를 사용하는 것이 가능하다면, 이를 우선적으로 사용해야 합니다.
group 역할을 통해 웹 페이지의 구조를 명확하게 하고, 사용자 경험과 접근성을 향상시킬 수 있습니다.
이를 통해 사용자는 그룹화된 콘텐츠를 쉽게 탐색하고 이해할 수 있습니다.
group 역할은 연관된 요소들을 묶어서 하나의 논리적인 단위로 처리해야 할 때 사용됩니다.
이를 통해 보조 기술이 요소들 간의 관계를 이해하고 사용자에게 전달할 수 있습니다.
aria-labelledby와 aria-describedby 속성을 사용해 그룹의 제목과 설명을 제공하면,
보조 기술이 이를 올바르게 사용자에게 전달할 수 있습니다.
시멘틱하게 그룹화가 필요한 경우에는,
시멘틱 HTML 요소(예: <fieldset>과 <legend> 조합)를 사용하는 것이 좋습니다.
불필요하게 group 역할을 사용하는 것은 피해야 합니다.
그룹의 제목을 지정하여, 보조 기술이 이 그룹의 제목을 그룹과 연관지어 사용자에게 전달할 수 있게 합니다.
그룹에 대한 추가 설명을 제공하여, 보조 기술이 이 설명을 그룹과 연관지어 사용자에게 전달할 수 있게 합니다.
이 예시는 논리적인 그룹화가 필요하지 않은 콘텐츠에 role="group"을 사용했습니다.
불필요한 그룹화는 보조 기술의 해석을 혼란스럽게 할 수 있으므로 피해야 합니다.
이 예시는 네비게이션 메뉴를 <div> 요소에 role="group"을 사용해 논리적으로 그룹화한 예시입니다.
aria-labelledby 속성을 통해 그룹의 제목을 지정하여,
보조 기술이 이 정보를 사용자에게 전달할 수 있게 합니다.
이 예시는 <fieldset>과 <legend> 요소를 사용하여 라디오 버튼을 그룹화하고 있습니다.
보조 기술은 이 그룹을 논리적 단위로 인식하여 사용자에게 전달합니다.
이 예시는 <div> 요소에 role="group"을 지정하고,
aria-labelledby 속성을 사용해 그룹의 제목을 연결한 예시입니다.
<fieldset>을 사용할 수 없는 상황에서 유용합니다.
요약 설명
heading역할은 웹 페이지나 애플리케이션의 구조를 정의하는 데 사용되는 제목을 나타냅니다. 이 역할은 콘텐츠의 계층적 구조를 명확히 하여, 보조 기술이 문서의 내용과 구조를 쉽게 파악할 수 있도록 돕습니다. HTML에서<h1>부터<h6>까지의 제목 요소가 기본적으로 이 역할을 수행합니다.
heading 역할은 콘텐츠의 주요 섹션을 설명하거나 요약하는 제목을 나타내며,
문서나 애플리케이션의 구조를 이해하는 데 중요한 역할을 합니다.
HTML의 제목 요소(<h1> ~ <h6>)에는 자동으로 적용되지만,
필요시 다른 요소에도 지정할 수 있습니다.
시멘틱한 제목 요소(<h1> ~ <h6>)를 사용하여 문서의 구조를 명확히 하고,
필요할 경우 다른 요소에 role="heading"과 aria-level 속성을 지정할 수 있습니다.
계층 구조는 일관되게 유지해야 합니다.
heading 역할을 통해 웹 페이지의 구조를 명확하게 정의함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 콘텐츠를 쉽게 탐색하고, 문서의 흐름을 이해할 수 있습니다.
가능한 경우, 시멘틱한 HTML 제목 요소(<h1> ~ <h6>)를 사용하는 것이 좋습니다.
이들은 자동으로 heading 역할을 수행하며, 문서의 구조를 명확히 합니다.
제목 요소나 heading 역할을 사용할 때, aria-level 속성을 통해 문서의 계층 구조를 일관되게 유지해야 합니다.
올바른 계층 구조는 보조 기술이 콘텐츠를 정확하게 이해하고 전달하는 데 필수적입니다.
heading 역할은 중요하지 않은 텍스트나 단락에 사용하지 않도록 주의해야 합니다.
제목의 의미가 있는 콘텐츠에만 사용해야 합니다.
이 속성은 제목의 계층 구조를 나타냅니다. 1에서 6까지의 숫자로 설정할 수 있으며,
이는 HTML의 <h1>에서 <h6>까지와 대응됩니다.
예를 들어, aria-level="1"은 가장 높은 수준의 제목을 나타냅니다.
이 예시는 제목 요소의 계층 구조가 일관되지 않아, 보조 기술이 문서의 구조를 올바르게 해석하는 데 어려움을 겪을 수 있습니다. 제목의 순서를 일관되게 유지해야 합니다.
이 예시는 HTML 제목 요소(<h1>, <h2>)를 사용하여 문서의 계층 구조를 정의하고 있습니다.
이 구조는 보조 기술이 문서의 내용을 쉽게 탐색하고 이해하는 데 도움을 줍니다.
이 예시는 <div> 요소에 role="heading"과 aria-level
속성을 사용하여 제목의 계층 구조를 정의하고 있습니다.
이는 시멘틱한 제목 요소를 사용할 수 없는 상황에서 유용합니다.
요약 설명
img역할은 웹 페이지에서 이미지 콘텐츠를 나타내는 데 사용됩니다. 이 역할은 시각적 정보를 전달하는 이미지를 설명하며, 보조 기술이 이러한 이미지를 사용자에게 올바르게 전달할 수 있도록 돕습니다. HTML의<img>요소는 자동으로img역할을 수행합니다. 이 역할은 특히 접근성 측면에서 중요한 역할을 하며, 적절한 대체 텍스트(alt텍스트)를 제공하는 것이 핵심입니다.
img 역할은 이미지를 나타내며, HTML의 <img> 요소에 암시적으로 적용됩니다.
그러나 다른 요소(예: CSS 배경 이미지가 없는 <div> 등)를 이미지로 처리할 때 이 역할을 명시적으로 지정할 수 있습니다.img 역할을 통해 이미지의 의미나 용도를 사용자에게 전달하며,
이때 대체 텍스트(alt 텍스트)가 중요한 역할을 합니다.
대체 텍스트는 이미지의 내용이나 기능을 설명하여 모든 사용자가 이미지의 의미를 이해할 수 있도록 돕습니다.
aria-hidden="true"를 사용하거나,
빈 대체 텍스트(alt="")를 지정하여 보조 기술이 이를 무시하도록 해야 합니다.
모든 <img> 요소에 의미 있는 alt 속성을 제공하고,
비표준 마크업에서 이미지를 사용할 때는 role="img"와 aria-label을 명시적으로 지정해야 합니다.
장식용 이미지는 사용자에게 불필요한 정보를 제공하지 않도록 해야 합니다.
img 역할을 통해 웹 페이지의 시각적 콘텐츠를 명확하게 정의하고,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 시각적 정보를 효과적으로 이해하고, 필요한 내용을 효율적으로 탐색할 수 있습니다.
모든 <img> 요소에 적절한 alt 속성을 제공해야 합니다.
이 속성은 이미지의 의미나 기능을 설명하며, 보조 기술이 이를 사용자에게 전달할 수 있도록 돕습니다.
시각적 정보가 중요하지 않은 장식용 이미지는 aria-hidden="true"를 사용하거나,
빈 대체 텍스트(alt="")를 지정하여 보조 기술이 이를 무시하도록 해야 합니다
<img> 요소 대신 다른 요소(예: CSS로 배경 이미지를 설정한 <div>)에 이미지를 사용할 때는,
role="img"와 aria-label 또는 aria-labelledby를 사용해 이미지의 의미를 명확히 전달해야 합니다.
이미지의 대체 텍스트를 지정하여, 보조 기술이 이 텍스트를 사용자에게 전달할 수 있도록 합니다.
이미지에 설명을 추가할 수 있는 속성으로,
alt 속성 대신 사용할 수 있지만, 대부분의 경우 alt 속성이 선호됩니다.
장식용 이미지나 사용자에게 제공될 필요가 없는 이미지를 숨길 때 사용됩니다.
이 예시는 중요한 다이어그램 이미지를 대체 텍스트 없이 사용하고 있으며,
이는 접근성에 부정적인 영향을 미칩니다. 모든 중요한 이미지에는 적절한 alt 속성을 제공해야 합니다.
이 예시는 중요한 다이어그램 이미지를 설명하는 대체 텍스트와 함께 사용하여, 보조 기술이 이미지를 사용자에게 올바르게 전달할 수 있도록 했습니다.
이 예시는 CSS 배경 이미지를 사용한 <div> 요소에
role="img"와 aria-label을 사용해 이미지의 의미를 지정하고 있습니다.
이는 <img> 요소를 사용할 수 없는 상황에서 유용합니다.
이 예시는 장식용 이미지를 나타내며,
alt=""와 aria-hidden="true"를 사용하여 보조 기술이 이 이미지를 무시하도록 설정했습니다.
이로 인해 사용자는 불필요한 시각적 정보에 방해받지 않습니다.