1. 접근하기 쉬운 이름과 설명 제공

소개

접근 가능한 이름과 적절한 경우에 요소들에 설명을 제공하는 것은 접근 가능한 웹 경험을 만드는 사람들의 가장 중요한 책임중 하나 입니다. 대부분의 요소에서 그렇게 하는 것은 간단하지만 기술적 실수는 흔하고 쉽게 발생할 수 있으며 이는 보조 기술 사용자를 막을 수 있습니다. 이번 장에서는 효과적으로 접근 가능한 이름과 설명을 작성하기 위해서 언제 제공해야 하는지, 그 목적이 무엇인지, 브라우저가 어떻게 다루는지와 코딩과 구성 규칙들을 설명합니다. 또한 다음과 같은 네이밍 및 설명 기법과 WAI-ARIA 속성을 사용하는 방법을 안내합니다:

• 네이밍(Naming):
  • 자식 컨텐츠를 사용한 네이밍
  • aria-label 속성을 사용한 네이밍.
  • aria-labelledby 속성을 통한 컨텐츠 네이밍 참조.
  • label 요소를 사용한 form 컨트롤 네이밍.
  • legend 요소를 통한 fieldsets.
  • captions 을 통한 table, figures 네이밍.
  • titles와 placeholders에서 파생된 대체 네이밍.
• 설명(Describing):
  • aria-describedby을 사용한 컨텐츠 설명 참조.
  • captions을 사용한 tables, figures 설명.
  • titles에서 파생된 설명.

접근 가능한 네임과 설명은 무엇인가?

접근 가능한 이름은 일반적으로 1~3단어의 짧은 문자열로, 작성자가 보조 기술 사용자에게 요소에 대한 라벨을 제공하기 위해 요소와 연관시킵니다. 예를 들어 입력 필드의 접근 가능한 이름은 '사용자 아이디'이거나 버튼의 이름은 '제출'일 수 있습니다

접근 가능한 이름은 스크린 리더를 사용하는 보조 기술 사용 유저들에 두 가지 주요 목적을 제공합니다.

1. 요소의 의도와 목적을 전달한다.
2. 페이지에서 다른 요소들과 요소를 구별할 수 있게 한다.

WAI_ARIA 스펙과 WCAG 모두 포커스 가능하고 상호작용 가능한 모든 요소에 대한 접근 가능한 이름을 필요로 합니다. 또한 대화 상자와 테이블 및 region과 같은 일부 구조적 컨테이너에도 이름이 필요합니다. 다른 많은 요소들도 이름을 가질수는 있지만 이름이 접근성 경험을 향상 시키는 것인지는 주변 컨텍스트의 다양한 특성들에 결정됩니다. 마지막으로 몇가지 요소들에 기술적으로는 이름 지정이 가능하지만 도움되지 않을 수 있습니다. 역할별 접근 가능한 이름 지침 섹션에는 모든 ARIA 역할에 대한 이름 지정 요구 사항과 가이드라인이 나와 있습니다.

접근 가능한 설명 또한 작성자가 제공하고 보조 기술이 랜더링 하게될 문자열입니다. 작성자들은 input 필드를 위한 포맷 요구사항이나 지침같은 요소에 관련된 추가적인 정보를 설명을 제공합니다.

보조 기술들은 이름들을 설명들과 다르게 제공합니다. 일반적으로 스크린 리더들은 이름과 역할을 먼저 말합니다. 예를 들면 "대화 음소거" 이름을 가진 버튼이 있다면 "대화 음소거 버튼" 로 말합니다. 만약에 요소가 상태를 가지고 있다면 이름과 역할 앞 뒤에서 말할 수 있고 일반적으로 이름과 역할 이후에 말합니다. 예를들어 "대화 음소거" Switch가 "off"상태라면 "대화 음성 스위치 버튼 off"라고 읽게 됩니다. 설명들은 일반적으로 이름보다 길고 선택적인 문자열이기 때문에 보통 마지막에 나오고 약간 딜레이가 있습니다. 예를 들어 "대화 음소거 스위치 버튼 off,이 대화에서 활동에 대한 알림 및 알림을 무음으로 설정합니다." 장황함을 줄이기 위해서 어떤 스크린리더들은 기본으로 읽지 않는 대신 유저들에게 설명이 있다고 알려주고 사용자들이 어떤 버튼을 누르면 설명을 읽게 되어 있습니다.

이름과 설명은 어떻게 전달되는가?

접근 가능한 이름 또는 설명 문자열을 텍스트를 포함하기 위한 여러 요소들과 속성들이 있고 작성자는 무수하고 다양한 방법으로 조합할 수 잇기 때문에 브라우저는 매우 복잡한 알고리즘을 구현하여 문자열을 조합합니다. (접근 가능한 이름 계산)[]과 (접근 가능한 설명)[]에서 알고리즘과 우선순위 구현에 대한 자세한 설명을 하고 있습니다. 하지만 이와 같은 알고리즘은 거의 모든 상황에서 (이름 지정 기법)[] 및 (설명 기법 섹션)[]에 설명된 코딩 패턴으로 충분하기 때문에 대부분의 작성자들은 세부 사항에 대한 이해는 필요 없습니다.

기본 네이밍 규칙들

규칙 1: 경고를 준수하고 철저히 테스트하세요

아래 나오는 여러 (네이밍 기법)[]에는 ARIA 스펙에서 금지하거나 아직 완전히 지정되지 않은 회색 영역에 속하는 특정 코딩 패턴들에 대한 경고하는 노트를 포함하고 있습니다. 이러한 금지되거나 모호한 패턴 중 일부는 논리적으로 보일 수 있으며 일부 브라우저에서 원하는 이름을 생성할 수도 있습니다. 그러나 브라우저 간 일관성 있는 결과를 제공할 가능성은 낮으며, 브라우저 간 이름 계산의 일관성을 개선하기 위한 작업이 진행됨에 따라 시간이 지나면서 일관성이 더욱 떨어질 수 있습니다.

