ARIA 역할이란 무엇입니까? 개발자를 위한 실용 가이드
ARIA 역할이란 무엇입니까? ARIA 역할은 요소 가 무엇인지, HTML 태그와 상관없이 요소가 어떻게 작동해야 하는지 보조 기술에 알려주는 87개의 정의된 값(WAI-ARIA 1.2 기준)으로 구성된 어휘입니다. ‘버튼’, ‘탐색’ 또는 ‘대화상자’와 같은 역할은 알려진 위젯 유형에 일반 '
ARIA 역할이 존재하는 이유
아리아 역할이 무엇인지 이해하려면 HTML만으로는 해결할 수 없는 구조적 문제를 해결한다는 점을 알아야 합니다. 기본 HTML 요소에는 암시적 의미가 있습니다. <button>은 자신을 버튼으로 알리고, 초점을 맞출 수 있고, Enter와 스페이스바에 응답하고, 필요할 때 누른 상태를 표시합니다. 개발자가 사용자 정의 위젯(콤보박스, 탭 패널, 트리 보기)을 만들 때 의미가 없는 <div> 및 <span>을 사용하는 경우가 많습니다. ARIA 역할은 작성자가 누락된 의미를 명시적으로 기술할 수 있도록 하여 이러한 격차를 해소합니다.
WAI-ARIA 사양은 W3C의 액세스 가능한 리치 인터넷 애플리케이션 워킹 그룹(Accessible Rich Internet Application Working Group)에서 관리합니다. 첫 번째 버전인 ARIA 1.0은 2014년에 W3C 권장 사항이 되었습니다. 2017년에는 ARIA 1.1이 뒤따랐고, ARIA 1.2는 2023년에 권장 사항 상태에 도달했습니다. 각 개정마다 역할, 상태 및 속성이 추가되었으며 각각은 키보드의 예상 동작을 설명하는 작성 사례 문서에 연결되어 있습니다.
주요 차이점은 역할을 다른 두 ARIA 범주와 구분합니다. 역할은 “이게 뭐죠?”라고 대답합니다. 상태와 속성이 대답합니다. “어떤 상태입니까?” 그리고 “무엇과 관련이 있나요?” role="checkbox"는 위젯 유형을 선언합니다. aria-checked="true"는 현재 상태를 나타냅니다. 이 둘을 혼동하는 것은 사용자 정의 위젯이 손상되는 가장 일반적인 원인 중 하나입니다.
6가지 역할 범주
ARIA 역할이 무엇인지 이해하려면 ARIA 사양이 역할을 6개 제품군으로 그룹화한다는 것을 아는 것이 도움이 됩니다. 제품군을 이해하면 역할이 지원하는 상태와 속성, 적용되는 키보드 패턴을 예측할 수 있습니다.
관련 항목: — 무료로 계획을 세우는 위젯 de empezar hoy mismo.
| 카테고리 | 목적 | 대표 역할 |
|---|---|---|
| 추상 | 마크업에 사용되지 않은 슈퍼클래스 정의 | widget, input, section |
| 위젯 | 대화형 컨트롤 | button, checkbox, slider, tab |
| 문서 구조 | 페이지 랜드마크 및 지역 | banner, main, navigation, region |
| 랜드마크 | 탐색 가능한 페이지 영역(구조의 하위 집합) | banner, complementary, contentinfo, form |
| 라이브 지역 | 동적 콘텐츠 변경 사항 발표 | alert, status, log, timer |
| 창 | 브라우저 또는 애플리케이션 창 | dialog, alertdialog |
추상 역할은 분류를 구성하는 데에만 사용됩니다. 작성자는 마크업에 role="widget" 또는 role="input"을 쓰면 절대 안 됩니다. 이로 인해 정의되지 않은 동작이 발생하고 유효성 검사가 실패합니다. 나머지 5개 카테고리는 실제로 적용되는 카테고리입니다.
암묵적 역할과 ARIA의 첫 번째 규칙
각 HTML 요소에는 AAM(HTML Accessibility API Mapping) 사양에 정의된 암시적 ARIA 함수(aria 역할이 무엇인지 설명)가 있습니다. <nav> 요소에는 암시적인 role="navigation"이 있습니다. <ul>에는 암시적인 role="list"가 있습니다. <h1>에서 <h6>까지에는 role="heading"이 있습니다. <table>에는 role="table"이 있습니다.
ARIA 사용에 대한 첫 번째 W3C 규칙은 다음과 같이 명확하게 명시합니다. 기본 HTML 요소 또는 속성이 이미 필요한 의미와 동작을 전달하는 경우 ARIA와 함께 요소를 재사용하는 대신 이를 사용하십시오. <button>에 role="button"을 추가할 필요는 없습니다. 더 나쁜 것은 <div>에 role="button"을 추가하면 알림을 받을 수 있지만 동작은 없습니다. 즉, 포커스도 없고 키보드 활성화도 없고 양식 제출도 없습니다.
볼만한 가치가 있는 곳: — Accesibilidad gestionada: 자동화와 인간의 개정 결합.
중복이 항상 무해한 것은 아닙니다. 암시적 역할을 재정의하면 보조 기술이 의존하는 의미가 손실될 수 있습니다. <table>에 role="presentation"을 작성하면 테이블 의미 체계가 완전히 제거됩니다. 이는 때때로 레이아웃 테이블에서는 의도적이지만 데이터 테이블에서는 재앙이 됩니다.
역할이 상태 및 속성과 상호 작용하는 방법
역할은 자신이 지원하는 상태와 속성에 대한 컨테이너 역할을 합니다. 사양은 어떤 속성이 어떤 역할에 유효한지 정의하며 브라우저는 접근성 트리에서 지원되는 조합만 노출합니다. aria 역할이 무엇인지 이해하면 role="checkbox"가 true, false 또는 mixed 값을 사용하여 aria-checked를 지원한다는 것을 아는 데 도움이 됩니다. role="slider"는 aria-valuenow, aria-valuemin, aria-valuemax 및 선택적으로 aria-valuetext를 지원합니다. role="combobox"는 aria-expanded, aria-controls 및 aria-activedescendant를 지원합니다. role="button"에 aria-checked를 적용하는 것은 의미가 없으며 일부 화면 판독기에서는 무시되거나 혼란스러운 결과를 생성합니다.
필수 속성도 중요합니다. aria-checked가 없는 role="checkbox"는 유효하지 않습니다. 상태는 필수이지 선택사항이 아닙니다. aria-valuenow가 없는 role="slider"를 사용하면 사용자가 현재 값을 결정할 수 없습니다. ARIA 사양에서는 이를 “필수 상태 및 속성”으로 표시하고 axe-core 및 IBM Equal Access Accessibility Checker와 같은 적합성 검사기에서는 해당 사항이 없음을 지적합니다.
역할, 접근성 트리 및 브라우저 지원
브라우저는 ARIA 기능을 플랫폼 접근성 API(Windows의 UIA, macOS의 AXAPI, Linux의 ATK/AT-SPI)로 변환하고 화면 판독기는 이러한 API를 사용합니다. 어떤 브라우저도 올바르게 할당하지 않은 역할은 사실상 사용자에게 보이지 않습니다.
지원은 기능과 브라우저에 따라 다릅니다. “버튼”, “링크”, “헤더”, “목록”, “내비게이션”과 같은 핵심 기능이 보편적으로 지원됩니다. 최신 또는 보다 전문화된 역할(Digital Publishing의 WAI-ARIA 모듈의 “피드”, “수학”, “문서 각주”)은 지원이 더 불완전합니다. role=“switch”는 최신 브라우저에서 지원되지만 10년 전에 일관성 없이 발표되었습니다.
청중이 사용하는 실제 조합에 대한 테스트는 여전히 필수적입니다. Firefox의 NVDA에서 작동하는 위젯은 Safari의 VoiceOver에서는 다르게 작동할 수 있습니다. 두 화면 판독기가 서로 다른 플랫폼 API를 사용하고 서로 다른 경험적 방법을 적용하기 때문입니다.
관련 항목: — La certificación profesional que acredita tu experiencia en accesibilidad.
랜드마크 역할 및 페이지 구조
랜드마크 역할을 통해 스크린 리더 사용자는 페이지 영역으로 직접 이동할 수 있습니다. 8가지 랜드마크 역할은 ‘배너’, ‘보완’, ‘콘텐츠정보’, ‘양식’, ‘메인’, ‘탐색’, ‘지역’ 및 ‘검색’입니다. 최신 HTML에는 대부분의 경우 기본적으로 동등한 기능이 있습니다. <header>는 banner가 되고, <footer>는 contentinfo가 되고, <main>은 main이 되고, <nav>는 navigation이 되고, <aside>는 complementary가 되고, 접근 가능한 이름이 있는 <form>은 form이 되고, 접근 가능한 이름이 있는 <section>은 region이 됩니다.
기본 요소를 사용하는 것은 CSS 또는 JavaScript가 실패하더라도 작동하고 역할/속성 충돌 위험을 줄여주기 때문에 선호됩니다. search 랜드마크에는 기본 HTML에 해당하는 것이 없으므로 role="search"는 여전히 검색 영역에 대한 올바른 선택입니다.
흔히 저지르는 실수는 <main> 또는 <article> 내부에 있는 <div>에 role="banner"를 적용하는 것입니다. 랜드마크 역할은 특정 다른 역할 내에 중첩되지 않은 경우에만 랜드마크를 생성합니다. main 내부의 banner는 전혀 랜드마크로 표시되지 않습니다. DOM에서의 위치는 역할 값만큼 중요합니다. 아리아 역할이 무엇인지 궁금해하는 사람들을 위해 이러한 랜드마크는 사양의 핵심 부분입니다.
라이브 지역 역할
아리아 역할이 무엇인지 고려할 때 라이브 지역 역할은 초점을 바꾸지 않고 콘텐츠 변경 사항을 발표합니다. 네 가지 라이브 영역 기능은 ‘alert’, ‘status’, ‘log’, ‘timer’뿐 아니라 보다 일반적인 ‘marquee’입니다. 각각은 암묵적으로 ‘aria-live’ 값을 전달합니다. 실제로 ‘alert’와 ‘log’는 각각 ‘assertive’와 ‘polite’를 의미하고 ‘status’는 ‘polite’를 의미합니다.
‘경고’와 ‘상태’ 중에서 선택하는 것은 실제 결과를 가져오는 설계 결정입니다. ‘경고’는 스크린 리더가 읽는 모든 내용을 중지합니다. 이는 오류 및 긴급 알림에 적합하지만 과도하게 사용하면 해롭습니다. ‘상태’는 진행 메시지 및 확인 텍스트와 동시에 일시 중지될 때까지 기다립니다.
콘텐츠가 변경되기 전에 라이브 영역이 DOM에 존재해야 합니다. role="alert" 요소와 해당 텍스트를 동시에 삽입하면 변경 당시 해당 지역이 존재하지 않았기 때문에 공지가 없는 경우가 많습니다. 신뢰할 수 있는 패턴은 페이지 로드 시 빈 라이브 영역을 렌더링하고 나중에 해당 텍스트 콘텐츠를 업데이트하는 것입니다.
ARIA 역할을 사용하지 말아야 할 경우
ARIA 사용의 두 번째 규칙은 작성자가 실제로 필요한 경우가 아니면 기본 의미 체계를 변경해서는 안 된다는 것입니다. 다섯 번째 규칙은 기능에 관계없이 모든 대화형 요소는 키보드를 통해 액세스하고 집중할 수 있어야 한다는 것입니다.
역할을 추가해도 동작이 추가되지는 않습니다. <div>의 role="button"으로 인해 초점을 맞추지 못하고 입력이나 스페이스바에 응답하지 않으며 양식을 제출하지 못하게 됩니다. Enter 및 스페이스바 입력을 위한 키 입력 처리기인 tabindex="0"을 추가해야 하며 종종 “역할에 적합한” 상태 관리를 추가해야 합니다. 이 시점에서 실제 “
자주 묻는 질문
간단히 말해서 ARIA 역할은 무엇입니까?
ARIA 역할은 요소가 무엇을 나타내는지 보조 기술에 알려주기 위해 HTML 요소에 첨부하는 레이블입니다. <div role='button'>은 일반 텍스트가 아닌 버튼으로 표시됩니다. 역할은 기본 태그가 제공하지 않는다는 의미를 제공하지만 자체적으로 동작, 포커스 처리 또는 키보드 지원을 추가하지는 않습니다.
ARIA 역할과 ARIA 속성의 차이점은 무엇입니까?
역할은 요소의 유형을 설명하고 속성은 요소의 상태, 값 또는 관계를 설명합니다. role='slider'는 슬라이더를 식별합니다. aria-valuenow='50'은 현재 위치를 보고하고 aria-labelledby는 해당 레이블을 가리킵니다. 역할과 속성은 함께 사용되며 각 역할은 지원하는 속성을 정의합니다.
ARIA 역할은 몇 개인가요?
WAI-ARIA 1.2는 추상, 위젯, 문서 구조, 랜드마크, 라이브 영역 및 창의 6개 범주로 그룹화된 87개의 역할을 정의합니다. 위젯 및 입력과 같은 추상 역할은 사양의 내부 분류에만 존재하며 HTML로 작성해서는 안 됩니다. 사양이 개정될 때마다 숫자가 늘어납니다.
시맨틱 HTML 대신 ARIA 역할을 사용해야 합니까?
아니요. ARIA 사용의 첫 번째 규칙은 필요한 의미와 동작을 갖춘 기본 HTML 요소가 존재할 때마다 해당 요소를 선호한다는 것입니다. <div role='button'> 대신 <button>을 사용하고, <div role='navigation'> 대신 <nav>를 사용하세요. ARIA 역할은 적합한 기본 요소가 없는 경우를 대체합니다.
ARIA 역할은 모든 브라우저와 스크린 리더에서 작동합니까?
버튼, 링크, 제목, 탐색과 같은 핵심 역할은 최신 브라우저와 화면 판독기에서 안정적으로 지원됩니다. 디지털 출판 모듈의 역할을 포함하여 더 새로운 역할이나 더 전문화된 역할은 더 다양한 지원을 제공합니다. 청중이 사용하는 특정 브라우저와 스크린 리더 조합으로 테스트해야만 확신할 수 있습니다.
ARIA 역할을 추가하면 접근성이 손상될 수 있나요?
예. 암시적 역할을 재정의하면 role='presentation'이 데이터 테이블에 적용될 때와 같이 유용한 의미가 손실될 수 있습니다. 사용자 정의 키보드 처리가 불완전한 경우 role='application'을 적용하면 사용자가 차단될 수 있습니다. 기본 요소의 중복 역할은 불필요한 소음을 발생시키고 때로는 공지 사항이 상충되는 결과를 낳습니다.
¿ Cumplir WCAG가 코드를 작성하고 있습니까?
48시간 동안 WCAG에 대한 IA의 중첩