ARIA 역할 목록: 최고의 참고 자료 비교

역할 목록은 W3C의 WAI-ARIA 1.2 사양에 따라 정의된 82개의 값으로 구성된 역할 목록입니다. 문서 역할, 랜드마크 역할, 위젯, 구조, 창 및 추상 역할로 구성됩니다. 빠른 참조 표, 코드 예제가 포함된 문서, 또는 각 역할을 언제 적용할지에 대한 결정 가이드 중 필요한 것을 선택하여 참조하십시오.

주요 내용

• WAI-ARIA 1.2 사양은 82개의 역할을 정의하지만, 실제 접근 가능한 XHTML/CSS 사이트 개발에서는 그중 일부만 사용됩니다.
• ARIA의 첫 번째 규칙은 여전히 유효합니다. 필요한 의미를 가진 기본 HTML 요소가 있다면, 역할을 추가하는 대신 해당 요소를 사용하십시오.
• 추상 역할(role="widget" 또는 role="input")은 마크업에 절대 작성해서는 안 되며, 오직 분류 체계의 기반으로만 사용됩니다.
• 프런트엔드를 위한 유용한 참조 자료에는 역할, 필수 ARIA 속성, 허용되는 상태 및 실제 마크업 예제가 포함되어야 합니다.
• 랜드마크 및 위젯 역할은 axe-core나 Lighthouse와 같은 자동 감사 도구에서 발견되는 오류의 대부분을 차지합니다.

Qué es un rol ARIA y por qué necesitas una lista fiable

ARIA 역할은 요소에 role 속성을 통해 할당되어 보조 공학 기기에 해당 요소가 어떤 유형의 컴포넌트인지 알려주는 값입니다. 브라우저는 이 역할을 접근성 트리를 통해 노출하며, NVDA, JAWS, VoiceOver와 같은 스크린 리더는 이를 “버튼”, “탭”, “영역”, “대화 상자”와 같은 구체적인 안내로 변환합니다.

W3C의 ARIA 작업 그룹에서 유지 관리하는 WAI-ARIA 사양은 각 역할과 허용되는 상태 및 속성을 정의합니다. 버전 1.2가 현재의 안정적인 권장 버전이며, ARIA 1.3은 개발 중입니다. XHTML과 CSS를 사용하는 개발자에게 역할 목록은 단순한 카탈로그가 아닙니다. 잘못 적용된 각 값은 요소의 기본 의미와 선언된 의미 사이에 충돌을 일으키며, 스크린 리더는 브라우저에 따라 이 충돌을 서로 다른 방식으로 해결합니다.

MDN(Mozilla Developer Network)의 ARIA 역할 공식 문서는 한국어와 영어를 포함해 가장 많이 참조되는 기술 문서이지만 유일한 것은 아닙니다. 다양한 필요를 충족하는 참조 시트, 패턴 가이드, 검증 도구들이 존재합니다. 이를 비교하면 자신의 작업 흐름에 맞는 것을 선택하는 데 도움이 됩니다.

ARIA 역할의 분류

공식적으로 분류된 역할은 기능에 따라 분류됩니다. 카테고리를 알면 잘못된 목록에서 찾는 일을 방지할 수 있습니다.

문서의 역할. 섹션의 구조 설명: article, document, feed, heading, img, list, listitem, math, none, note, presentation, row, separator, table, term, toolbar, tooltip. 많은 역할이 기본 HTML 요소와 중복되므로 직접 작성하는 경우는 드뭅니다.

관련 항목: UserWay — 무료로 계획을 세우는 위젯 de empezar hoy mismo.

랜드마크 역할. 배너, 보완, contentinfo, form, main, navigation, region, search 등 페이지의 탐색 가능한 영역을 정의합니다. 이는 HTML 의미가 불완전한 사이트에서 가장 많이 사용되는 것입니다.

위젯 역할. 대화형 컨트롤을 나타냅니다: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, slider, spinbutton, switch, tab, tabpanel, textbox, treeitem. 포커스와 키보드 관리가 필요합니다.

구조적 역할. 조직 위젯에는 application, grid, group, listbox, menu, menubar, radiogroup, tablist, tree, treegrid, rowgroup, columnheader, rowheader가 포함됩니다.

볼만한 가치가 있는 곳: AudioEye — Accesibilidad gestionada: 자동화와 인간의 개정 결합.

창 역할. 중첩 또는 모달 콘텐츠 관리: alertdialog, dialog.