네이밍 기술에서 제공하는 경고를 준수하는 것 외에도, 브라우저가 계산한 이름이 기대에 부합하는지 확인하기 위해 테스트하는 것이 매우 중요합니다.

규칙 2: 가시적인 텍스트를 선호하세요

유저 인터페이스가 적절하게 접근 가능한 이름으로 제공할 수 있는 시각적인 텍스트를 포함하고 있을때 시각적인 텍스트를 접근 가능한 이름으로 사용하면 유지 보수가 간소화 되고 버그가 방지되며 언어 변역 요구 사항이 줄어듭니다. 이름이 마크업에서만 존재하고 시각적으로 안보이는 텍스트일때 접근 가능한 이름을 생성할때 유저 인테페이스 디자인이나 컨텐츠가 변경 되었을때 업데이트 되지 않을 더 큰 가능성이 있습니다.

만약에 input 필드나 버튼같은 상호작용적인 요소에 시각적으로 지속되는 텍스트 라벨을 가지고 있지 않은 경우 디자인을 조정하여 텍스트 라벨을 포함하도록 하는 것이 좋습니다. 이는 더욱 견고한 접근 가능한 이름을 위한 출처를 제공하는것 뿐만 아니라 보이지 않는 접근 가능한 이름을 표시하는 보조 기술 사용을 못하는 장애를 가진 많은 사람들에게 시각적인 텍스트 라벨들의 접근성을 향상 시킵니다. 대부분의 경우, 시각적인 텍스트 라벨은 모든 사용자가 사용자 인터페이스를 더 쉽게 이해할 수 있도록 합니다.

규칙 3: 기본 기술을 선호하세요

HTML 문서들에서 가능하면 form 요소를 위한 HTML label 요소나 table을 위한 caption 처럼 HTML 네이밍 기법에 의존하는것이 좋습니다. 유연성은 떨어지지만 단순하고 눈에 보이는 텍스트에 의존하기 때문에 강력한 접근성 환경을 보장하는 데 도움이 됩니다. 여러 (네이밍 기법)[]들은 ARIA 속성 대신 HTML 기능들을 사용하여 얻을 수 있는 접근성 이점을 강조합니다.

규칙 4: 브라우저 폴백을 피하세요

작성자가 명명을 위한 요소나 속성을 사용하여 접근 가능한 이름을 지정하지 않을 때, 브라우저는 폴백 방법에 의존하여 이름을 생성하려고 시도합니다. 예를 들어, HTML 타이틀 및 플레이스홀더 속성은 접근 가능한 이름의 마지막 리소스 소스로 사용됩니다. 이러한 속성의 목적이 네이밍이 아니기 때문에, 그 내용은 일반적으로 낮은 품질의 접근 가능한 이름을 생성하여 효과적이지 않습니다.

규칙 5: 간결하고 유용한 이름을 사용하세요

혼잡한 화면들과 모호한 아이콘들이 시각적으로 사용성을 떨어트리는 것처럼 과도하게 길고 불충분하게 구별되거나 불분명한 접근 가능한 이름은 비시각적 형태의 사용자 인터페이스에 의존하는 사람에게는 상호작용을 매우 어렵게 만들거나 심지어 불가능하게 만듭니다. 다른 말로는 접근 가능한 웹 경험을 위해서는 접근 가능한 이름들이 반드시 효과적이여야 합니다. (효과적이고 유저 친화적인 이름)[] 섹션에서 간결하고 명확한 지침을 제공합니다.

네이밍 기법

자식 컨텐츠를 활용한 네이밍

특정 요소들은 포함하고 있는 컨텐츠에서 이름을 얻습니다. 예를들어 다음 link는 "Home"입니다.

<a href="/">Home</a>

보조 기술은 link나 button 같은 요소를 랜더링할때 콘텐츠로 부터 접근 가능한 이름을 얻는 경우 사용자가 요소를 인식 할 수 있는 유일한 접근 가능한 이름은 콘텐츠 입니다. 이는 접근 가능한 이름이 추가적인 값이나 콘텐츠 요소에 라벨로 표현되는 텍스트 필드나 테이블 같은 다른 요소와 대조적입니다. 예를 들면 테이블의 접근 가능한 이름은 caption 요소를 통해서 전달할 수 있고 보조 기술들은 caption과 테이블 안에 있는 다른 모든 콘텐츠를 랜더링 합니다.

다음 role들 중 하나를 가지고 있는 요소들은 기본값으로 하위 콘텐츠에서 계산된 문자열로 이름을 지정합니다.

• button
• cell
• checkbox
• columnheader
• gridcell
• heading
• link
• menuitem (content contained in a child menu element is excluded.)
• menuitemcheckbox
• menuitemradio
• option
• radio
• row
• rowheader
• switch
• tab
• tooltip
• treeitem (content included in a child group element is excluded.)

요소의 콘텐츠에서 이름을 계산할때 유저 에이전트는 재귀적으로 자손 요소들을 순회하고 각 자손들을 위한 이름을 계산하고 결과 문자열을 연결합니다. group 자손인 treeitem 요소들이나 menu 자손인 menuitem 요소들 같은 두 가지 특별한 경우에서는 특정 자손들은 무시됩니다. 예를 들어 다음 tree에서 첫번째 tree의 이름은 "Fruits"이며 나머지 "Apples", "Bananas", "Oranges"는 무시됩니다.

<ul role="tree">
  <li role="treeitem">Fruits
    <ul role="group">
      <li role="treeitem">Apples</li>
      <li role="treeitem">Bananas</li>
      <li role="treeitem">Oranges</li>
    </ul>
  </li>
</ul>

