ARIA 역할 치트 시트: 최고의 추천 비교

아리아 역할 치트 시트는 각 ARIA 역할을 그에 해당하는 기본 HTML 요소, 범주(위젯, 랜드마크, 구조, 라이브 영역 또는 창) 및 관련 속성과 상태에 매핑한 참조 가이드입니다. WAI-ARIA 1.2는 82개의 역할을 정의하며, 대부분의 프로젝트에서는 보통 15~20개 정도의 역할만 반복적으로 사용합니다. 이 비교 분석에서는 2026년 현재 이용 가능한 최고의 참조 시트들을 모아보고, 워크플로우에 따라 어떤 것이 적합한지 설명합니다.

ARIA 역할에 대한 치트 시트가 필요함

WAI-ARIA 1.2 및 후속 버전인 WAI-ARIA 1.3과 같은 명세서는 브라우저 구현자나 보조 기술 개발자를 위해 작성된 방대한 문서이며, 화요일 오후에 폼을 마크업하는 개발자를 위한 것이 아닙니다. ARIA의 제1원칙인 ‘가능한 한 항상 기본 HTML을 사용하라’는 규칙이 대부분의 사례를 해결하지만, 탭, 트리, 인터랙티브 그리드, 자동 완성 콤보박스, 하위 메뉴가 있는 메뉴처럼 기본 요소로 대체할 수 없는 패턴들이 있습니다. 이런 경우에 참조 시트를 활용하면 시간을 절약할 수 있으며, 무엇보다 오류를 방지할 수 있습니다.

