ARIA 역할과 속성
랜드마크 역할과 라이브 영역, aria-* 속성을 적용해 기본 HTML만으로 충분하지 않은 컴포넌트의 접근성을 향상합니다.
ARIA 역할과 속성은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
ARIA란 무엇입니까
ARIA(Accessible Rich Internet Applications)는 요소의 역할, 상태, 속성을 보조 기술에 설명하는 HTML 속성 모음입니다. 기본 HTML로 표현할 수 없는 사용자 지정 위젯을 위한 연결 다리입니다.
ARIA의 첫 번째 원칙: ARIA를 사용하지 마십시오
기본 요소가 필요한 기능을 제공한다면 그것을 사용하십시오. <button>이 <div role="button">보다 낫습니다. 잘못 사용한 ARIA는 ARIA를 전혀 사용하지 않는 것보다 나쁩니다. 접근 가능한 것처럼 보이게 만들면서 사용자를 곤란한 상황에 남겨 두기 때문입니다.
ARIA 속성의 범주
범주는 세 가지입니다. 역할(무엇인지), 속성(비교적 정적이며 aria-label, aria-describedby 등이 해당), 상태(동적이며 aria-expanded, aria-pressed, aria-checked 등이 해당)입니다.
랜드마크 역할
페이지의 주요 영역을 식별합니다. 대부분 HTML5에 대응하는 요소가 있으므로 해당 요소를 우선 사용해야 합니다.
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-label과 aria-labelledby
aria-label: 문자열로 접근 가능한 이름을 제공합니다. aria-labelledby: 다른 요소의 텍스트를 이름으로 참조합니다. 보이는 텍스트가 없거나 충분하지 않을 때 사용하십시오.
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>힌트에 aria-describedby 사용
aria-describedby는 요소를 더 긴 설명과 연결합니다. form 힌트, 오류 메시지, 도구 설명에 유용합니다.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>공개 상태에 aria-expanded 사용
패널을 전환하는 버튼은 aria-expanded = true/false를 노출해야 합니다.
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>전환 버튼에 aria-pressed 사용
켜짐/꺼짐 상태가 있는 버튼(음소거, 굵게)은 aria-pressed를 사용합니다.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>실시간 영역: aria-live
동적으로 업데이트되는 콘텐츠(토스트, 검색 결과, 오류 요약)는 스크린 리더가 변경 사항을 읽어 주도록 실시간 영역에 포함해야 합니다. polite는 잠시 기다리고, assertive는 현재 안내를 중단합니다.
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>role="alert" 간단 표기
role="alert"는 aria-atomic이 적용된 assertive 실시간 영역을 간단히 나타내는 표현입니다. 모든 alert는 사용자의 작업을 중단하므로 신중하게 사용하십시오.
장식용 콘텐츠에 aria-hidden 사용
aria-hidden="true"는 요소를 접근성 트리에서 제거합니다. 텍스트 레이블 옆의 장식용 아이콘에 사용하십시오. 그렇지 않으면 스크린 리더가 아이콘을 중복해서 읽습니다.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>스크린 리더로 테스트
ARIA가 제대로 작동하는지 확인하는 유일한 방법은 직접 테스트하는 것입니다. VoiceOver(macOS/iOS, 무료), NVDA(Windows, 무료), TalkBack(Android, 무료)을 사용할 수 있습니다. VoiceOver로 10분만 확인해도 어떤 감사 도구보다 많은 문제를 발견할 수 있습니다.
빠른 확인
보이는 텍스트 레이블이 없는 아이콘 전용 버튼에는 어떤 ARIA 속성을 설정해야 합니까?
복습: ARIA
ARIA는 보조 기술에 역할, 속성, 상태를 설명합니다. ARIA를 사용하기 전에 기본 HTML을 우선 사용하십시오. aria-label/aria-labelledby는 접근 가능한 이름을 제공합니다. aria-describedby는 힌트에 사용합니다. aria-expanded/aria-pressed는 전환 상태에 사용합니다. aria-live는 동적으로 변경되는 내용을 알릴 때 사용합니다. aria-hidden은 장식용 콘텐츠에 사용합니다. 실제 스크린 리더로 항상 테스트하십시오.
자주 묻는 질문
“ARIA 역할과 속성” 강의는 무료인가요?
네 — “ARIA 역할과 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“ARIA 역할과 속성”에서 뭘 배우나요?
랜드마크 역할과 라이브 영역, aria-* 속성을 적용해 기본 HTML만으로 충분하지 않은 컴포넌트의 접근성을 향상합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“ARIA 역할과 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.