경고 만약 자식 콘텐츠로 부터 네이밍을 지원하는 위에 있는 role들을 사용하는 요소가 aria-label이나 aria-labelledby를 사용하여 이름이 지정되면 요소 안에서 포함한 콘텐츠와 자손들은 자손 콘텐츠가 aria-labelledby로 지정되지 않는 이상 보조 기술로부터 가려지게 됩니다. 위의 요소 중 하나의 콘텐츠를 재정의하기 위해 이러한 속성 중 어느 하나를 사용하는 것을 강력히 피할 것을 권장합니다. 즉 보조 기술 사용자에게 콘텐츠를 숨기는 것이 유익한 상황에서만 권장됩니다. 또한, 이러한 속성 중 하나를 사용하여 보조 기술 사용자로부터 보이는 콘텐츠를 숨기는 상황에서는 보조 기술을 사용한 철저한 테스트가 특히 중요합니다.

aria-label 문자열 속성를 통한 네이밍

aria-label 프로퍼티는 작성자들이 요소에 시각적으로 보이지 않은 문자열을 전달해서 이름을 지정 하게 합니다. 예를 들어 다음 버튼의 name은 "Close" 입니다.

<button type="button" aria-label="Close">X</button>

aria-label 프로퍼티는 시각적으로 텍스트 컨텐츠가 보이지 않을때 적절한 접근 가능한 이름을 제공하는데 유용합니다.

aria-label 프로퍼티는 보조 도구 사용자들에게 요소의 role에 따라 두 가지 다른 방법으로 영향을 미칩니다. 자식 콘텐츠로 부터 네이밍을 가져오는 방식을 지원하는 role을 사용한다면 보조 기술 사용자들로 부터 자손 콘텐츠를 가리게 되고 aria-label로 대체 되게 됩니다. 반면에 다른 요소 타입에서는 보조 기술들은 aria-label과 요소의 콘텐츠 둘다 랜더링하게 됩니다. 예를 들어 다음 요소의 이름은 "Product"입니다.

<nav aria-label="Product">
  <!-- list of navigation links to product pages -->
</nav>

스크린 리더 유저가 navigation 리젼을 만날때 role 요소의 이름을 듣게 되고 해당 영역에 포함된 링크를 읽을 수 있습니다.

경고 aria-label이 자식 콘텐츠에서 이름을 지원하는 역할 중 하나를 가진 요소에 적용되면, 해당 요소 및 하위 요소에 포함된 콘텐츠가 보조 기술 사용자에게 숨겨집니다. 보조 기술 사용자에게 콘텐츠를 숨기는 것이 유익한 드문 경우를 제외하고는 이러한 요소의 콘텐츠를 재정의하기 위해 aria-label을 사용하는 것을 강력히 피할 것을 권장합니다.

paragraphs이나 list item과 같은 특정 유형의 요소는 aria-label로 이름을 지정해서는 안 됩니다. 이러한 요소는 Accessible Name Guid ance by Role 섹션의 표에 나와 있습니다.

aria-label의 값은 시각적으로 렌더링되지 않기 때문에, 예상되는 이름이 사용자에게 제대로 제공되는지 확인하기 위해 보조 기술을 사용한 테스트가 특히 중요합니다.

사용자 인터페이스가 여러 언어로 번역될 때, aria-label 값도 번역되도록 해야 합니다.

참조된 콘텐츠를 통해 aria-labelledby로 이름 지정하기

aria-labelledby 속성은 작성자가 페이지의 다른 요소를 참조하여 접근 가능한 이름을 정의할 수 있게 합니다. 예를 들어, 다음 스위치는 이전 형제 요소의 텍스트 콘텐츠에 의해 이름이 지정됩니다.

<span id="night-mode-label">야간 모드</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>

aria-labelledby를 사용하는 것은 이 상황에서 for 속성을 가진 HTML label 요소를 사용하는 것과 비슷하지만, 중요한 차이점은 브라우저가 라벨링 요소를 클릭해도 자동으로 라벨된 요소를 활성화하지 않는다는 점입니다. 이는 작성자의 책임입니다. 그러나 HTML label은 span 요소를 라벨링하는 데 사용할 수 없습니다. 다행히도, type="checkbox"를 가진 HTML input은 ARIA 스위치 역할을 허용하므로, 다음 접근 방법을 사용하면 보다 견고한 솔루션을 만들 수 있습니다.

<label for="night-mode">야간 모드</label>
<input type="checkbox" role="switch" id="night-mode">

aria-labelledby 속성은 다양한 상황에서 유용합니다. 그 이유는 다음과 같습니다:

• 브라우저가 접근 가능한 이름을 계산할 때 가장 높은 우선순위를 가지며, 자식 콘텐츠 및 모든 다른 이름 지정 속성, 포함하여 aria-label을 무시합니다.
• 여러 요소의 콘텐츠를 단일 이름 문자열로 연결할 수 있습니다.
• 요소의 가시성에 관계없이 콘텐츠를 포함합니다. 즉, HTML hidden 속성, CSS display: none 또는 CSS visibility: hidden을 가진 요소의 콘텐츠도 계산된 이름 문자열에 포함됩니다.
• 입력 요소의 값을 포함합니다. 예를 들어, 텍스트박스를 참조하면 텍스트박스의 값이 계산된 이름 문자열에 포함됩니다.

aria-labelledby로 숨겨진 요소를 참조하는 예시는 야간 스위치 컨트롤의 라벨일 수 있습니다:

<span id="night-mode-label" hidden>야간 모드</span>
<input type="checkbox" role="switch" aria-labelledby="night-mode-label">

일부 경우에는 요소 자체의 콘텐츠와 다른 요소의 콘텐츠를 결합한 이름이 가장 효과적입니다. aria-labelledby는 이름 계산에서 가장 높은 우선순위를 가지므로, 이러한 상황에서는 aria-labelledby를 사용하여 요소 자체와 다른 요소를 모두 참조할 수 있습니다. 다음 예제에서 "더 읽기..." 링크는 요소 자체와 기사 제목에 의해 이름이 지정되어 링크의 이름은 "더 읽기... 벌을 구하는 7가지 방법"이 됩니다.

<h2 id="bees-heading">벌을 구하는 7가지 방법</h2>
<p>벌이 빠르게 사라지고 있습니다. 도움이 될 수 있는 7가지 방법을 확인해보세요.</p>
<p><a id="bees-read-more" aria-labelledby="bees-read-more bees-heading">더 읽기...</a></p>

