aria-label 의 적용범위 및 주의사항

aria-label 속성은 접근성 향상을 위해 널리 사용되는 속성으로, 일반적으로 대부분의 HTML 요소에 사용할 수 있습니다. 그러나 몇 가지 주의 사항이 있습니다. 모든 요소에 aria-label을 적용할 수 있지만, 일부 요소에서는 aria-label 대신 다른 접근성 속성이나 시맨틱 HTML을 사용하는 것이 더 적절할 수 있습니다.

주의사항 및 예외사항

이미 텍스트 콘텐츠가 있는 요소

aria-label은 시각적으로 표시되지 않는 텍스트 레이블을 제공하는 데 사용됩니다. 따라서 텍스트 콘텐츠가 이미 있는 요소에는 사용하지 않는 것이 좋습니다. 대신 aria-labelledby 속성을 사용하여 다른 요소의 ID를 참조할 수 있습니다.

Submit
Submit
Submit button

<button aria-label="Submit">Submit</button> <!-- 중복 레이블 -->
<button id="submit-btn">Submit</button>
<label for="submit-btn">Submit button</label> <!-- aria-labelledby 사용 예시 -->

폼 컨트롤 요소

대부분의 폼 컨트롤 요소(<input>, <select>, <textarea> 등)에는 aria-label을 사용할 수 있지만, 시각적 레이블(label 요소)을 제공하는 것이 더 적절할 수 있습니다. 시각적 레이블을 사용하면 모든 사용자에게 더 명확한 인터페이스를 제공합니다.

Search

<input type="text" aria-label="Search" /> <!-- aria-label 사용 가능 -->
<label for="search">Search</label>
<input type="text" id="search" /> <!-- 시각적 레이블 사용 예시 -->

표 요소

표 요소의 경우, aria-label보다는 시맨틱 HTML 요소와 속성을 사용하는 것이 더 적절합니다.

Data table

Header 1	Header 2
Data 1	Data 2

<table aria-label="Data table"> <!-- 비권장 -->
  <caption>Data table</caption> <!-- 시맨틱 HTML 사용 예시 -->
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

그룹 요소

aria-label 속성은 그룹 요소(예: <fieldset>, <optgroup>)에는 일반적으로 사용되지 않습니다. 대신 해당 요소의 자식 요소에 레이블을 제공하는 것이 더 적절합니다.

User details Name:

<fieldset aria-label="User details"> <!-- 비권장 -->
  <legend>User details</legend> <!-- 시맨틱 HTML 사용 예시 -->
  <label for="name">Name:</label>
  <input type="text" id="name" />
</fieldset>

사용할 수 있는 주요 요소

대부분의 경우 aria-label은 다음과 같은 요소에 사용할 수 있습니다

상호작용 요소

버튼, 링크, 폼 컨트롤 등 상호작용 가능한 요소에 레이블을 제공할 때 유용합니다.

✖
🏠

<button aria-label="Close">✖</button>
<a href="#" aria-label="Home">🏠</a>
<input type="search" aria-label="Search through site content" />

역할(role) 속성과 함께

비시맨틱 요소에 특정 역할을 부여할 때 aria-label을 사용할 수 있습니다.

⚠️

<div role="button" aria-label="Close">✖</div>
<span role="img" aria-label="Warning">⚠️</span>

장식적 아이콘 또는 그래픽 요소

아이콘이나 그래픽 요소에 의미를 부여할 때 사용됩니다.

❌
ℹ️

<span aria-label="Error">❌</span>
<i aria-label="Info">ℹ️</i>

aria-label은 다양한 HTML 요소에 적용될 수 있지만, 시맨틱 HTML과 접근성 속성을 고려하여 적절하게 사용하는 것이 중요합니다. 요소의 목적과 맥락에 따라 aria-label을 사용할지, 시맨틱 HTML 요소나 다른 접근성 속성을 사용할지 결정하는 것이 좋습니다.