ARIA 및 접근성: label, role, aria-*
레이블을 컨트롤과 연결하고 필요한 곳에 ARIA 역할을 적용하며 스크린 리더를 지원하기 위해 aria-label과 aria-describedby를 사용합니다.
ARIA 및 접근성: label, role, aria-*은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
ARIA란 무엇입니까
ARIA(접근 가능한 풍부한 인터넷 애플리케이션)는 화면 낭독기 같은 보조 기술에 UI 구성 요소의 목적, 상태, 속성을 전달하는 HTML 속성 모음입니다. 특히 기본 HTML에 대응하는 요소가 없는 사용자 지정 위젯에 유용합니다.
ARIA의 첫 번째 규칙
기본 HTML 요소나 속성으로 처리할 수 있다면 ARIA를 사용하지 마십시오. <button>이 <div role="button">보다 항상 낫습니다. 기본 HTML만으로도 접근성을 확보할 수 있습니다.
랜드마크 역할
ARIA 랜드마크 역할을 사용하면 화면 낭독기 사용자가 페이지의 섹션으로 바로 이동할 수 있습니다. 대부분은 의미가 있는 HTML에서 암시됩니다: <main> → role=main, <nav> → role=navigation. 의미 요소를 사용하지 않은 경우에만 역할을 명시적으로 추가하십시오.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label은 요소에 보이지 않는 접근 가능한 이름을 제공합니다. 참조할 화면에 보이는 텍스트 레이블이 없을 때 사용하십시오. 아이콘 버튼에 흔히 사용됩니다.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby는 ID 참조를 사용해 다른 요소의 텍스트를 레이블로 지정합니다. 화면에 보이는 레이블이 이미 있다면 aria-label보다 우선 사용하십시오.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby는 레이블을 보완하는 추가 설명 텍스트(오류 메시지나 안내 문구 등)를 참조합니다. 화면 낭독기는 먼저 레이블을 읽고 그다음 설명을 읽습니다.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded와 aria-haspopup
동적 위젯에는 상태 속성이 필요합니다. aria-expanded는 공개 위젯(아코디언, 선택 목록)이 열려 있는지 닫혀 있는지를 나타냅니다. 상태가 변경되면 JavaScript에서 이 값을 업데이트하십시오.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true"는 요소와 모든 자식 요소를 접근성 트리에서 제거합니다. 이미 화면에 보이는 텍스트로 레이블이 지정된 SVG 아이콘 같은 장식 요소에 사용하십시오.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>라이브 영역: aria-live
aria-live는 화면 낭독기에게 이 영역의 변경 사항을 알리도록 지시합니다. polite는 사용자가 현재 동작을 마칠 때까지 기다립니다. assertive는 즉시 중단하고 알립니다(신중하게 사용하십시오).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert"는 암묵적으로 aria-live=assertive로 동작합니다. 이 역할을 가진 요소에 오류 메시지나 중요한 알림을 삽입하면 화면 낭독기가 즉시 알려 줍니다.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediately접근 가능한 양식 오류
필드에 오류가 발생하면 aria-invalid="true"를 사용하고, aria-describedby로 오류 메시지를 연결하며, role="alert"의 내용을 업데이트하십시오. 이 세 부분으로 구성된 접근 방식을 사용하면 화면 낭독기가 필요한 모든 정보를 전달할 수 있습니다.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>빠른 확인
화면에 보이는 텍스트 레이블이 없을 때 요소에 접근 가능한 이름을 제공하는 ARIA 속성은 무엇입니까?
복습: ARIA 핵심 사항
ARIA보다 기본 HTML을 우선 사용하십시오. 아이콘 버튼에는 aria-label을 사용하십시오. 화면에 보이는 레이블을 참조하려면 aria-labelledby를 사용하십시오. 안내 문구와 오류에는 aria-describedby를 사용하십시오. 공개 위젯에는 aria-expanded를 사용하십시오. 장식 콘텐츠에는 aria-hidden을 사용하십시오. 동적 상태 업데이트에는 aria-live를 사용하십시오. 양식 오류에는 aria-invalid와 role=alert를 함께 사용하십시오.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“ARIA 및 접근성: label, role, aria-*” 강의는 무료인가요?
네 — “ARIA 및 접근성: label, role, aria-*” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“ARIA 및 접근성: label, role, aria-*”에서 뭘 배우나요?
레이블을 컨트롤과 연결하고 필요한 곳에 ARIA 역할을 적용하며 스크린 리더를 지원하기 위해 aria-label과 aria-describedby를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“ARIA 및 접근성: label, role, aria-*” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 양식 컨트롤: input 유형, select, textarea
- ARIA 및 접근성: label, role, aria-*
- 시맨틱 HTML5: 시맨틱 요소와 div 남용 비교
- 양식 검증 속성