aria-labelledby로 여러 요소를 참조할 때, 각 참조된 요소의 텍스트 콘텐츠는 aria-labelledby 값에 지정된 순서대로 연결됩니다. 요소가 여러 번 참조되면 첫 번째 참조만 처리됩니다. 여러 요소의 콘텐츠를 연결할 때, 브라우저는 선행 및 후행 공백을 제거하고 각 요소의 콘텐츠를 단일 공백으로 구분합니다.

<button id="download-button" aria-labelledby="download-button download-details">다운로드</button>
<span id="download-details">PDF, 2.4 MB</span>

위 예제에서 버튼의 접근 가능한 이름은 "다운로드 PDF, 2.4 MB"가 되며, "다운로드"와 "PDF" 사이에 공백이 있고 "다운로드PDF, 2.4 MB"가 아닙니다.

경고 aria-labelledby 속성은 체인 형식으로 사용할 수 없습니다. 즉, aria-labelledby를 가진 요소가 또 다른 aria-labelledby를 가진 요소를 참조하는 경우, 참조된 요소의 aria-labelledby 속성은 무시됩니다. aria-labelledby로 참조된 요소가 이름 계산 중에 두 번 이상 참조되면, 두 번째 및 그 이후의 모든 참조는 무시됩니다. 단락 및 목록 항목과 같은 특정 유형의 요소는 aria-labelledby로 이름을 지정해서는 안 됩니다. 이러한 요소들은 "역할에 따른 접근 가능한 이름 가이드" 섹션의 표에서 확인할 수 있습니다. 자식 콘텐츠에서 이름을 지원하는 역할을 가진 요소에 aria-labelledby가 적용되면, 보조 기술 사용자에게 해당 요소 및 하위 요소에 포함된 콘텐츠가 숨겨지게 됩니다. 이는 aria-labelledby로도 참조되지 않는 한 해당됩니다. 이러한 요소의 콘텐츠를 덮어쓰는 것은 보조 기술 사용자에게 콘텐츠를 숨기는 것이 유익한 드문 상황을 제외하고는 피하는 것이 좋습니다. aria-labelledby를 사용하여 요소의 이름을 계산하는 것은 복잡할 수 있으며 숨겨진 콘텐츠를 참조할 수 있으므로, 예상된 이름이 사용자에게 제대로 표시되는지 확인하기 위해 보조 기술로 테스트하는 것이 특히 중요합니다.

label 요소로 form 컨트롤 이름 지정하기

HTML label 요소는 작성자가 label 역할을 하는 콘텐츠를 식별하고 이를 폼 컨트롤과 연관시키도록 합니다. label 요소가 폼 컨트롤과 연관되면, 브라우저는 label 콘텐츠에서 폼 컨트롤의 접근 가능한 이름을 계산합니다. 예를 들어, 체크박스 옆에 표시된 텍스트는 시각적으로 체크박스와 연관되어 체크박스 label로 이해됩니다. 그러나 텍스트가 프로그램적으로 체크박스와 연관되지 않으면, 보조 기술 사용자에게는 label 없는 체크박스로 인식됩니다.

HTML은 label을 폼 컨트롤과 연관시키는 두 가지 방법을 제공합니다. 가장 광범위한 브라우저 및 보조 기술 지원을 제공하는 방법은 label 요소의 for 속성을 컨트롤의 id로 설정하는 것입니다. 이 방법은 명시적 연관이라고 불립니다.

<input type="checkbox" name="subscribe" id="subscribe_checkbox">
<label for="subscribe_checkbox">뉴스레터 구독</label>

다른 방법은 암시적 연관으로, 체크박스와 label 텍스트를 label 요소 안에 포함시키는 것입니다. 일부 보조 기술과 브라우저의 조합은 암시적 연관을 사용한 경우 접근 가능한 이름을 제대로 인식하지 못할 수 있습니다.

<label>
  <input type="checkbox" name="subscribe">
  뉴스레터 구독
</label>

label 요소를 사용하는 것은 규칙 2: 가시적인 텍스트를 선호하세요를 충족하는 효과적인 기술입니다. 또한 규칙 3: 기본 기술을 선호하세요를 만족시킵니다. 네이티브 HTML label은 ARIA label링 기술보다 중요한 사용성 및 접근성 이점을 제공합니다. 브라우저는 자동으로 label을 클릭하는 것을 폼 컨트롤을 클릭하는 것과 동일하게 처리하여 폼 컨트롤의 클릭 영역을 증가시킵니다.

legend 요소로 fieldset 이름 지정하기

HTML 필드셋 요소는 폼 컨트롤을 그룹화하는 데 사용할 수 있으며, 레전드 요소는 그룹에 이름을 부여하는 데 사용됩니다. 예를 들어, 라디오 버튼 그룹은 필드셋에 그룹화할 수 있으며, 레전드 요소가 라디오 버튼 그룹의 이름을 지정합니다.

<fieldset>
  <legend>시작 클래스 선택</legend>
  <label><input type="radio" name="starter-class" value="green">초록</label>
  <label><input type="radio" name="starter-class" value="red">빨강</label>
  <label><input type="radio" name="starter-class" value="blue">파랑</label>
</fieldset>

이 그룹화 기술은 특히 여러 선택 질문을 제시할 때 유용합니다. 작성자가 질문과 답변 그룹을 연관시킬 수 있게 합니다. 질문이 답변 옵션과 프로그램적으로 연관되지 않으면, 보조 기술 사용자들은 질문을 인식하지 못한 채 답변을 접하게 됩니다.

다른 유형의 관련된 폼 필드를 필드셋과 레전드로 그룹화하고 이름을 지정하는 것도 유사한 이점을 제공합니다.

<fieldset>
  <legend>배송 주소</legend>
  <p><label>전체 이름 <input name="name" required></label></p>
  <p><label>주소 줄 1 <input name="address-1" required></label></p>
  <p><label>주소 줄 2 <input name="address-2"></label></p>
  ...
