문서 구조 역할(Document Structure Roles)은 웹 페이지나 애플리케이션의 콘텐츠를 논리적이고 의미 있는 방식으로 구성하는 데 사용됩니다.
이 역할은 문서의 주요 부분을 정의하고, 보조 기술이 이 구조를 이해할 수 있도록 도와줍니다.
또한, 페이지를 효율적으로 탐색할 수 있도록 콘텐츠를 구조화하는 데 필수적입니다.
list 역할은 항목들이 모여 있는 목록을 나타내는 데 사용됩니다.
이 역할은 항목들 간의 관계를 정의하고, 보조 기술이 이러한 항목들이 논리적으로 그룹화되어 있음을 인식할 수 있도록 돕습니다.
HTML에서 <ul>, <ol>, <dl> 요소가 기본적으로 list 역할을 수행합니다.
list 역할은 항목들의 집합을 의미하며, 목록 구조를 정의하는 데 사용됩니다. 이는 보조 기술이 목록을 그룹으로 인식하고, 항목들 간의 관계를 올바르게 전달할 수 있도록 합니다.
이 역할은 주로 <ul>(비순서형 목록), <ol>(순서형 목록), <dl>(정의 목록) 요소에서 자동으로 적용됩니다.
list 역할은 다른 요소에 적용할 수 있으며, 해당 요소가 목록처럼 동작하도록 할 수 있습니다.
적절한 사용
시멘틱한 HTML 목록 요소(<ul>, <ol>, <dl>)를 사용하여 목록을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="list"와 role="listitem"을 명시적으로 지정해야 합니다.
목록 구조는 일관되게 유지되어야 하며, 불필요한 경우에 list 역할을 사용하지 않는 것이 좋습니다.
중요한 점
list 역할을 통해 웹 페이지의 구조를 명확하게 정의함으로써, 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 목록을 쉽게 탐색하고, 항목들 간의 관계를 명확히 이해할 수 있습니다.
사용 시 주의사항
시멘틱 마크업 우선 사용
가능한 경우, 시멘틱한 HTML 목록 요소(<ul>, <ol>, <dl>)를 사용하여 목록을 정의하는 것이 좋습니다.
이 요소들은 자동으로 list 역할을 수행하며, 문서의 구조를 명확하게 정의합니다.
일관된 구조 유지
목록을 정의할 때는 일관된 구조를 유지하여, 보조 기술이 목록 항목 간의 관계를 명확하게 인식할 수 있도록 해야 합니다.
목록 항목 정의
list 역할과 함께 listitem 역할을 사용하여 목록 항목을 명확하게 정의해야 합니다.
상속된 상태 및 속성
aria-labelledby
목록의 제목을 지정하여, 보조 기술이 목록을 사용자에게 명확하게 설명할 수 있도록 돕습니다.
aria-describedby
목록에 대한 추가 설명을 제공하여, 보조 기술이 이 설명을 목록과 연관지어 사용자에게 전달할 수 있게 합니다.
예시
잘못된 예시 - 목록 항목에 listitem 역할 누락
이 예시는 listitem 역할을 명시하지 않아 보조 기술이 목록 항목을 올바르게 인식하지 못할 수 있습니다.
목록 항목에는 반드시 listitem 역할을 지정해야 합니다.
올바른 예시 - 일관된 목록 구조 유지
이 예시는 role="list"와 role="listitem"을 사용하여 목록과 목록 항목을 명확하게 정의하고,
aria-labelledby 속성으로 목록의 제목을 지정하여 보조 기술이 목록을 올바르게 설명할 수 있습니다.
(권장) 시멘틱 마크업에서의 기본 사용
이 예시는 HTML의 <ul> 요소를 사용하여 비순서형 목록을 정의하고 있습니다.
각 항목은 <li> 요소로 표시되며, 이 구조는 자동으로 list와 listitem 역할을 수행합니다.
명시적으로 list 역할 지정 예시
이 예시는 <div> 요소에 role="list"를 지정하고,
각 항목에 role="listitem"을 사용하여 비표준 마크업에서 목록을 정의한 예시입니다.
이는 시멘틱한 목록 요소를 사용할 수 없는 상황에서 유용합니다.
listitem 역할
요약 설명
listitem 역할은 목록 내의 개별 항목을 나타냅니다.
이 역할은 항목들이 논리적으로 그룹화된 list 요소 내에서 사용되며,
보조 기술이 각 항목을 독립적으로 식별하고, 사용자에게 목록의 내용을 명확하게 전달할 수 있도록 돕습니다.
HTML에서 <li> 요소가 기본적으로 listitem 역할을 수행합니다.
listitem 역할은 목록(list 역할을 가진 요소) 내에서 각 항목을 나타냅니다.
이 역할은 목록 항목을 구성하는 중요한 요소로, 보조 기술이 목록의 구조를 이해하고,
각 항목을 사용자에게 올바르게 전달할 수 있도록 합니다.
HTML에서 <li> 요소는 자동으로 listitem 역할을 수행하며, 목록의 맥락에 맞게 적절히 사용됩니다.
listitem 역할은 비표준 마크업에서 목록 항목을 명확히 정의할 때 유용하게 사용할 수 있습니다.
적절한 사용
시멘틱한 HTML 요소(<li>)를 사용하여 목록 항목을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="listitem"을 명시적으로 지정해야 합니다.
listitem 역할은 반드시 list 역할을 가진 요소 내에서 사용되어야 합니다.
중요한 점
listitem 역할을 통해 웹 페이지의 목록 구조를 명확하게 정의함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 목록을 쉽게 탐색하고, 항목들 간의 관계를 명확히 이해할 수 있습니다.
사용 시 주의사항
시멘틱 마크업을 우선 사용
가능한 경우, 시멘틱한 HTML 목록 요소(<li>)를 사용하여 목록 항목을 정의하는 것이 좋습니다.
이는 자동으로 listitem 역할을 수행하며, 문서의 구조를 명확히 합니다.
list 역할과 함께 사용
listitem 역할은 반드시 list 역할을 가진 요소 내에서 사용해야 합니다.
독립적으로 사용하면 보조 기술이 이를 목록 항목으로 인식하지 못할 수 있습니다.
비표준 마크업에서의 사용
시멘틱한 HTML 요소를 사용할 수 없는 경우,
role="listitem"을 사용하여 비표준 마크업에서도 목록 항목을 명확히 정의할 수 있습니다.
상속된 상태 및 속성
기본적으로 상속된 상태나 속성은 없습니다.
listitem 역할은 단순히 목록 항목을 정의하는 역할을 하므로, 특별한 ARIA 상태나 속성이 필요하지 않습니다.
예시
잘못된 예시 - listitem 역할을 list 없이 사용
이 예시는 list 역할을 가진 요소 없이 listitem 역할을 사용하고 있으며,
이는 보조 기술이 이 항목을 목록의 일부로 인식하지 못하게 할 수 있습니다.
listitem 역할은 항상 list 역할 내에서 사용되어야 합니다.
올바른 예시 - list 역할과 함께 사용
이 예시는 role="list"와 role="listitem"을 함께 사용하여 목록과 목록 항목을 명확하게 정의하고,
또한, aria-labelledby 속성으로 목록의 제목을 지정하여 보조 기술이 목록을 올바르게 설명할 수 있습니다.
(권장) 시멘틱 마크업에서의 기본 사용
이 예시는 HTML의 <ul> 요소 내에서 <li> 요소를 사용하여 목록 항목을 정의하고 있습니다.
각 <li> 요소는 자동으로 listitem 역할을 수행합니다.
명시적으로 listitem 역할 지정 예시
이 예시는 <div> 요소에 role="listitem"을 지정하여 마크업에서 목록 항목을 정의한 예시입니다.
이는 시멘틱한 목록 요소를 사용할 수 없는 상황에서 유용합니다.
math 역할
요약 설명
math 역할은 수학적 표현이나 수식을 나타내는 콘텐츠를 정의하는 데 사용됩니다.
이 역할은 보조 기술이 수식이나 수학적 내용을 올바르게 이해하고, 사용자에게 적절히 전달할 수 있도록 돕습니다.
HTML의 <math> 요소 또는 MathML(Markup Language for Mathematical Notation)을 사용하여 수학적 표현을 나타낼 수 있습니다.
math 역할은 수학적 표현을 나타내며, 보조 기술이 수학적 콘텐츠를 사용자에게 올바르게 전달할 수 있도록 합니다.
이 역할은 복잡한 수식을 포함한 콘텐츠를 시각적으로 명확하게 표현하고, 보조 기술이 이를 음성으로 표현하거나, 다른 형식으로 변환하여 사용자에게 제공할 수 있도록 합니다.
math 역할은 일반적으로 MathML(Markup Language for Mathematical Notation)과 함께 사용되지만, HTML 요소에도 적용될 수 있습니다.
적절한 사용
복잡한 수식이나 수학적 표현에는 가능한 MathML을 사용하는 것이 가장 바람직하며,
HTML 요소에서 수식을 표현할 경우 role="math"를 명시적으로 지정하여 보조 기술이 이를 인식할 수 있도록 해야 합니다.
중요한 수식에는 대체 텍스트나 설명을 제공하여 접근성을 향상시킬 수 있습니다.
중요한 점
math 역할을 통해 수학적 콘텐츠를 명확하게 정의함으로써, 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 수식을 쉽게 이해하고, 필요한 내용을 효율적으로 탐색할 수 있습니다.
사용 시 주의사항
MathML 사용 권장
수학적 표현이 복잡하거나 다양한 기호를 포함하는 경우, MathML을 사용하는 것이 좋습니다.
MathML은 수학적 표현을 시멘틱하게 정의하고,
다양한 출력 장치와 보조 기술에서 일관되게 표현할 수 있도록 합니다.
대체 텍스트 제공
수학적 표현이 보조 기술에 의해 정확하게 전달되지 않을 수 있으므로,
중요한 수식에는 대체 텍스트를 제공하여 수식을 설명하는 것이 좋습니다.
적절한 역할 지정
비표준 마크업에서 수학적 표현을 정의하는 경우,
role="math"를 명시적으로 지정하여 보조 기술이 이를 수학적 콘텐츠로 인식하도록 해야 합니다.
상속된 상태 및 속성
기본적으로 상속된 상태나 속성은 없습니다.
math 역할은 수학적 표현을 정의하는 역할을 하므로, 추가적인 ARIA 상태나 속성이 필요하지 않습니다.
예시
잘못된 예시 - 수학적 표현을 일반 텍스트로 처리
이 예시는 수학적 표현을 일반 텍스트로만 제공하고 있으며,
math 역할이나 대체 텍스트가 없어 보조 기술이 이 수식을 올바르게 해석하지 못할 수 있습니다.
적절한 역할 지정이나 MathML 사용이 필요합니다.
올바른 예시 - MathML과 함께 math 역할 사용
이 예시는 MathML과 함께 role="math"을 사용하여 수학적 표현을 명확히 정의하고 있으며,
aria-labelledby 속성을 통해 수식의 의미를 설명하는 레이블을 제공하고 있습니다.
(권장) MathML을 사용한 수학적 표현 예시
이 예시는 MathML을 사용하여 이차 방정식의 해를 나타내는 수식을 표현하고 있습니다.
MathML은 수학적 표현을 시멘틱하게 정의하며,
다양한 출력 장치와 보조 기술에서 일관되게 표현할 수 있도록 합니다.
명시적으로 math 역할 지정 예시
이 예시는 <div> 요소에 role="math"를 지정하여 수학적 표현을 명시적으로 나타내고 있으며,
aria-label을 사용해 수식의 의미를 설명하고 있습니다.
MathML을 사용할 수 없는 상황에서 유용한 방법입니다.
note 역할
요약 설명
note 역할은 웹 페이지나 애플리케이션에서 부가적인 정보를 제공하는 데 사용됩니다.
이 역할은 중요한 정보를 보완하거나, 추가적인 설명을 제공하기 위한 콘텐츠를 나타내며,
보조 기술이 이 정보를 사용자에게 명확히 전달할 수 있도록 돕습니다.
일반적으로 노트, 팁, 경고 등과 같은 콘텐츠를 설명하는 데 사용됩니다.
note 역할은 주 콘텐츠와는 별도로 부가적인 정보를 제공하는 데 사용됩니다.
이 정보는 본문의 내용이나 주요 콘텐츠를 보완하는 역할을 하며, 콘텐츠의 흐름을 중단하지 않으면서 중요한 정보를 제공할 때 유용합니다.
보조 기술은 이 역할을 통해 사용자가 페이지 내에서 노트나 추가 설명을 쉽게 탐색하고, 필요한 정보를 얻을 수 있도록 돕습니다.
적절한 사용
시멘틱한 HTML 요소(예: <aside>, <blockquote>)를 사용하여 부가적인 정보를 제공하는 것이 가장 바람직하며,
비표준 마크업에서는 role="note"를 명시적으로 지정해야 합니다.
note 역할은 콘텐츠의 주요 흐름을 방해하지 않도록 주의 깊게 사용해야 합니다.
중요한 점
note 역할을 통해 부가적인 정보를 명확하게 정의함으로써, 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 필요한 추가 정보를 쉽게 이해하고, 문서의 내용을 효과적으로 탐색할 수 있습니다.
사용 시 주의사항
콘텐츠의 주요 흐름을 방해하지 않도록 주의
note 역할은 부가적인 정보나 설명을 제공하기 위해 사용되므로, 콘텐츠의 주요 흐름을 방해하지 않도록 배치해야 합니다.
시멘틱 마크업 우선 사용
가능한 경우, 시멘틱한 HTML 요소(예: <aside>, <blockquote>)를 사용하여 부가적인 정보를 제공하는 것이 좋습니다.
이들은 자동으로 부가적인 정보를 설명하는 역할을 수행합니다.
명확한 정보 제공
note 역할을 사용하여 제공되는 정보는 명확하고 간결하게 작성되어야 하며, 사용자에게 중요한 추가 정보를 전달할 수 있어야 합니다.
상속된 상태 및 속성
기본적으로 상속된 상태나 속성은 없습니다.
note 역할은 부가적인 정보를 제공하는 역할을 하므로, 추가적인 ARIA 상태나 속성이 필요하지 않습니다.
예시
잘못된 예시 - note 역할을 사용하지 않아야 하는 경우
이 예시는 페이지의 주요 제목에 note 역할을 사용했으나, 이는 잘못된 사용입니다.
note 역할은 부가적인 정보나 설명을 제공할 때 사용되어야 하며, 주 콘텐츠에 적용해서는 안 됩니다.
올바른 예시 - note 역할의 적절한 사용
이 예시는 부가적인 정보를 제공하는 데 role="note"를 적절하게 사용하여,
보조 기술이 이 정보를 올바르게 사용자에게 전달할 수 있습니다.
(권장) 시멘틱 마크업에서의 기본 사용 예시
이 예시는 HTML의 <aside> 요소를 사용하여 추가적인 정보를 제공하고 있습니다.
<aside> 요소는 부가적인 정보를 나타내며, 자동으로 note 역할을 수행합니다.
명시적으로 note 역할 지정 예시
이 예시는 <div> 요소에 role="note"를 지정하여 비표준 마크업에서 추가 정보를 제공하는 예시입니다.
이 방법은 시멘틱한 요소를 사용할 수 없는 상황에서 유용합니다.
paragraph 역할
요약 설명
paragraph 역할은 텍스트를 그룹화하여 하나의 논리적인 단락을 나타내는 역할을 합니다.
HTML에서 <p> 요소가 기본적으로 paragraph 역할을 수행합니다.
이 역할은 보조 기술이 텍스트의 구조와 의미를 올바르게 이해하고, 사용자에게 전달할 수 있도록 돕습니다.
paragraph 역할은 텍스트를 하나의 논리적 단위로 묶는 역할을 하며, 주로 텍스트 콘텐츠의 구조와 흐름을 나타내는 데 사용됩니다.
이 역할은 보조 기술이 문서의 텍스트를 올바르게 인식하고, 텍스트 간의 관계를 이해할 수 있도록 돕습니다.
HTML의 <p> 요소는 기본적으로 paragraph 역할을 수행하여, 문서 내에서 텍스트 단락을 정의합니다.
적절한 사용
시멘틱한 HTML 요소(<p>)를 사용하여 텍스트 단락을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="paragraph"를 명시적으로 지정해야 합니다.
paragraph 역할은 논리적인 텍스트 단락을 나타낼 때만 사용해야 합니다.
중요한 점
paragraph 역할을 통해 웹 페이지의 텍스트 구조를 명확하게 정의함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 텍스트를 쉽게 탐색하고, 내용을 명확히 이해할 수 있습니다.
사용 시 주의사항
시멘틱 마크업 우선 사용
가능한 경우, 시멘틱한 HTML 요소(<p>)를 사용하여 텍스트 단락을 정의하는 것이 좋습니다.
이는 자동으로 paragraph 역할을 수행하며, 문서의 구조를 명확히 합니다.
적절한 텍스트 그룹화
텍스트를 논리적인 단락으로 묶어야 할 때, paragraph 역할을 사용하거나,
<p> 요소를 사용하여 텍스트의 흐름과 의미를 명확히 표현해야 합니다.
불필요한 사용 피하기
paragraph 역할은 단순 텍스트 블록이 아닌, 논리적으로 구분된 단락을 나타낼 때 사용해야 합니다.
상속된 상태 및 속성
기본적으로 상속된 상태나 속성은 없습니다.
paragraph 역할은 텍스트 단락을 정의하는 역할을 하므로, 추가적인 ARIA 상태나 속성이 필요하지 않습니다.
예시
잘못된 예시 - paragraph 역할을 불필요하게 사용
이 예시는 <span> 요소에 role="paragraph"를 지정했으나,
<span>은 인라인 요소로 단락을 나타내는 데 적합하지 않습니다.
또한, 시멘틱한 마크업인 <p> 요소를 사용하는 것이 더 적절합니다.
(권장) 올바른 예시 - 시멘틱 마크업에서의 기본 사용 예시
이 예시는 HTML의 <p> 요소를 사용하여 텍스트 단락을 정의하고 있습니다.
<p> 요소는 자동으로 paragraph 역할을 수행하여,
보조 기술이 이 텍스트를 올바르게 인식하고 사용자에게 전달할 수 있도록 합니다.
명시적으로 paragraph 역할 지정 예시
이 예시는 <div> 요소에 role="paragraph"를 지정하여 비표준 마크업에서 텍스트 단락을 정의한 예시입니다.
이 방법은 <p> 요소를 사용할 수 없는 상황에서 유용할 수 있지만,
일반적으로는 <p> 요소를 사용하는 것이 더 적절합니다.
presentation 역할
요약 설명
presentation 역할은 HTML 요소의 시멘틱 의미를 제거하여,
보조 기술이 해당 요소를 단순히 레이아웃 목적으로만 인식하도록 하는 역할을 합니다.
이 역할은 시각적으로는 중요한 요소이지만, 접근성 측면에서는 의미를 전달할 필요가 없는 경우에 사용됩니다.
주로 시멘틱 마크업을 무효화하고, 콘텐츠를 단순히 시각적으로만 표시할 때 사용됩니다.
presentation 역할은 HTML 요소의 시멘틱 의미를 제거하여 보조 기술이 해당 요소를 무시하도록 합니다.
예를 들어, <table> 요소에 role="presentation"을 지정하면,
보조 기술은 이 표를 데이터 구조가 아닌 단순한 레이아웃 도구로 인식합니다.
이 역할은 주로 레이아웃을 위해 사용된 시멘틱 요소가 접근성 측면에서 불필요한 정보를 전달할 때 사용됩니다.
예를 들어, 레이아웃을 위한 표나 목록이 실제로 의미 있는 데이터나 항목을 전달하지 않을 때 사용됩니다.
presentation 역할을 사용하면, 해당 요소가 문서의 시멘틱 구조에 기여하지 않으며, 보조 기술이 이를 무시할 수 있습니다.
적절한 사용
레이아웃 목적으로만 사용된 시멘틱한 HTML 요소에 role="presentation"을 사용하여,
불필요한 정보를 제거할 수 있습니다. 그러나 실제 의미 있는 콘텐츠에는 이 역할을 사용하지 않아야 합니다.
중요한 점
presentation 역할을 통해 접근성을 유지하면서 불필요한 시멘틱 정보를 제거함으로써,
사용자 경험을 향상시킬 수 있습니다. 이를 통해 사용자는 콘텐츠를 효과적으로 탐색하고, 불필요한 정보를 피할 수 있습니다.
사용 시 주의사항
의미 없는 시멘틱 제거
presentation 역할은 시멘틱한 HTML 요소가 단순히 레이아웃 목적으로만 사용될 때 사용됩니다.
이 역할을 적용하면 보조 기술이 해당 요소를 무시하게 되므로, 실제 의미 있는 콘텐츠에는 사용하지 않아야 합니다.
적절한 사용 사례
레이아웃 목적으로 사용된 표나 목록, 아이콘 폰트 등에 presentation 역할을 사용하여,
접근성 측면에서 불필요한 정보를 제거할 수 있습니다.
과도한 사용 피하기
문서의 구조를 명확히 하기 위해 시멘틱 요소를 사용하는 것이 중요합니다.
presentation 역할을 과도하게 사용하여 문서의 시멘틱 구조를 무너뜨리지 않도록 주의해야 합니다.
상속된 상태 및 속성
기본적으로 상속된 상태나 속성은 없습니다.
presentation 역할은 시멘틱 의미를 제거하는 역할이므로, 추가적인 ARIA 상태나 속성이 필요하지 않습니다.
role="presentation" 과 aria-hidden="true"의 비교
role="presentation"은 요소가 시각적으로 레이아웃을 유지하는데 필요하지만 접근성 도구에는 구조적 의미를 주고 싶지 않을 때 사용합니다.
aria-hidden="true"는 그 요소와 하위 요소들을 스크린 리더에서 완전히 숨기고자 할 때 사용합니다.
예시
잘못된 예시
중요한 콘텐츠에 role="presentation"을 사용하여 스크린 리더에서 이 콘텐츠를 무시하게 만든 경우
이 예시에서는 role="presentation" 속성이 div 요소에 적용되어 있어,
해당 div 안에 포함된 모든 콘텐츠(h1과 p)가 스크린 리더에서 무시됩니다.
그러나 이 콘텐츠는 중요한 정보이므로, 사용자가 이를 인식할 수 있도록
role="presentation"을 제거하거나 적절한 ARIA 속성을 사용하여 보조 기술이 콘텐츠를 인식할 수 있게 해야 합니다.
(권장) 올바른 예시
시각적인 레이아웃을 위해 사용된 비중요 요소에 role="presentation"을 사용하여 스크린 리더가 무시하도록 설정
이 예시에서 visual-separator 요소는 단순히 레이아웃을 구분하는 용도이므로,
스크린 리더가 이를 무시하도록 role="presentation" 속성을 사용했습니다.
이렇게 하면 스크린 리더 사용자는 구분선을 건너뛰고 중요한 콘텐츠에 집중할 수 있게 됩니다.
표 안의 role="presentation" 상황
레이아웃용 표에서 의미 없는 행과 셀에 role="presentation"을 사용
이 예시는 빈 행이 시각적으로만 필요하고 접근성 도구에서는 중요하지 않기 때문에
role="presentation"을 사용했습니다. 스크린 리더는 이 행을 무시하고 중요한 정보로 넘어갑니다.
아이콘에 role="presentation" 적용
이 예시는 아이콘이 단순히 장식적인 요소일 때,
alt 속성을 비워두고 role="presentation"을 사용하여 스크린 리더가 이미지를 무시하도록 설정한 것입니다.
이렇게 하면 스크린 리더 사용자가 불필요한 정보를 듣지 않고, 중요한 콘텐츠에 집중할 수 있습니다.
role="presentation" 과 aria-hidden="true"의 비교 예시
이 두 속성은 서로 다른 용도로 사용되므로, 어떤 상황에서 어느 속성을 사용하는 것이 적절한지 판단하는 것이 중요합니다.
role="presentation"은 주로 구조적 의미가 없을 때 사용되고,
aria-hidden="true"는 특정 콘텐츠를 스크린 리더에서 숨기고자 할 때 사용됩니다.
row 역할
요약 설명
row 역할은 테이블, 그리드, 트리그리드 등에서 데이터를 행(row) 단위로 그룹화하여 나타내는 역할을 합니다.
이 역할은 보조 기술이 행 단위로 데이터를 올바르게 인식하고, 각 셀이나 항목 간의 관계를 사용자에게 전달할 수 있도록 돕습니다.
row 역할은 테이블이나 그리드와 같은 데이터 구조에서 행을 나타내며,
보조 기술이 데이터를 행 단위로 처리하도록 도와, 사용자가 데이터 구조를 더 쉽게 이해할 수 있습니다.
HTML의 <tr> 요소는 기본적으로 row 역할을 수행하며, 행에 포함된 데이터를 그룹화하는 기능을 합니다.
이 역할은 그리드나 트리그리드와 같은 다양한 데이터 구조에서 데이터를 논리적으로 정리하는 데 중요한 역할을 합니다.
적절한 사용
시멘틱한 HTML 요소(<tr>)를 사용하여 테이블 행을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="row"를 명시적으로 지정해야 합니다.
row 역할은 반드시 데이터 구조 내에서 사용되어야 합니다.
중요한 점
row 역할을 통해 데이터 구조를 명확하게 정의함으로써,
사용자 경험과 접근성을 모두 향상시며, 데이터를 쉽게 탐색하고, 구조를 명확히 이해할 수 있습니다.
사용 시 주의사항
시멘틱 마크업을 우선 사용
가능한 경우, 시멘틱한 HTML 요소(<tr>)를 사용하여 테이블 행을 정의하는 것이 좋습니다.
<tr>요소는 자동으로 row 역할을 수행하며, 문서의 구조를 명확히 합니다.
그리드 및 트리그리드에서의 사용
그리드나 트리그리드 구조에서는 row 역할을 사용하여 행을 명확하게 정의하고, 각 셀 간의 관계를 명확히 해야 합니다.
적절한 구조 유지
row 역할을 사용할 때는 반드시 그리드, 테이블, 트리그리드 등의 시멘틱 구조 내에서 사용해야 하며,
이 구조를 무너뜨리지 않도록 주의해야 합니다.
상속된 상태 및 속성
aria-labelledby
행의 제목을 지정하여, 보조 기술이 이 제목을 행과 연관지어 사용자에게 전달할 수 있게 합니다.
aria-level
트리그리드 구조에서 행의 깊이를 나타냅니다. 이 속성은 행이 트리 구조 내에서 어느 수준에 위치하는지 정의하는 데 사용됩니다.
예시
잘못된 예시 - row 역할을 사용하지 않아야 하는 경우
이 예시는 데이터 구조와 무관한 단락에 row 역할을 사용했습니다.
row 역할은 반드시 데이터 테이블, 그리드, 트리그리드 등의 구조 내에서 사용해야 하며,
단순한 텍스트 블록에는 사용하지 않아야 합니다.
올바른 예시 - 그리드 구조 내에서 row 역할 사용
이 예시는 그리드 구조 내에서 role="row"와 role="gridcell"을 사용하여,
보조 기술이 데이터를 올바르게 인식하고 사용자에게 전달할 수 있도록 합니다.
(권장) 시멘틱 마크업에서의 기본 사용 예시
이 예시는 HTML의 <tr> 요소를 사용하여 테이블 행을 정의하고 있습니다.
<tr> 요소는 자동으로 row 역할을 수행하여, 보조 기술이 이 구조를 올바르게 인식할 수 있도록 합니다.
명시적으로 row 역할 지정 예시
이 예시는 <div> 요소에 role="row"를 지정하여 비표준 마크업에서 그리드 행을 정의한 예시입니다.
각 셀은 role="gridcell"로 정의되어 있습니다.
rowgroup 역할
요약 설명
rowgroup 역할은 테이블, 그리드, 트리그리드 등의 데이터 구조에서 여러 행(row)을 묶어 하나의 그룹으로 나타내는 역할을 합니다.
이 역할은 행 그룹을 정의하여 보조 기술이 이 그룹을 올바르게 인식하고,
사용자에게 데이터를 더 구조적으로 전달할 수 있도록 돕습니다.
HTML에서 <thead>, <tbody>, <tfoot> 요소가 기본적으로 rowgroup 역할을 수행합니다.
rowgroup 역할은 여러 개의 행을 논리적으로 묶어 하나의 그룹으로 표현하며,
보조 기술이 이 그룹을 문서의 다른 행과 구분하여 인식할 수 있도록 합니다.
이 역할은 주로 테이블의 머리글, 본문, 꼬리글 등을 그룹화하는 데 사용됩니다.
HTML에서 <thead>, <tbody>, <tfoot> 요소는 각각 행 그룹을 나타내며,
자동으로 rowgroup 역할을 수행합니다.
rowgroup 역할은 테이블이나 그리드와 같은 구조에서 데이터를 구조화하고,
사용자에게 데이터의 논리적인 구성을 명확히 전달하는 데 도움이 됩니다.
적절한 사용
시멘틱한 HTML 요소(<thead>, <tbody>, <tfoot>)를 사용하여 행 그룹을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="rowgroup"을 명시적으로 지정해야 합니다. rowgroup 역할은 반드시 데이터 구조 내에서 사용되어야 합니다.
중요한 점
rowgroup 역할을 통해 데이터 구조를 명확하게 정의함으로써, 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 데이터를 구조적으로 이해하고, 필요한 내용을 효율적으로 탐색할 수 있습니다.
사용 시 주의사항
시멘틱 마크업을 우선 사용
가능한 경우, 시멘틱한 HTML 요소(<thead>, <tbody>, <tfoot>)를 사용하여 행 그룹을 정의하는 것이 좋습니다.
이는 자동으로 rowgroup 역할을 수행하며, 문서의 구조를 명확히 합니다.
그리드 및 트리그리드에서의 사용
그리드나 트리그리드 구조에서는 rowgroup 역할을 사용하여 여러 행을 그룹화하고,
그룹 내에서 행 간의 관계를 명확히 해야 합니다.
적절한 구조 유지
rowgroup 역할을 사용할 때는 데이터 구조 내에서 사용해야 하며, 구조를 무너뜨리지 않도록 주의해야 합니다.
상속된 상태 및 속성
aria-labelledby
행 그룹의 제목을 지정하여, 보조 기술이 이 제목을 그룹과 연관지어 사용자에게 전달할 수 있게 합니다.
예시
잘못된 예시 - 의미 없는 그룹화
이 예시는 데이터 구조와 무관한 텍스트를 role="rowgroup"으로 지정했으나,
rowgroup 역할은 반드시 데이터 구조 내에서 사용되어야 합니다.
의미 없는 콘텐츠에 이 역할을 사용하면 보조 기술이 혼란스러울 수 있습니다.
올바른 예시 - 그리드 구조 내에서 rowgroup 역할 사용 사용
이 예시는 그리드 구조 내에서 role="rowgroup"과 role="row"를 사용하여,
보조 기술이 데이터를 그룹 단위로 인식하고, 사용자에게 구조화된 정보를 제공할 수 있도록 합니다.
(권장) 시멘틱 마크업에서의 기본 사용 예시
이 예시는 HTML의 <thead>, <tbody>, <tfoot> 요소를 사용하여 테이블의 행을 그룹화하고 있습니다.
각 요소는 자동으로 rowgroup 역할을 수행하며, 보조 기술이 이 구조를 올바르게 인식할 수 있도록 합니다.
명시적으로 rowgroup 역할 지정 예시
이 예시는 <div> 요소에 role="rowgroup"을 지정하여 비표준 마크업에서 행 그룹을 정의한 예시입니다.
각 그룹은 role="row"를 사용하여 행을 포함하며, 보조 기술이 그룹 간의 관계를 인식할 수 있도록 돕습니다.
rowheader 역할
요약 설명
rowheader 역할은 테이블, 그리드, 또는 트리그리드에서 행의 제목을 나타내는 셀에 사용됩니다.
이 역할은 각 행의 주제를 설명하며, 보조 기술이 이를 올바르게 인식하고 사용자에게 전달할 수 있도록 돕습니다.
일반적으로 테이블의 첫 번째 열에 위치하며, 해당 행의 모든 데이터를 설명하는 역할을 합니다.
rowheader 역할은 테이블이나 그리드에서 행의 주제를 나타내는 셀에 사용됩니다. 이 셀은 행 내의 다른 데이터 셀들과 관련된 정보를 제공합니다.
HTML의 <th scope="row"> 요소는 자동으로 rowheader 역할을 수행합니다.
이 역할을 통해 보조 기술은 해당 셀을 행의 제목으로 인식하고, 사용자가 데이터의 맥락을 이해할 수 있도록 합니다.
적절한 사용
시멘틱한 HTML 요소(<th scope="row">)를 사용하여 행 머리글을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="rowheader"를 명시적으로 지정해야 합니다.
rowheader 역할은 반드시 데이터 구조 내에서 사용되어야 합니다.
중요한 점
rowheader 역할을 통해 데이터 구조를 명확하게 정의함으로써,
사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 데이터를 더 쉽게 탐색하고, 각 행의 내용을 명확히 이해할 수 있습니다.
사용 시 주의사항
시멘틱 마크업을 우선 사용
가능한 경우, 시멘틱한 HTML 요소(<th scope="row">)를 사용하여 행 머리글을 정의하는 것이 좋습니다.
이는 자동으로 rowheader 역할을 수행하며, 문서의 구조를 명확히 합니다.
그리드 및 트리그리드에서의 사용
그리드나 트리그리드 구조에서는 rowheader 역할을 사용하여 각 행의 주제를 명확하게 정의하고,
셀 간의 관계를 명확히 해야 합니다.
적절한 구조 유지
rowheader 역할을 사용할 때는 반드시 데이터 구조 내에서 사용해야 하며,
구조를 무너뜨리지 않도록 주의해야 합니다.
상속된 상태 및 속성
aria-sort
이 속성은 해당 행이 정렬된 상태인 경우 정렬 방향을 나타냅니다.
ascending, descending, none 또는 other 값을 가질 수 있습니다.
aria-labelledby
이 속성은 셀의 제목을 지정하여, 보조 기술이 이 제목을 셀과 연관지어 사용자에게 전달할 수 있게 합니다.
예시
잘못된 예시 - 의미 없는 셀에 rowheader 역할 사용
이 예시는 단순 텍스트 블록에 rowheader 역할을 사용했으나,
rowheader 역할은 반드시 테이블, 그리드, 또는 트리그리드와 같은 데이터 구조 내에서 사용되어야 합니다.
의미 없는 콘텐츠에 이 역할을 사용하면 보조 기술이 혼란스러울 수 있습니다.
올바른 예시 - 그리드 구조 내에서 rowheader 역할 사용
이 예시는 그리드 구조 내에서 role="rowheader"과 role="gridcell"을 사용하여,
보조 기술이 데이터를 올바르게 인식하고, 사용자에게 행의 주제를 명확히 전달할 수 있도록 했습니다.
(권장) 시멘틱 마크업에서의 기본 사용 예시
이 예시는 HTML의 <th scope="row"> 요소를 사용하여 테이블 행의 머리글을 정의하고 있습니다.
<h> 요소는 자동으로 rowheader 역할을 수행하며, 보조 기술이 이 구조를 올바르게 인식할 수 있도록 합니다.
명시적으로 rowheader 역할 지정
이 예시는 <div> 요소에 role="rowheader"를 지정하여 비표준 마크업에서 행 머리글을 정의한 예시입니다.
각 행의 데이터는 role="gridcell"을 사용하여 정의됩니다.
table 역할
요약 설명
table 역할은 데이터를 행과 열로 구성된 표 형식으로 나타내는 구조를 정의하는 데 사용됩니다.
이 역할은 보조 기술이 데이터를 테이블 형식으로 인식하고, 각 셀 간의 관계를 사용자에게 명확히 전달할 수 있도록 돕습니다.
HTML의 <table> 요소는 기본적으로 table 역할을 수행합니다.
table 역할은 데이터를 표 형식으로 나타내는 구조를 정의합니다.
이 역할을 통해 보조 기술은 데이터를 행과 열로 구성된 테이블로 인식하고,
사용자가 각 셀 간의 관계를 쉽게 이해할 수 있도록 합니다.
HTML의 <table> 요소는 자동으로 table 역할을 수행하며,
이 요소 내에서 <tr>, <th>, <td> 등의 요소가 사용됩니다.
적절한 사용
시멘틱한 HTML 요소(<table>, <tr>, <th>, <td>)를
사용하여 테이블 구조를 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="table"을 명시적으로 지정해야 합니다.
레이아웃 목적으로 사용되는 테이블에는 role="presentation"을 사용하는 것이 좋습니다.
중요한 점
table 역할을 통해 데이터 구조를 명확하게 정의함으로써, 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.
이를 통해 사용자는 데이터를 더 쉽게 탐색하고, 각 셀 간의 관계를 명확히 이해할 수 있습니다.
사용 시 주의사항
시멘틱 마크업을 우선 사용
가능한 경우, 시멘틱한 HTML 요소(<table>, <tr>, <th>, <td>)를
사용하여 데이터를 정의하는 것이 좋습니다.
<table> 요소는 자동으로 table 역할을 수행하며, 문서의 구조를 명확히 합니다.
데이터 테이블과 레이아웃 테이블 구분
데이터 구조를 나타내는 테이블과 레이아웃 목적으로 사용되는 테이블을 구분해야 합니다.
데이터 테이블에는 table 역할이 필요하지만, 레이아웃을 위한 테이블에는
role="presentation"을 사용하여 보조 기술이 이를 무시하도록 하는 것이 좋습니다.
적절한 테이블 구조 유지
table 역할을 사용할 때는 각 셀(td, th)이 적절한 행(tr)과 열로 구성되도록 구조를 유지해야 합니다.
이렇게 하면 보조 기술이 데이터를 정확하게 전달할 수 있습니다.
상속된 상태 및 속성
aria-label
테이블의 이름이나 설명을 지정하여 보조 기술이 이를 사용자에게 전달할 수 있도록 합니다.
aria-labelledby
테이블의 제목을 지정하여 보조 기술이 이 제목을 테이블과 연관지어 사용자에게 전달할 수 있게 합니다.
aria-describedby
테이블에 대한 추가 설명을 제공하여, 보조 기술이 이 설명을 테이블과 연관지어 사용자에게 전달할 수 있게 합니다.
예시
잘못된 예시 - 레이아웃 테이블에 table 역할 사용
이 예시는 레이아웃을 위한 테이블에 table 역할을 사용하고 있으며, 이는 잘못된 사용입니다.
레이아웃 목적으로 사용되는 테이블에는 role="presentation"을 사용하여 보조 기술이 이를 무시하도록 하는 것이 좋습니다.
(권장) 시멘틱 마크업 - 데이터 테이블에 table 역할 사용
이 예시는 HTML의 <table> 요소를 사용하여 테이블 구조를 정의하고 있으며,
<caption> 요소로 테이블의 제목을 제공하고 있습니다.
table 역할은 자동으로 적용되며, 보조 기술이 이 테이블을 데이터 구조로 인식하고 사용자에게 전달할 수 있도록 합니다.
명시적으로 table 역할 지정 예시
이 예시는 <div> 요소에 role="table"을 지정하여 비표준 마크업에서 테이블 구조를 정의한 예시입니다.
각 행과 셀은 role="row" 및 role="gridcell"로 정의되어 있습니다.
separator(구분선) 역할 (포커스 불가능한 경우)
요약 설명
separator 역할은 콘텐츠를 논리적으로 구분하는 시각적인 구분선을 나타내는 데 사용됩니다.
이 역할은 주로 메뉴, 툴바, 대화 상자, 또는 기타 인터페이스 구성 요소 내에서 그룹을 나누거나 구획을 구분할 때 사용됩니다.
포커스 불가능한 separator는 보조 기술이 해당 요소를 콘텐츠 간의 구분자로 인식하지만,
이 요소에 포커스를 둘 수 없도록 설정된 경우입니다.
separator 역할은 시각적으로 구분선을 나타내며, 보조 기술이 이를 콘텐츠의 구분자로 인식할 수 있도록 돕습니다.
이 역할은 주로 메뉴나 툴바에서 항목을 구분하는 수평선이나 수직선, 또는 다른 콘텐츠를 구분하는 데 사용됩니다.
포커스 불가능한 separator는 사용자가 키보드 네비게이션을 통해 이 요소에 포커스를 둘 수 없으며,
시각적 또는 논리적인 구분만 제공합니다.
HTML에서 <hr> 요소는 기본적으로 시각적 구분선을 나타내며, separator 역할을 암시적으로 수행합니다.
적절한 사용
시멘틱한 HTML 요소(<hr>)를 사용하여 구분선을 정의하는 것이 가장 바람직하며,
비표준 마크업에서는 role="separator"를 명시적으로 지정해야 합니다.
구분선이 단순히 시각적인 구분만 제공할 경우, 포커스 불가능하게 설정하는 것이 좋습니다.
중요한 점
separator 역할을 통해 사용자 인터페이스를 구조화하고,
접근성을 유지하면서 불필요한 포커스를 제거하여 사용자 경험을 향상시킬 수 있습니다.
이를 통해 사용자는 시각적인 구분을 쉽게 이해하고, 필요한 내용을 효율적으로 탐색할 수 있습니다.
사용 시 주의사항
포커스 가능 여부 결정
구분선이 사용자 인터페이스에서 중요한 역할을 하지 않으며, 단지 시각적 구분만 제공한다면 포커스 불가능한 상태로 유지해야 합니다.
그렇지 않으면 포커스 가능하게 설정하여 사용자에게 중요한 정보로 전달해야 합니다.
시멘틱 마크업 우선 사용
가능한 경우, 시멘틱한 HTML 요소(<hr>)를 사용하여 구분선을 정의하는 것이 좋습니다.
이 요소는 자동으로 separator 역할을 수행하며, 포커스 불가능한 상태로 작동합니다.
구분선 방향 지정
aria-orientation 속성을 사용하여 구분선의 방향을 명확히 지정해야 합니다. 수평 구분선이 기본값이므로,
수직 구분선이 필요할 경우 명시적으로 지정해야 합니다.
상속된 상태 및 속성
aria-orientation
이 속성은 구분선의 방향을 지정합니다. horizontal(수평) 또는 vertical(수직) 값으로 설정할 수 있습니다.
기본값은 horizontal입니다.
aria-labelledby
구분선이 설명 또는 제목과 연관될 경우, 보조 기술이 이를 설명할 수 있도록 이 속성을 사용할 수 있습니다.
예시
잘못된 예시 - 불필요한 포커스 가능 설정 사용
이 예시는 구분선에 tabindex="0"을 지정하여 포커스 가능하게 만들었지만,
구분선이 단순히 시각적인 구분만 제공하는 경우 포커스가 필요하지 않습니다.
이러한 설정은 사용자에게 혼란을 줄 수 있습니다.
올바른 예시 - 포커스 불가능한 상태 유지 사용
이 예시는 마크업에서 role="separator"와 aria-orientation="vertical"을 사용하여,
포커스 불가능한 수직 구분선을 정의하고 있습니다. 포커스가 불가능하므로,
이 요소는 시각적 구분만 제공하며 사용자 인터페이스에서 중요한 역할을 하지 않습니다.
(권장) 시멘틱 마크업에서의 기본 사용
이 예시는 HTML의 <hr> 요소를 사용하여 콘텐츠를 구분하는 구분선을 나타냅니다.
<hr> 요소는 기본적으로 포커스 불가능하며, separator 역할을 자동으로 수행합니다.
명시적으로 separator 역할 지정 예시
이 예시는 <div> 요소에 role="separator"를 지정하여,
포커스 불가능한 수평 구분선을 비표준 마크업으로 정의한 예시입니다.
aria-orientation="horizontal" 속성은 구분선의 방향을 명확히 지정합니다.
term 역할
요약 설명
term 역할은 정의 목록에서 정의될 용어 또는 단어를 나타내는 데 사용됩니다.
이 역할은 용어가 정의된 내용과 함께 그룹화되어 보조 기술이 이를 올바르게 해석하고 사용자에게 전달할 수 있도록 돕습니다.
HTML에서 <dt> 요소가 기본적으로 term 역할을 수행합니다.