aria-label aria-labelledby 및 aria-describedby

접근 가능한 이름이 중요한 이유

aria-label

<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
     aria-label provides the name: 'Close dialog, button' -->

<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->

aria-labelledby

<h2 id="section-title">Billing Information</h2>
<form aria-labelledby="section-title">
  <!-- Form's accessible name is 'Billing Information' -->
</form>

<!-- Multiple id references: -->
<button aria-labelledby="action-verb object-name">
  Delete
</button>
<span id="object-name" hidden>User Account</span>
<!-- Screen reader: 'Delete User Account, button' -->

aria-describedby

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  aria-describedby="pwd-hint"
>
<p id="pwd-hint">Must be 8+ characters with one uppercase letter and one number.</p>
<!-- Screen reader: 'Password [input]' then reads the description on focus -->

레이블과 설명

랜드마크의 aria-label

<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>

<!-- Screen reader landmark list:
     'Primary, navigation'
     'Breadcrumb, navigation' -->

<!-- When only one nav, aria-label is optional but still helpful -->

구역의 aria-labelledby

<section aria-labelledby="about-heading">
  <h2 id="about-heading">About Our Team</h2>
  <p>We are a team of passionate developers...</p>
</section>
<!-- Screen reader: 'About Our Team, region' when entering section -->

aria-label과 표시되는 텍스트

<button aria-label="Delete account permanently">
  Delete
</button>
<!-- Screen reader hears: 'Delete account permanently'
     Sighted user reads: 'Delete' -->

<!-- Best practice: visible text and aria-label should agree
     If possible, include extra context in visible text too:
     <button>Delete account permanently</button> -->

<!-- aria-label should start with the visible text when possible
     for speech recognition users who use voice commands -->

오류에 aria-describedby 사용하기

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Please enter a valid email address.
</span>
<!-- When input receives focus, screen reader reads:
     'Email [field], invalid. Please enter a valid email address.' -->

여러 aria-describedby 참조

<input
  type="password"
  aria-label="New password"
  aria-describedby="pwd-hint pwd-strength"
>
<p id="pwd-hint">Must be 8+ characters.</p>
<meter id="pwd-strength" aria-label="Password strength" value="2" max="4">Medium</meter>
<!-- Both elements are announced as the description -->

표시되는 레이블과 숨겨진 레이블

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* Visually hidden but in accessibility tree: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

빠른 확인

복습: ARIA 레이블