</fieldset>
<fieldset>
  <legend>결제 주소</legend>
  ...
</fieldset>

레전드 요소를 사용하여 필드셋 요소에 이름을 지정하는 것은 규칙 2: 가시적인 텍스트를 선호하세요 및 규칙 3: 기본 기술을 선호하세요를 충족합니다.

caption으로 table과 figure 이름 지정하기

HTML table 및 figure 요소의 접근 가능한 이름은 각각 자식 caption 또는 figcaption 요소에서 파생될 수 있습니다. table과 figure은 종종 caption을 통해 그 내용, 읽는 방법, 때로는 주변 글에서 참조되는 번호를 설명합니다. caption은 모든 사용자가 콘텐츠를 더 잘 이해하는 데 도움이 되지만, 특히 보조 기술 사용자에게 유용합니다.

HTML에서는 table 요소가 데이터 table을 마크업하며, caption 요소를 사용하여 caption을 제공할 수 있습니다. table 요소에 aria-label이나 aria-labelledby가 없으면, caption이 접근 가능한 이름으로 사용됩니다. 예를 들어, 다음 table의 접근 가능한 이름은 "특별 개장 시간"입니다.

<table>
  <caption>특별 개장 시간</caption>
  <tr><td>5월 30일</td><td>휴무</td></tr>
  <tr><td>6월 6일</td><td>11:00-16:00</td></tr>
</table>

다음 예시는 Table에 번호를 부여하여 참조할 수 있게 합니다.

<table>
  <caption>Table 1. 1950년대 오키나와 및 기타 일본인의 전통 식이 섭취량</caption>
  <thead>
    <tr>
      <th></th>
      <th>오키나와, 1949년</th>
      <th>일본, 1950년</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>총 칼로리</th>
      <td>1785</td>
      <td>2068</td>
    </tr>
    ...
</table>

참고: 위 테이블 내용은 "칼로리 제한, 전통적인 오키나와 식단 및 건강한 노화: 세계 최장수 사람들의 식단 및 질병과 수명에 미치는 잠재적 영향"에서 가져왔습니다.

table이 aria-label이나 aria-labelledby로 이름이 지정된 경우, caption 요소가 있으면 접근 가능한 설명으로 사용됩니다. 예시는 "caption으로 table 및 그림 설명하기"에서 확인할 수 있습니다.

유사하게, HTML figure 요소는 figcaption 요소를 사용하여 caption을 지정할 수 있습니다. caption은 figure 앞이나 뒤에 나타날 수 있지만, 일반적으로 그림은 caption이 뒤에 옵니다.

<figure>
  <img alt="사막을 걷는 사람의 그림." src="Hole_JesusalDesierto.jpg">
  <figcaption>William Hole이 1908년에 상상한 예수가 사막에 들어가는 모습</figcaption>
</figure>

table 요소와 마찬가지로, figure가 aria-label이나 aria-labelledby로 이름이 지정되지 않은 경우, figcaption 요소의 내용이 접근 가능한 이름으로 사용됩니다. 그러나 table 요소와 달리, figcaption 요소가 이름으로 사용되지 않으면, aria-describedby로 참조되지 않는 한 접근 가능한 설명이 되지 않습니다. 그럼에도 불구하고, 보조 기술은 figcaption의 내용을 이름, 설명 또는 둘 다 아닌 경우에도 렌더링합니다.

caption 요소를 사용하여 table 요소의 이름을 지정하거나, figcaption 요소를 사용하여 figure 요소의 이름을 지정하는 것은 규칙 2: 가시적인 텍스트를 선호하세요 및 규칙 3: 기본 기술을 선호하세요를 충족합니다.

제목 및 플레이스홀더에서 파생된 폴백 이름

접근 가능한 이름이 주요 기술(e.g., aria-label 또는 aria-labelledby 속성)이나 네이티브 마크업 기술(e.g., HTML 레이블 요소, 또는 HTML img 요소의 alt 속성)을 사용하여 제공되지 않는 경우, 브라우저는 폴백 메커니즘으로 다른 속성에서 접근 가능한 이름을 계산합니다. 폴백 이름 계산에 사용되는 속성은 명명 용도가 아니기 때문에 일반적으로 낮은 품질의 접근 가능한 이름을 생성하여 효과적이지 않습니다. 따라서, 규칙 4: 브라우저 폴백을 피하세요에 따라 위에서 설명한 명시적 레이블링 기술을 폴백 기술보다 선호하세요.

모든 HTML 요소는 title 속성을 가질 수 있습니다. title 속성은 요소의 폴백 접근 가능한 이름으로 사용될 수 있습니다. title 속성은 사용자가 포인팅 장치로 요소 위에 마우스를 올릴 때 일반적으로 툴팁으로 시각적으로 표시됩니다. 이는 특히 발견하기 어렵고 포인팅 장치가 없는 시각 사용자에게는 접근 가능하지 않습니다.

예를 들어, 레전드 요소 자식이 없는 필드셋 요소에 title 속성이 있으면, 접근 가능한 이름은 title 속성에서 가져옵니다.

<fieldset title="시작 클래스를 선택하세요">
  <label><input type="radio" name="starter-class" value="green">초록</label>
  <label><input type="radio" name="starter-class" value="red">빨강</label>
  <label><input type="radio" name="starter-class" value="blue">파랑</label>
</fieldset>

HTML input 및 textarea 요소의 경우, placeholder 속성은 다른 모든 것이 (title 속성 포함) 레이블을 제공하지 않을 때 폴백 레이블링 메커니즘으로 사용됩니다. 폼 컨트롤을 포커스할 때 시각적으로 사라지지 않는 레이블 요소를 사용하는 것이 좋습니다.

<!-- <label> 사용을 권장 -->
<label>검색 <input type="search" name="q"></label>

<!-- placeholder는 폴백으로 사용 -->
<input type="search" name="q" placeholder="검색">

효과적이고 사용자 친화적인 접근 가능한 이름 작성하기