추상적 역할. 마크업에는 command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, window 요소가 기록되지 않습니다. 이는 사양 내에서 역할 간에 속성을 상속받기 위해 사용됩니다.

비교: ARIA 역할 참조에 대한 참고 사항

다음 표는 실무적인 기준에 따라 개발자들이 가장 많이 사용하는 참조 자료를 비교한 것입니다.

참조	티포	관용구	코드 예시	이상적인 파라
MDN 웹 문서(ARIA 역할)	공식 문서	다중 언어(스페인어 포함)	지금, 포 롤	Consulta técnica profunda
WAI-ARIA 1.2(W3C)	구체적인 규범	영어	아니요	정확한 비교 검증
WAI-ARIA 저작 관행 가이드	기아 데 후원자	영어	Sí, 후원자 완료	Teclado에 위젯 구현
Hoja de Referencia Tipo 치트 시트	타블라 이력서	영어	미니모스	편집자에게 빠른 답변
접근성.빌드(ARIA 참조)	실제 사례 참조	영어	시	댓글에 대한 Aprender의 의견
Auditores(axe-core, 등대)	에라미엔타	다중 언어	아니요	탐지기 역할이 유효하지 않음

순간에 의존하는 전기. Durante la escritura de marcado, una hoja de reference Compacta gana en velocidad. Al depurar un widget que no anuncia bien su estado, la especación del W3C y la guía de Patrones de WAI son las fuentes que resuelven la duda.

Cómo decidir qué rol aplicar: 기준 실천

ARIA 다운로드에 따라 올바른 결정을 내리세요. Estos criterios, ordenados, evitan la mayoría de los errores.

1. ¿네이티브 HTML 요소가 있습니까? <button>에는 이미 button의 암시적 역할이 있습니다. role="button"을 추가하는 것은 중복되며 충돌이 발생할 수 있습니다.
2. ¿역할에는 필수 속성이 필요합니까? role="checkbox"에는 aria-checked가 필요합니다. role="slider"에는 aria-valuenow, aria-valuemin 및 aria-valuemax가 필요합니다. 이러한 상태를 유지할 수 없다면 그 역할은 도움이 되기보다 해를 끼치게 됩니다.
3. ¿역할에는 키보드 관리가 포함됩니까? 위젯 역할에는 패턴에 따라 화살표, Home, End 및 Esc를 사용한 탐색이 필요합니다. 화살표 처리가 없는 role="tablist"는 없는 것보다 더 나쁩니다.
4. ¿El rol es abstracto? 추상 역할 목록에 있으면 작성하면 안 됩니다.
5. ¿역할이 더 이상 사용되지 않거나 사용되지 않습니까? ARIA 1.0과 1.2 사이에서 일부 값이 변경되었습니다. 항상 현재 버전을 참조하십시오.

W3C 기술 가이드에서 인정하는 ARIA 사용에 대한 첫 번째 규칙은 가능하면 기본 HTML을 사용한다는 원칙입니다. ARIA는 HTML이 충분하지 않을 때를 위한 패치이지 대체품이 아닙니다.

관련 항목: IAAP CPACC / WAS Certification — La certificación profesional que acredita tu experiencia en accesibilidad.

역할 목록에 따라 컨설턴트에게 오류가 발생했습니다.

습관적으로 오류가 발생하는 경우에는 원본과 관련된 항목을 참조하여 복사해야 합니다. role="combobox"와 ARIA 1.2는 1.0 버전에서 aria-expanded를 존중하며 listbox는 aria-controls와 관련이 있습니다. Aplicar la versión antigua rompe el anuncio en lectores realizados.

또한 role="presentation" 또는 role="none"을 사용하여 의미 체계를 ‘정리’하는 경우가 있는데, 어떤 경우에는 해당 하위 요소를 포함하여 접근성 트리에서 요소가 제거된다는 점을 이해하지 못합니다. 이는 모든 키보드 제어를 위젯으로 전송하고 스크린 리더 단축키를 비활성화하는 role="application" 빈도에서도 나타납니다. 양식이 아닌 복잡한 웹 애플리케이션용으로 예약되어 있습니다.

랜드마크 중복 역할이 혼란을 야기합니다. 페이지의 잘못된 role="main"에 대해, <article>에 대한 role="banner"의 역할이 일관되지 않은 지역에서 생성되었습니다. 도끼 코어의 유효성 검사는 내비게이터의 다양한 위치 감지 장치에 대한 액세스 도구를 통해 실제 판탈라 리더의 실제 작동을 확인하는 자동 도구 검사입니다.

