aria-label과 aria-labelledby 비교
인라인 이름과 참조된 이름 중에서 선택합니다.
aria-label과 aria-labelledby 비교은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이름을 지정하는 두 가지 방법
네이티브 레이블만으로 충분하지 않을 때 사용할 수 있는 ARIA 도구는 두 가지입니다. aria-label은 인라인 문자열에 사용하고, aria-labelledby는 기존 텍스트를 가리킬 때 사용합니다.
aria-label에는 문자열이 들어갑니다
가져올 표시 텍스트가 없을 때 aria-label을 사용하십시오. 읽어 줄 이름을 요소 자체에 직접 입력합니다.
<button aria-label="Search">🔍</button>aria-labelledby에는 ID가 들어갑니다
페이지의 표시 텍스트를 이름으로 사용할 수 있을 때 aria-labelledby를 사용하십시오. 값에는 문자열이 아니라 해당 요소의 id가 들어갑니다.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>표시되는 텍스트를 우선 사용하기
먼저 aria-labelledby를 사용하십시오. 화면에 표시되는 텍스트를 재사용하면 읽어 주는 이름과 표시되는 이름이 자동으로 일치합니다.
labelledby는 여러 ID를 결합할 수 있습니다
aria-labelledby에 공백으로 구분한 여러 id를 지정하면 브라우저가 해당 요소들의 텍스트를 순서대로 결합하여 하나의 이름으로 만듭니다.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby가 label보다 우선합니다
둘 다 있으면 aria-labelledby가 우선합니다. 브라우저는 aria-label을 완전히 무시하므로 두 값이 합쳐질 것이라고 기대하지 마십시오.
요소가 자기 자신을 이름으로 지정할 수 있습니다
aria-labelledby를 사용하면 요소가 자신의 id를 가리킬 수 있습니다. 표시되는 heading 텍스트로 영역의 이름을 지정할 때 유용합니다.
label은 보이지 않습니다
aria-label은 화면에 표시되지 않습니다. 보조 기술이 알리는 내용만 바꾸므로, 시각적으로 보는 사용자에게는 차이가 없습니다.
번역의 함정 주의하기
aria-label은 페이지 번역기가 자주 건너뛰는 일반 텍스트인 반면, labelledby는 실제로 번역되는 표시 콘텐츠를 재사용합니다.
ID는 정확히 일치해야 합니다
aria-labelledby의 id는 실제 요소의 id와 일치해야 합니다. 오타가 있으면 요소에 계산된 이름이 전혀 생기지 않지만 오류가 표시되지 않을 수 있습니다.
진짜 출처를 기준으로 선택하기
이름이 어디에 있는지 생각하십시오. 이미 화면에 표시되어 있다면 aria-labelledby를 사용하고, 보조 기술에만 필요한 이름이라면 aria-label을 사용하십시오.
빠른 확인
섹션에 이미 h2 heading이 표시되어 있습니다. 섹션의 이름은 어떻게 지정해야 합니까?
복습: label 또는 labelledby
기존의 표시 텍스트에는 aria-labelledby를 사용하고, 보이지 않는 인라인 이름에는 aria-label을 사용하며, 두 값이 결합될 것이라고 기대하지 않아야 한다는 것을 배웠습니다. 🎯
자주 묻는 질문
“aria-label과 aria-labelledby 비교” 강의는 무료인가요?
네 — “aria-label과 aria-labelledby 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“aria-label과 aria-labelledby 비교”에서 뭘 배우나요?
인라인 이름과 참조된 이름 중에서 선택합니다. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“aria-label과 aria-labelledby 비교” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 접근 가능한 이름 계산, 쉽게 이해하기
- aria-label과 aria-labelledby 비교
- 추가 맥락을 위한 aria-describedby
- 컨트롤을 무음으로 만드는 흔한 이름 지정 실수