보조 기술 사용자, 특히 화면 읽기 프로그램 사용자에게 접근 가능한 이름의 품질은 사용성에 가장 큰 영향을 미치는 요소 중 하나입니다. 충분한 정보를 제공하지 않는 이름은 사용자의 효율성을 감소시키고, 너무 긴 이름은 효율성을 떨어뜨립니다. 이해하기 어려운 이름은 효과성, 효율성 및 사용 만족도를 감소시킵니다.

다음 지침은 사용자 친화적인 이름을 작성하는 출발점을 제공합니다.

• 형태가 아닌 기능이나 목적을 전달하세요. 예를 들어, X 모양의 아이콘이 대화 상자를 닫는다면 "닫기(Close)"라고 이름을 짓고, "X"라고 하지 마세요. 쇼핑 사이트의 왼쪽 사이드바에 있는 탐색 링크 모음은 "Left"가 아닌 "Product"라고 이름 지으세요.
• 가장 두드러지고 중요한 단어를 먼저 배치하세요. 대화형 요소가 작업을 수행하는 경우, 첫 번째 단어로 동사가 오는 것이 좋습니다. 예를 들어, 연락처 목록에 각각의 연락처에 대해 "편집(Edit)", "삭제(Delete)", "작업(Actions)" 버튼이 표시되는 경우, "편집 John Doe", "삭제 John Doe", "작업 John Doe"가 더 나은 접근 가능한 이름입니다.
• 간결하게 하세요. 많은 요소의 경우, 1~3개의 단어로 충분합니다. 필요할 때만 더 많은 단어를 추가하세요.
• 접근 가능한 이름에 WAI-ARIA 역할 이름을 포함하지 마세요. 예를 들어, 버튼 이름에 "button", 이미지 이름에 "image", 탐색 영역 이름에 "navigation"을 포함하지 마세요. 이는 화면 읽기 프로그램이 요소의 역할을 이름과 함께 전달하기 때문에 중복 출력을 생성하게 됩니다.
• 동일한 역할을 가진 요소에는 고유한 이름을 만드세요. 실제로 동일한 요소가 아닌 한, 페이지의 모든 링크에 다른 이름을 지정하세요. 유사하게, 페이지의 모든 탐색 영역에 다른 이름을 부여하세요.
• 이름을 대문자로 시작하세요. 이는 일부 화면 읽기 프로그램이 적절한 억양으로 발음하는 데 도움이 됩니다. 이름 끝에 마침표를 붙이지 마세요. 문장이 아닙니다.

역할에 따른 접근 가능한 이름 가이드

특정 요소는 항상 이름이 필요하고, 다른 요소는 보통 또는 가끔 이름이 필요하며, 또 다른 요소는 절대 이름을 지정하지 말아야 합니다. 아래 표는 모든 ARIA 역할과 각 역할에 대한 다음 정보를 제공합니다:

이름 지정의 필요성

저자가 특정 역할이 지정된 요소의 콘텐츠를 보완하거나 대체하기 위해 이름 지정 속성이나 요소를 추가하는 것이 얼마나 필요한지 나타냅니다. 이 열에는 다음 값 중 하나가 포함될 수 있습니다:

• 콘텐츠가 불충분한 경우에만 필수: 이 역할이 지정된 요소는 하위 콘텐츠에 의해 이름이 지정됩니다. aria-label 또는 aria-labelledby가 적용되면, 요소 및 그 하위 요소에 포함된 콘텐츠는 aria-labelledby에 의해 참조되지 않는 한 보조 기술 사용자에게 숨겨집니다. 보조 기술 사용자에게 도움이 되는 드문 경우를 제외하고 하위 콘텐츠를 숨기는 것을 피하십시오.
• 필수: ARIA 명세는 저자가 이름을 제공해야 한다고 요구합니다. 이름이 누락되면 접근성 검증기가 오류를 보고합니다.
• 권장: 이름을 제공하는 것이 강력히 권장됩니다.
• 재량: 이름 지정은 선택 사항이거나, 지침 열에 설명된 상황에서는 권장되지 않습니다.
• 이름 지정하지 말 것: 기술적으로 허용되더라도 이름 지정을 강력히 권장하지 않습니다. 종종 보조 기술은 제공된 이름을 렌더링하지 않습니다.
• 금지: ARIA 명세는 요소에 이름을 지정하는 것을 허용하지 않습니다. 이름이 지정된 경우 접근성 검증기가 오류를 보고합니다.

지침

이름을 제공하는 것이 유익한지 판단하는 데 도움이 되는 정보를 제공하며, 그렇다면 권장 기술을 설명합니다.

역할별 이름 지정의 필요성 및 지침

접근 가능한 이름 계산

사용자 에이전트는 잠재적인 이름 지정 방법 목록을 통해 요소의 접근 가능한 이름 문자열을 생성하며, 이름을 생성하는 첫 번째 방법을 사용합니다. 이 알고리즘은 접근 가능한 이름 사양에서 정의되며, 대략 다음과 같습니다:

1. aria-labelledby 속성이 있으면 이를 사용합니다.
2. 이름이 비어 있으면 aria-label 속성을 사용합니다.
3. 이름이 비어 있으면, 호스트 언어에 특정한 속성이나 요소를 사용합니다. HTML의 경우, 요소에 따라 다음이 해당됩니다:
   • 타입 속성이 버튼, 제출 버튼, 또는 재설정 버튼 상태인 input 요소: value 속성.
   • 타입 속성이 이미지 버튼 상태인 input 요소: alt 속성.
   • img 요소: alt 속성.
   • area 요소: alt 속성.
   • fieldset 요소: 첫 번째 자식 legend 요소.
   • 기타 폼 요소: 연결된 label 요소들.
   • figure 요소: 첫 번째 자식 figcaption 요소.
   • table 요소: 첫 번째 자식 caption 요소.