El error más común no es olvidar un rol, sino añadir uno innecesario. “요소에role=“button”`을 추가하는 것은 아무런 도움이 되지 않으며, 잘 만들어진 치트 시트는 어떤 역할이 기본 요소에서 중복되는지, 어떤 역할이 JavaScript를 통한 포커스 관리가 필요한지, 그리고 어떤 속성이 필수이고 선택 사항인지를 명확하게 표시해 줍니다.

액세스 권한이 매우 높습니다.

두 번째 이유는 검증입니다. 역할에는 속성 관계가 있습니다. aria-labelledby는 id를 가리키고, aria-activedescendant는 참조된 요소가 존재하고 보여야 하며, aria-owns는 DOM 순서가 시각적 순서와 일치하지 않을 때만 정당화됩니다. 역할, 필수 속성, 금지 속성을 교차 확인하는 표가 있다면 감사 단계에 가기 전에 오류를 발견할 수 있습니다.

ARIA 역할에 대한 치트 시트가 포함되어 있습니다.

프런트엔드 개발에 유용한 참조 시트는 다섯 가지 기준을 충족해야 합니다. 이 기준들은 제가 이번 비교 분석의 옵션들을 평가하는 데 사용한 정확한 기준들입니다.

• **5가지 역할 범주를 모두 포괄합니다. **WAI-ARIA는 요약, 위젯, 문서 구조, 랜드마크 및 라이브 영역에서 역할을 그룹화합니다. 요약(roletype, widget, input)은 프레임워크에서 사용되지 않습니다. 눈에 보이는 모양 데이터에 대한 좋은 참조입니다.
• 해당 역할에 해당하는 기본 HTML. 이 열이 없으면 참조에는 건드리지 않고 ARIA를 사용하라는 메시지가 표시됩니다.
• 필수, 지원 및 금지된 속성. role="checkbox"에는 aria-checked가 필요합니다. role="heading"에는 aria-level이 필요합니다. role="presentation"은 허용되지 않습니다.
• Patrón de teclado asociado. teclado 관리가 없는 역할은 약속을 포함합니다. role="tablist"는 서로 다른 요소/데레카, Home 및 End를 의미합니다.
• 검색 가능한 형식. 검색 기능, 카테고리별 필터링, 명세 버전 확인 및 코드 조각 복사 가능 여부입니다.

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

다음 표는 가장 강력한 옵션들을 요약한 것입니다. 모두 무료이며, 현재 활발히 유지 관리되고 있고 적용된 명세 버전을 명시하고 있습니다.

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

리소스	접근 방식	커버하는 범주	기본 요소 대응	키보드 패턴	추천 대상
WAI-ARIA 저작 관행 가이드(APG), W3C	Patrones completos con ejemplos	위젯, 랜드마크, 구조, 라이브 영역	예, 각 패턴에 포함	시, 세부사항	구체적인 위젯 구현
MDN 웹 문서, ARIA 역할 참조	Ficha 포 롤	추상적인 내용을 포함하는 모든 내용	시	부분적	특정 역할 확인 시
ARIA 저작 방식, 역할 표시	Tabla rol → 속성	위젯 및 구조	부분적	아니요	필수 속성 확인 시
Deque University, ARIA 참조	Fichas con notas de soporte	위젯 및 랜드마크	예	부분적	스크린 리더별 실제 지원 여부 확인 시
A11Y 프로젝트 체크리스트	검증 목록	전반적	해당 없음	아니요	배포 전 감사 시
HTML-ARIA(W3C), 동등한 표	요소에 대한 권한 부여	모두	예 (이것이 목적임)	아니요	ARIA 사용 여부 결정 시

WAI-ARIA 저작 관행 가이드(APG)

La APG del W3C es la Referencia Canonica para Patrones. Cada Patrón에는 HTML 구조, 역할, 구성, 기술 상호 작용 및 기능 기능이 포함되어 있습니다. Su punto fuerte es que no selimita 역할 목록: explica el comportamiento esperado. Su punto débil es que no es una tabla rápida; 파라 컨설턴트 «qué atributos lleva role="slider"» hay que navegar hasta el patrón 통신원.

APG는 가장 일반적인 위젯 사용자를 아코디언, 경고, 이동 경로, 버튼, 체크박스, 콤보 상자, 대화 상자, 공개, 피드, 그리드, 링크, 목록 상자, 메뉴, 메뉴 표시줄, 라디오 그룹, 슬라이더, 회전 노브, 스위치, 테이블, 탭 목록, 도구 모음, 도구 설명, 그리드 트리 및 트리 보기로 그룹화합니다. 프로젝트에서 이들 중 하나를 사용하는 경우 여기에서 실행하세요.

MDN 웹 문서: la Referencia por rol

MDN은 설명, 필수 속성, 허용 속성, 관련 접근성 문제 및 사양에 대한 링크가 포함된 각 ARIA 역할에 대한 페이지를 유지 관리합니다. 이것은 자신이 무엇을 하고 있는지 알 때 가장 빠른 옵션입니다. 귀하의 적용 범위에는 추상적인 역할과 사용 중인 역할이 포함되어 있지만 많은 알림이 생략되었습니다.

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

실제 세부 사항: MDN의 역할은 더 이상 사용되지 않으며 특정 버전의 미래에 제거될 수도 있습니다. 컨설턴트는 귀하의 롤 케 데스파레세라(Role que desaparecerá)를 채택했습니다.

HTML-ARIA: ARIA innecesario가 필요함

특정 HTML-ARIA 델 W3C 정의, HTML 요소 요소에 따라 역할 ARIA가 중복된 응용 프로그램에 적용됩니다. Es la herramienta decisiva cuando dudas entre usar un elemento nativo o un div con rol. Si el rol que quieres aplicar aparece como redundante para ese elemento, la respuesta es no añadirlo.

Deque University 및 A11Y 프로젝트

Deque University ofrece fichas de rol con notas sobre soporte real en lectores de Pantalla, algo que la especación no cubre porque no es su Cometido. El A11Y 프로젝트 체크리스트에는 역할에 대한 치트 시트가 없으며, 사전 공개 및 보완을 통해 사전 확인 목록으로 기능을 확인할 수 있습니다.

Cómo elegir según tu caso

사전 결정에 의존하는 결정. 프리메로, ¿ya sabes qué rol necesitas? Si la respuesta es sí, MDN es la via más corta. 세군도, 상호 작용이 완료된 위젯을 구성하는 방법이 있나요? APG가 필요한 경우, porque el rol por sí solo는 기술에 대한 설명이 없습니다. Tercero, HTML 기본 및 ARIA에 대한 내용이 있나요? HTML-ARIA에 대해 문의해 보세요.

XHTML 및 CSS 프레임워크에 대한 장비를 갖추기 위해서는 효율적인 조합이 필요합니다: 결정된 HTML-ARIA, MDN 검증 속성에 대한 APG 구현. Una cheat sheet de una sola página sirve como memoria a corto plazo, pero no sustituye a estas tres fuentes cuando aparece un caso límite.

편리한 적용을 위한 추가 기준: JavaScript 기능 수정(gestión de foco, Actualización de aria-expanded, sincronización de aria-selected)이 필요하며 건축 결정에 따라 장식이 필요하지 않습니다. 역할을 잃어버린 역할은 논리 연결에 있어서 역할을 수행하는 데 사용됩니다.

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

오류 frecuentes que ninguna 치트 시트 evita por sí sola

랜드마크 중복의 역할이 지역별로 혼란을 야기합니다. role="main"은 <main>에 중복되어 있으므로; dos role="navigation" sin etiqueta distintiva son ambiguos. La solución es aria-label 또는 aria-labelledby en cada 랜드마크 반복.

상호 작용을 수행할 수 없는 위젯의 역할이 손실됩니다. role="button" sobre un <div> exige tabindex="0" y manejo de Enter y Espacio. 따라서, el rol anuncia un botón que no se puede activar con teclado.

중단된 상태는 시청자 감소의 가장 일반적인 원인입니다. 코드를 열기 위해 변경되지 않는 aria-expanded, 페스타냐가 변경될 때 업데이트되지 않는 aria-selected 또는 고정된role="switch"의 aria-checked. Ninguna tabla lo detector: hace falta probar con teclado y con una reader de la pantalla real.

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

시장에서의 추상적인 역할은 원칙적으로 실수입니다. role="widget", role="input" 또는 role="section"은 HTML에 표시되어서는 안 됩니다. 사양의 jerarquía를 위해 혼자 존재합니다.

주요 내용

• WAI-ARIA 1.2는 82개의 역할을 정의하며, pero la mayoría de proyectos solo usa entre 15 y 20 de forma recurrente입니다.
• ARIA에 대한 기본 등록 - 기존 HTML 기본 정보를 사용하여 HTML-ARIA 델 W3C 테이블을 참조하는 것이 중요합니다.
• La APG del W3C는 기술 상호 작용을 포함하여 위젯의 후원자를 보호할 수 없습니다. MDN은 롤 콘크리트 컨설턴트의 빠른 속도를 보여줍니다.
• Un rol sin gestión de foco y sin realización de estados genera más barreras de accesibilidad que no usar ARIA.
• Ninguna 치트 시트 sustituye la prueba con teclado y con lector de pantalla: los estados desincronizados solo se detector en uso real.

프레군타스 프레쿠엔테스

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

WAI-ARIA 1.2는 추상화, 위젯, 문서 구조, 랜드마크, 라이브 영역 등 82가지 역할을 독립적인 범주로 분류합니다. 역할 추상화는 적용할 내용이 없습니다. 세부 사항을 확인하기 위한 조직자입니다. 실제적으로는 15~20가지 역할을 구별하는 프로젝트 유형을 활용합니다.

ARIA 역할에 대한 치트 시트가 무엇입니까?

우리는 의존합니다. WAI-ARIA Authoring Practices Guide의 W3C에서 위젯 관련 구현을 완료하면 참조 내용을 모두 확인할 수 있습니다. MDN 웹 문서에 대한 자세한 내용은 롤 콘크리트 속성에 대한 컨설턴트의 설명을 참조하세요. 역할 결정에는 HTML 요소가 필요하며, W3C 테이블에는 HTML-ARIA가 결정되어 있습니다.

ARIA를 사용하려면 HTML 기본 요소가 존재합니까?

아니요. ARIA establece que siexiste un elemento HTML con la semántica y el comportamiento que necesitas, se usa ese ese elemento en lugar de un div con rol에 대한 기본 정보입니다. Añadir role="button"은 <button>에 중복되어 있고 기본 언어 학습에 적합하도록 변경되었습니다.

위젯과 랜드마크 역할이 어떻게 다른가요?

‘버튼’, ‘체크박스’, ‘슬라이더’, ‘탭 목록’과 같은 상호작용 제어를 설명하는 위젯의 역할을 잃어버리면 초점 및 기술 작업이 필요합니다. 랜드마크의 역할은 페이지의 지역(‘기본’, ‘탐색’, ‘배너’, ‘콘텐츠 정보’)을 설명하고 지역별로 표시됩니다. Un mismo elemento no debería cumplir ambas funciones.

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

시. WAI-ARIA 1.2에서는 blockquote, caption, code, deletion, emphasis, insertion, meter, paragraph, strong, subscript 및 superscript와 같은 역할을 표시합니다. Algunos의 역할은 obsoletos en versiones postiores입니다. MDN에서 입양에 대한 구체적인 정보를 확인하세요.

ARIA WCAG 역할에 대한 치트 시트가 있습니까?

아니요. 손실 역할 ARIA son una parte del criterio 4.1.2 Nombre, rol y valor, pero WCAG 2.2에는 다음과 같은 많은 요구사항이 포함됩니다: 대조, 초점 표시, 객체 디자인, 텍스트 대체, 구조 설계. 치트 시트를 사용하면 구현 역할을 수정할 수 있지만, 준수 기준에 대한 조건은 없습니다.

출처 및 추가 자료

• 치트 시트 — Wikipedia: 치트 시트(치트 시트라고도 함), 유아용 침대 시트 또는 작업 지원은 빠른 참조에 사용되는 간결한 메모 세트입니다. 치트 시트는 역사적으로 학생들이 사용하지 않은 채 사용되었습니다.