쇼핑하는 경우: accessiBe — 48시간 동안 WCAG에 대한 IA의 중첩.

Marcado에서 유효한 역할에 대한 Herramientas

역할 비교는 검사 매뉴얼과 자동화를 결합합니다. Chrome 및 Firefox의 DevTools에는 시스템 작동 방식을 확인할 수 있는 액세스 패널이 포함되어 있으며, 시스템 계산을 제어할 수 있습니다. Es la forma más directa de ver si un rol declarado sobrevive o es sobrescrito por la semántica nativa.

도끼-핵심, 통합 및 등대 및 불합리한 확장, 시장 역할 무효, 속성 의무 및 모순된 조합. 확장된 Accessibility Insights for Web, basada en las reglas de axe, añade comprobaciones guiadas를 확장하세요. 실제로 사용되는 NVDA 및 Windows 및 macOS의 VoiceOver에 대한 최종 검증 결과는 다음과 같습니다. 유효성 검사가 감지되면 상황에 따라 결과를 알 수 있습니다.

MDN에 대한 액세스 문서와 WAI-ARIA 델 W3C의 후원자에 대한 문서입니다. La Primera explica cada rol; la segunda muestra cómo secombinan en completos completos.

출처 및 추가 자료

• WAI-ARIA — Wikipedia: 웹 접근성 이니셔티브 – 액세스 가능한 리치 인터넷 애플리케이션(WAI-ARIA)은 W3C(월드 와이드 웹 컨소시엄)에서 발표한 기술 사양으로…

자주 묻는 질문

¿ Cuántos 역할 ARIA가 존재합니까?

W3C WAI-ARIA 1.2 사양은 문서, 랜드마크, 위젯, 구조, 창 및 추상 역할로 나누어 총 82개의 역할을 정의합니다. 이러한 맥락에서 일반적인 개발에서는 일부만 사용됩니다. 추상 역할은 절대 작성되지 않으며 많은 문서 역할은 기본 HTML 요소를 복제합니다.

¿ Cuál es la diferencia entre un rol ARIA와 ARIA에 귀속되어 있습니까?

Un rol ARIA는 qué es un elemento, mientras que los atributos ARIA가 su estado o propiedades를 설명합니다. 예를 들어, role="checkbox"는 구성요소를 식별하고 aria-checked="true"가 선택되면 통신합니다. 역할은 ‘역할’에 귀속되는 것으로 간주됩니다. los estados y propiedades usan el prefijo aria-.

¿ Debo는 ARIA를 HTML 의미로 사용합니까?

대부분의 경우 그렇지 않습니다. 시맨틱 HTML은 이미 암시적 역할을 노출합니다. <nav>는 role="navigation"과 동일하고 <main>은 role="main"과 동일합니다. 역할을 명시적으로 추가하는 것은 중복되며 충돌이 발생할 수 있습니다. ARIA는 탭, 트리 또는 복잡한 메뉴와 같이 HTML에서 다루지 않는 구성 요소용으로 예약되어 있습니다.

역할이 ARIA nunca debo escribir en el marcado인가요?

추상적 역할(command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget 및 window)이 나타나서는 안 됩니다. 역할 간 속성 상속을 정의하는 사양에만 존재합니다. 이를 작성하면 유효성 검사기가 플래그를 지정하는 잘못된 역할이 생성됩니다.

¿Cómo verifico que un rol ARIA 기능 수정?

확인은 세 단계로 구성됩니다. 브라우저의 DevTools에서 접근성 트리를 검사하여 계산된 역할을 확인하고, axe-core와 같은 유효성 검사기를 전달하여 누락된 필수 속성을 감지하고, NVDA 또는 VoiceOver와 같은 실제 화면 판독기로 테스트합니다. 마지막 단계에서만 발표 내용을 사람이 이해할 수 있는지 확인합니다.

¿ 역할이 ARIA 특정 버전에 포함되어 있습니까?

시. ARIA 1.1에서는 ‘피드’ 및 ‘스위치’ 역할을 수행하며, ARIA 1.2에서는 ‘콤보박스’ 기능을 수정하여 다양한 기능을 통합합니다. ARIA 1.3이 출시되었습니다. 컨설턴트는 특정 버전의 특정 버전을 지원하기 위해 후원자에게 오래된 형식의 판탈라 현대 해석을 해석했습니다.