4. 이름이 여전히 비어 있으면, 자식 콘텐츠에서 이름을 지원하는 역할이 있는 요소의 경우 요소의 내용을 사용합니다.
5. 마지막으로, 이름이 여전히 비어 있으면, 다른 호스트 언어에 특정한 속성이나 요소를 사용합니다. HTML의 경우, 요소에 따라 다음이 해당됩니다:
   • 타입 속성이 텍스트, 비밀번호, 검색, 전화 또는 URL 상태인 input 요소: title 속성. 없으면 placeholder 속성.
   • 타입 속성이 제출 버튼 상태인 input 요소: "submit"이라는 현지화된 문자열.
   • 타입 속성이 재설정 버튼 상태인 input 요소: "reset"이라는 현지화된 문자열.
   • 타입 속성이 이미지 버튼 상태인 input 요소: title 속성. 없으면 "Submit Query"라는 현지화된 문자열.
   • summary 요소: "Details"라는 단어.
   • 기타 요소: title 속성.

최종 단계는 백업 메커니즘입니다. 일반적으로 요소에 레이블을 지정할 때는 백업 메커니즘이 아닌 방법을 사용하십시오.

콘텐츠에서 이름을 계산할 때, 사용자 에이전트는 treeitem과 menuitem의 경우를 제외하고 모든 하위 노드를 탐색합니다. 또한, aria-labelledby 속성의 참조를 따를 때 각 참조된 요소의 트리를 유사하게 탐색합니다. 따라서 이름 지정 알고리즘은 재귀적입니다. 다음 두 섹션은 알고리즘이 작동하는 비재귀적 및 재귀적 예제를 설명합니다.

treeitem 역할의 콘텐츠에서 이름을 계산할 때, 하위 그룹 요소의 후손 콘텐츠는 포함되지 않습니다. 예를 들어, 다음 트리에서 첫 번째 트리 항목의 이름은 Fruits이며, Apples, Bananas, Oranges는 자동으로 생략됩니다.

<ul role="tree">
  <li role="treeitem">Fruits
    <ul role="group">
      <li role="treeitem">Apples</li>
      <li role="treeitem">Bananas</li>
      <li role="treeitem">Oranges</li>
    </ul>
  </li>
</ul>

유사하게, menuitem 역할의 콘텐츠에서 이름을 계산할 때, 하위 메뉴 요소의 후손 콘텐츠는 포함되지 않습니다. 따라서 다음 메뉴에서 첫 번째 부모 menuitem의 이름은 Fruits입니다.

<ul role="menu">
  <li role="menuitem">Fruits
    <ul role="menu">
      <li role="menuitem">Apples</li>
      <li role="menuitem">Bananas</li>
      <li role="menuitem">Oranges</li>
    </ul>
  </li>
</ul>

비재귀적 접근 가능한 이름 계산 예제

다음은 레이블 요소가 없고 name 속성만 있는 input 요소로, 접근 가능한 이름이 없습니다 (이렇게 하지 마십시오):

<input name="code">

placeholder 속성이 있으면 백업 메커니즘으로 작동합니다 (이렇게 하지 마십시오):

<input name="code" placeholder="One-time code">

title 속성이 있으면 접근 가능한 이름으로 사용됩니다 (여전히 백업임):

<input name="code" placeholder="123456" title="One-time code">

label 요소가 있으면 접근 가능한 이름으로 사용되고, title 속성은 접근 가능한 설명으로 사용됩니다:

<label>One-time code
  <input name="code" placeholder="123456" title="Get your code from the app.">
</label>

aria-label 속성이 있으면 레이블 요소를 무시하고 접근 가능한 이름으로 사용됩니다 (명확성을 위해서만 추천):

<label>Code
  <input name="code" aria-label="One-time code" placeholder="123456" title="Get your code from the app.">
</label>

aria-labelledby 속성이 있으면 다른 요소와 속성보다 우선합니다 (aria-label 속성은 사용되지 않으면 제거해야 함):

<p>Please fill in your <span id="code-label">one-time code</span> to log in.</p>
<p>
  <label>Code
    <input name="code" aria-labelledby="code-label" aria-label="This is ignored" placeholder="123456" title="Get your code from the app.">
  </label>
</p>

재귀적 접근 가능한 이름 계산 예제

접근 가능한 이름 계산 알고리즘은 필요할 때 재귀적으로 호출됩니다. aria-labelledby 참조는 알고리즘을 재귀적으로 호출하며, 콘텐츠에서 접근 가능한 이름을 계산할 때는 각 자식 노드에 대해 알고리즘을 재귀적으로 호출합니다.

이 예제에서, 버튼의 레이블은 각 자식 노드를 재귀적으로 탐색하여 "Move to trash"로 계산됩니다:

<button>Move to <img src="bin.svg" alt="trash"></button>

aria-labelledby 참조를 따를 때, 알고리즘은 무한 루프를 피하기 위해 동일한 참조를 두 번 따르지 않습니다.

이 예제에서, 버튼의 레이블은 먼저 aria-labelledby 참조를 부모 요소로 따르고, 그런 다음 자식 노드를 재귀적으로 계산하여 "Remove meeting: Daily status report"가 됩니다:

<div id="meeting-1">
  <button aria-labelledby="meeting-1" aria-label="Remove meeting:">X</button>
  Daily status report
</div>

설명 기술

aria-describedby로 콘텐츠 참조하여 설명하기 aria-describedby 속성은 aria-labelledby 속성과 유사하게 작동합니다. 예를 들어, 버튼은 형제 문단으로 설명될 수 있습니다:

<button aria-describedby="trash-desc">Move to trash</button>
...
<p id="trash-desc">Items in the trash will be permanently removed after 30 days.</p>

설명은 텍스트 문자열로 축소됩니다. 예를 들어, 설명에 HTML img 요소가 포함되어 있으면 이미지의 텍스트 등가물이 계산됩니다:

<button aria-describedby="trash-desc">Move to <img src="bin.svg" alt="trash"></button>
...
<p id="trash-desc">Items in <img src="bin.svg" alt="the trash"> will be permanently removed after 30 days.</p>

aria-labelledby와 마찬가지로 aria-describedby를 사용하여 숨겨진 요소를 참조할 수 있습니다. 예를 들어, 양식의 텍스트 필드는 기본적으로 숨겨져 있지만 요청 시 공개할 수 있는 설명을 가질 수 있습니다. 설명은 aria-describedby를 사용하여 직접 참조할 수 있습니다. 다음 예제에서, input 요소의 접근 가능한 설명은 "Your username is the name that you use to log in to this service"입니다:

<label for="username">Username</label>
<input id="username" name="username" aria-describedby="username-desc">
<button aria-expanded="false" aria-controls="username-desc" aria-label="Help about username">?</button>
<p id="username-desc" hidden>
  Your username is the name that you use to log in to this service.
</p>

캡션을 사용하여 테이블 및 그림 설명

HTML에서는, aria-label 또는 aria-labelledby를 사용하여 테이블의 이름을 지정한 경우, 자식 캡션 요소가 접근 가능한 설명이 됩니다. 예를 들어, 선행 제목이 적절한 접근 가능한 이름으로 사용될 수 있으며, 캡션 요소는 더 긴 설명을 포함할 수 있습니다. 이런 경우, aria-labelledby를 사용하여 테이블의 접근 가능한 이름을 제목 콘텐츠로 설정할 수 있고, 캡션은 접근 가능한 설명이 됩니다.

<h2 id="events-heading">Upcoming events</h2>
<table aria-labelledby="events-heading">
  <caption>
    Calendar of upcoming events, weeks 27 through 31, with each week starting with Monday.
    The first column is the week number.
 

 </caption>
  <tr><th>Week</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th><th>Sunday</th></tr>
  <tr><td>27</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td>28</td><td></td><td></td><td></td><td></td><td></td><td><a href="/events/9856">Crown Princess's birthday</a></td></tr>
  <tr><td>29</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td>30</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td>31</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

HTML figure 요소는 figcaption 요소에서 접근 가능한 이름을 얻을 수 있지만, 이는 접근 가능한 설명으로 사용되지 않습니다. 만약 figcaption 요소가 접근 가능한 설명으로 적절하고, 접근 가능한 이름이 aria-labelledby나 aria-label로 설정된 경우, figcaption은 aria-describedby 속성을 사용하여 명시적으로 접근 가능한 설명으로 설정할 수 있습니다.

<h2 id="neutron">Neutron</h2>
<figure aria-labelledby="neutron" aria-describedby="neutron-caption">
  <img src="neutron.svg" alt="Within the neutron are three quarks (blue 'u', red 'd', green 'd') that are interconnected.">
  <figcaption id="neutron-caption">
    The quark content of the neutron. The color assignment of individual quarks is arbitrary, but all three colors must be present. Forces between quarks are mediated by gluons.
  </figcaption>
</figure>

타이틀에서 파생된 설명

aria-describedby 속성이나 기본 호스트 언어 특정 속성이나 요소(e.g., table의 caption 요소)를 사용하여 접근 가능한 설명이 제공되지 않은 경우, HTML의 경우, 요소에 title 속성이 있으면, 이는 접근 가능한 설명으로 사용됩니다.

일반적으로 aria-describedby와 함께 가시적인 설명이 권장됩니다. 가시적이지 않은 설명이 필요한 경우, title 속성은 접근 가능한 설명을 가질 수 있는 HTML 요소에 사용될 수 있습니다.

title 속성은 일부 사용자, 특히 화면 리더를 사용하지 않는 시각 사용자 및 포인터 장치를 사용하지 않는 사용자는 접근할 수 없다는 점에 유의하세요.

예를 들어, pattern 속성을 사용하여 입력을 제한한 input 요소는 title 속성을 사용하여 예상 입력을 설명할 수 있습니다.

<label> Part number:
  <input pattern="[0-9][A-Z]{3}" name="part" title="A part number is a digit followed by three uppercase letters.">
</label>

이 경우 title 속성은 사용자가 컨트롤을 호버하거나 포커스할 때 툴팁으로 표시될 수 있지만, 사용자 에이전트가 폼을 검증할 때 input 요소의 값이 패턴과 일치하지 않으면 오류 메시지의 일부로도 표시될 수 있습니다.

또 다른 예로, 링크는 title 속성을 사용하여 링크를 더 자세히 설명할 수 있습니다.

<a href="http://twitter.com/W3C" title="Follow W3C on Twitter">
  <img src="/2008/site/images/Twitter_bird_logo_2012.svg" alt="Twitter" class="social-icon" height="40">
</a>

접근 가능한 설명 계산

접근 가능한 이름 계산과 마찬가지로, 접근 가능한 설명 계산은 텍스트 문자열을 생성합니다.

접근 가능한 설명 계산 알고리즘은 접근 가능한 이름 계산 알고리즘과 동일하지만, 이름이나 설명을 계산하는지에 따라 몇 가지 분기점이 다릅니다. 특히, 접근 가능한 설명을 위한 텍스트를 축적할 때, 알고리즘은 aria-labelledby 대신 aria-describedby를 사용합니다.

사용자 에이전트는 설명을 생성하는 첫 번째 방법을 사용하여 잠재적인 설명 방법 목록을 통해 요소에 대한 접근 가능한 설명 문자열을 구성합니다. 그들이 따르는 알고리즘은 접근 가능한 이름 명세서에 정의되어 있으며, 대략 다음과 같습니다:

1. aria-describedby 속성이 존재하면 사용됩니다.

2. 설명이 여전히 비어 있으면, 호스트 언어 특정 속성이나 요소가 존재하면 사용됩니다. HTML의 경우, 요소에 따라 다음과 같습니다:

   • type 속성이 Button, Submit Button, Reset Button 상태인 input 요소: value 속성.
   • summary 요소: 요소의 하위 트리.
   • table 요소: 첫 번째 자식 caption 요소.

3. 마지막으로, 설명이 여전히 비어 있으면, 다른 호스트 언어 특정 속성이나 요소가 존재하면 사용됩니다. HTML의 경우, 이는 title 속성입니다.