HTML/CSS 닥스

https://www.w3.org/WAI/tutorials/forms/examples/password/

[A11Y] - 웹접근성 튜토리얼 - 7. 캐러셀

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.

[번역] 웹접근성 튜토리얼 - 6. 폼

닥스터 — Thu, 6 Jul 2023 00:17:47 +0900

폼은 일반적으로 웹사이트와 웹 애플리케이션에서 사용자 상호 작용을 제공하는 데 사용됩니다. 예를 들어 로그인, 등록, 댓글 작성, 구매 등이 이에 해당합니다. 이 튜토리얼에서는 접근성이 높은 폼 양식을 만드는 방법을 보여줍니다. 처리되는 폼이 클라이언트 측이든 서버 측이든 모든 양식에 동일한 개념이 적용됩니다.

기술적인 고려 사항 외에도 사용자는 일반적으로 간단하고 짧은 폼을 선호합니다. 사용자에게 거래 또는 프로세스를 완료하는 데 필요한 최소한의 정보만 입력하도록 요청하세요. 관련성이 없거나 과도한 데이터를 요청하면 사용자가 폼 작성을 포기할 가능성이 높습니다.

레이블 컨트롤 : <label> 요소를 사용하고 특정한 경우에는 각 폼 컨트롤을 식별하기 위해 다른 메커니즘 (예: WAI-ARIA, title 속성 등)을 사용합니다.
컨트롤 그룹화 : <fieldset> 및 <legend> 요소를 사용하여 관련 폼 컨트롤을 그룹화하고 연결합니다.
폼 지침 : 사용자가 폼 및 개별 폼 컨트롤을 완료하는 방법을 이해하는 데 도움이 되는 지침을 제공합니다.
입력 유효성 검사 : 사용자가 제공한 입력의 유효성을 검사하고 변경 사항을 실행 취소하고 데이터 입력을 확인할 수 있는 옵션을 제공합니다.
사용자 알림 : 사용자에게 성공적인 작업 완료 및 오류에 대해 알리고 실수를 수정하는 데 도움이 되는 지침을 제공합니다.
여러 페이지로 구성된 폼 : 긴 폼 입력을 일련의 논리적 단계 또는 단계를 구성하는 여러 개의 작은 폼으로 나누고 사용자에게 진행 단계를 알립니다.
사용자 지정 컨트롤 : 폼 요소에 스타일을 적용하고 기타 점진적 기능 향상 기법을 사용하여 사용자 지정 컨트롤을 제공합니다.

시간 제한에 대한 참고 사항

가능하면 사용자가 자신의 속도에 맞춰 폼을 작성할 수 있도록 폼에 시간 제한을 두지 않아야 합니다. 예를 들어, 보안상의 이유로 시간 제한을 적용해야 하는 경우에는 사용자가 시간 제한을 끄거나 연장할 수 있는 옵션을 제공해야 합니다. 시간 제한이 경매나 게임과 같은 실시간 이벤트로 인한 것이거나 폼을 작성하는 데 걸리는 시간이 유효한 제출에 필수적인 경우에는 이 제한이 적용되지 않습니다.

이것이 왜 중요한가요?

폼은 시각적 혹은 인지적으로 복잡하고 사용하기 어려울 수 있습니다. 접근성 있는 폼은 장애인을 포함한 모든 사람이 더 쉽게 사용할 수 있습니다.

폼을 접근 가능하게 만들면 레이아웃 구조, 지침 및 피드백이 개선되므로 인지 장애가 있는 사람도 양식과 폼 작성 방법을 더 잘 이해할 수 있습니다.
음성 입력을 사용하는 사용자는 음성 명령을 통해 레이블을 사용하여 컨트롤을 활성화하고 완료해야 하는 필드로 초점을 이동할 수 있습니다.
특히 라디오 버튼이나 확인란과 같은 작은 컨트롤의 경우, 손놀림에 불편함이 있는 사람들은 레이블을 포함한 클릭 가능한 큰 영역이 유용합니다.
스크린 리더 사용자들은 폼 컨트롤이 label, fieldset 및 기타 구조적 요소와 연결되어 있기 때문에 더 쉽게 식별하고 이해할 수 있습니다.

레이블 컨트롤

텍스트 필드, 체크박스, 라디오 버튼, 드롭다운 메뉴 등 모든 폼 컨트롤을 식별하기 위해 레이블을 제공합니다.
대부분의 경우 <label> 요소를 사용하여 이 작업을 수행합니다.

레이블은 폼 컨트롤의 목적을 설명해야 합니다. 튜토리얼의 이번 섹션에서는 폼 컨트롤과 올바르게 연결된 레이블을 제공하는 방법에 대해 설명합니다. 이후 섹션에서는 지침을 제공하고, 사용자 입력의 유효성을 검사하고, 사용자가 양식을 작성하는 데 도움이 되는 피드백을 제공하는 방법에 대해 설명합니다.

레이블과 폼 컨트롤은 암묵적 또는 명시적으로 서로 연결되어야 합니다. 예를 들어 웹 브라우저는 컨트롤을 선택하거나 활성화하기 위해 레이블을 더 확장하여 클릭 가능한 영역을 넓게 제공합니다. 또한 보조 기술이 폼 컨트롤을 표시할 때 올바른 레이블을 참조할 수 있도록 보장합니다.

레이블을 명시적으로 연결하기

가능하면 레이블 요소를 사용하여 텍스트를 폼 요소와 명시적으로 연결하세요. 레이블의 for 속성은 폼 컨트롤의 id와 정확히 일치해야 합니다.

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>

<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

레이블 텍스트 숨기기

폼 컨트롤의 레이블은 모든 사람이 그 목적을 더 잘 이해할 수 있도록 도와줍니다. 콘텐츠가 렌더링될 때 경우에 따라 문맥에서의 목적이 충분히 명확해 질 수 있습니다. 레이블은 시각적으로 숨길 수 있지만 스크린 리더 및 음성 입력 사용자와 같은 다른 형태의 프레젠테이션 및 상호 작용을 지원하려면 코드 내에 레이블을 제공해야 합니다. 이 자습서에서 요소를 시각적으로 숨기되 보조 기술에서 사용할 수 있도록 하는 방법은 아래 요소 숨기기 참고 사항에 설명되어 있습니다.

아래 예에서 검색 필드가 검색 버튼 바로 옆에 배치되어 있습니다. 텍스트 입력 필드의 목적은 대부분의 상황에서 문맥을 통해 명확하게 알 수 있습니다.

접근 방식 1 : 레이블 요소 숨기기

이 접근 방식에서는 코드 내에서 폼 컨트롤을 식별하기 위해 <label> 요소가 제공되지만 시각적 단서를 통해 목적을 유추할 수 있는 사용자의 중복성을 피하기 위해 화면에서 숨겨져 있습니다.

<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>

접근 방식 2 : aria-label 사용하기

aria-label 속성은 폼 컨트롤을 식별하기 위해 사용할 수 있습니다. 이 접근 방식은 스크린 리더 및 기타 보조 기술에서 잘 지원되지만 title 속성(아래 참조)과 달리 시각적 사용자에게 정보가 전달되지 않습니다. 따라서 이 접근 방식은 아래 예의 버튼과 같이 컨트롤의 레이블이 주변 콘텐츠와 명확하게 구분되는 경우에만 사용해야 합니다.

<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>

접근 방식 3 : aria-labelledby 사용하기

aria-labelledby 속성은 폼 컨트롤을 식별하기 위해 사용할 수 있습니다. 이 접근 방식은 스크린 리더 및 기타 보조 기술에서 잘 지원되지만 title 속성(아래 참조)과 달리 시각적 사용자에게 정보가 전달되지 않습니다. 따라서 이 접근 방식은 아래 예시의 버튼과 같이 컨트롤의 레이블이 주변 콘텐츠에서 명확할 때만 사용해야 합니다.

레이블 텍스트가 포함된 요소의 id는 aria-labelledby 속성의 값으로 사용됩니다.

<input type="text" name="search" aria-labelledby="searchbutton">
<button id="searchbutton" type="submit">Search</button>

접근 방식 4 : title 속성 이용하기

title 속성은 폼 컨트롤을 식별하기 위해 사용할 수 있습니다. 일부 스크린 리더 및 보조 기술은 title 속성을 레이블 요소를 대체하는 것으로 해석하지 않거나 title 속성이 필수적이지 않은 정보를 제공하는데 사용되는 경우가 많기 때문에 이 접근 방식은 일반적으로 신뢰성이 떨어지며 권장되지 않습니다. title 속성의 정보는 마우스로 폼 필드 위로 마우스를 가져가면 사용자에게 시각적 툴팁으로 표시됩니다.

<input title="Search" type="text" name="search">
<button type="submit">Search</button>

요소 숨기기 관련 참고 사항

스크린 리더 및 기타 보조 기술은 웹 브라우저와 마찬가지로 display: none 및 visibility: hidden을 사용하여 스타일을 지정할 때 사용자에게 요소를 숨깁니다.

정보를 시각적으로 숨기되 스크린 리더 및 기타 보조 기술 사용자가 계속 사용할 수 있도록 하는 데 사용되는 일반적인 접근 방식은 정보를 기술적으로는 표시하지만 실질적으로는 숨긴 상태로 유지하는 CSS를 사용하는 것입니다. 예를 들어, 아래에서 visuallyhidden (CSS visibility: hidden과 혼동하지 마세요) CSS 클래스를 사용하여 1픽셀 영역에 레이블을 표시하는 것입니다.

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

이 코드를 사용할 때 다이얼로그 요소는 여전히 활성화되어 있으므로 레이블을 제외한 폼의 다른 부분을 숨기는 것은 적합하지 않습니다.

암시적으로 레이블 연결하기

일부 상황에서는 폼 컨트롤에 명시적으로 레이블을 지정할 수 없습니다. 예를 들어 콘텐츠 작성자가 스크립트에서 생성된 폼 필드의 id를 모르거나 해당 스크립트에서 id를 전혀 추가하지 않을 수 있습니다. 이 경우 label 요소는 폼 컨트롤과 레이블 텍스트의 컨테이너로 사용되므로 두 요소가 암시적으로 연결됩니다. 일반적으로 명시적 레이블이 보조 기술을 통해 더 잘 지원됩니다.

<label>
  First name:
  <input type="text" name="firstname">
</label>
<br>
<label>
  <input type="checkbox" name="subscribe">
  Subscribe to newsletter
</label>

버튼 레이블 지정

<button> 요소의 레이블은 요소 내부에 설정되며 마크업을 포함할 수 있습니다. 이를 통해 언어 변경 마크업과 같은 고급 접근성 힌트를 포함할 수 있습니다. <input> 요소를 사용하여 버튼을 만들 때 레이블은 요소의 value 속성에 설정됩니다.

<button type="submit">Submit</button>
<button type="button">Cancel</button>

<input type="submit" value="Submit">
<input type="button" value="Cancel">

참고
이미지 버튼(<input type=”image”>)을 사용하는 경우, 예를 들어 alt 속성에 레이블이 설정됩니다. <input type="image" src="searchbutton.png" alt="Search"> 버튼에 이미지를 설명하는 방법에 대한 자세한 내용은 기능적 이미지를 참조하세요.

레이블 텍스트의 시각적 위치

왼쪽에서 오른쪽으로 쓰는 언어에서는 레이블을 라디오 버튼 및 확인란의 오른쪽에, 다른 폼 필드의 왼쪽 또는 바로 위에 시각적으로 배치하는 것이 일반적입니다. 이 관행을 유지하면 모든 사용자의 양식에 대한 예측 가능성과 이해도가 높아집니다.

일반적으로 레이블을 폼 필드 위에 배치하면 저시력자 및 모바일 장치 사용자의 가로 스크롤을 줄이는 데 도움이 됩니다. 그러나 이 접근 방식의 유용성은 주변의 다른 양식 필드 및 콘텐츠의 근접성 등 다른 디자인 이슈에 따라 달라지므로 개별적으로 평가해야 합니다. 목표는 레이블과 폼 컨트롤 사이에 가깝고 뚜렷한 시각적 관계를 유지하는 것입니다.

연관 폼 요소 그룹화

연관된 폼 요소들을 그룹화하면 관련 요소들을 모든 사용자가 더 쉽게 식별할 수 있으므로 더 쉽게 이해할 수 있습니다. 또한 사람들이 전체 폼을 한 번에 파악하는 대신 더 작고 관리하기 쉬운 그룹에 더 쉽게 집중할 수 있습니다.

그룹화는 시각적으로나 코드에서 수행해야 합니다. (예: <fieldset> 및 <legend> 요소를 사용하여 관련 폼 요소들을 연결). 또한 <select> 요소의 관련 항목은 <optgroup>을 사용하여 그룹화할 수 있습니다.

접근 방식 1 : 관련 요소들을 fieldset과 연결

<fieldset> 요소는 관련 폼 요소들을 위한 컨테이너를 제공하며, <legend> 요소는 그룹을 식별하는 제목 역할을 합니다. 컨트롤 그룹에 대한 범례는 모든 컨트롤의 공통 속성을 강조 표시하여 그룹의 모든 필드가 필수임을 알릴 수도 있습니다.

예제 1) 라디오 버튼

아래 예시에는 사용자가 출력 형식을 선택할 수 있는 세 개의 라디오 버튼이 있습니다. 라디오 버튼 그룹은 항상 <fieldset>을 사용하여 그룹화해야 합니다.

<fieldset>
  <legend>Output format</legend>
  <div>
    <input type="radio" name="format" id="txt" value="txt" checked>
    <label for="txt">Text file</label>
  </div>
  <div>
    <input type="radio" name="format" id="csv" value="csv">
    <label for="csv">CSV file</label>
  </div>
  […]
</fieldset>

예제 2) 체크박스

아래 예에서 세 개의 체크박스는 다양한 유형의 정보를 수신하기 위한 옵트인(opt-in, 반드시 항목을 선택해야 폼이 처리되는) 기능의 일부입니다.

<fieldset>
  <legend>I want to receive</legend>
  <div>
    <input type="checkbox" name="newsletter" id="check_1">
    <label for="check_1">The weekly newsletter</label>
  </div>
  […]
</fieldset>

예제 3) 관련 필드

이 예에서는 배송 및 청구 주소를 입력하는 폼 필드를 보여줍니다. 두 그룹의 레이블에는 동일한 텍스트가 있으므로 fieldset 요소는 그룹별로 폼 필드를 구분하는 데 도움이 됩니다. <legend>가 스크린 리더에서 읽히지 않는 경우(아래 참고 사항 참조) 각 그룹의 첫 번째 폼 컨트롤의 레이블에는 그룹 이름이 포함되어야 합니다. 이 이름은 시각적으로 숨길 수 있습니다.

<fieldset>
  <legend>Shipping Address:</legend>
  <div>
    <label for="shipping_name">
      <span class="visuallyhidden">Shipping </span>Name:
    </label><br>
    <input type="text" name="shipping_name" id="shipping_name">
  </div>
  <div>
    <label for="shipping_street">Street:</label><br>
    <input type="text" name="shipping_street" id="shipping_street">
  </div>
  […]
</fieldset>
<fieldset>
  <legend>Billing Address:</legend>
  <div>
    <label for="billing_name">
      <span class="visuallyhidden">Billing </span>Name:
    </label><br>
    <input type="text" name="billing_name" id="billing_name">
  </div>
  <div>
    <label for="billing_street">Street:</label><br>
    <input type="text" name="billing_street" id="billing_street">
  </div>
  […]
</fieldset>

참고
구성에 따라 일부 스크린 리더는 모든 양식 요소에 대해 범례를 한 번만 읽거나, 드물게는 전혀 읽지 않을 수도 있습니다. 이를 수용하려면 다음을 고려하십시오.

- 매번 레이블과 함께 읽어야 하는 상황에서는 범례를 가능한 한 짧게 만듭니다.
- 범례를 소리내어 읽지 않는 상황에서는 모든 레이블에서 범례를 반복하지 않고 개별 레이블을 충분히 설명 할 수 있도록 만듭니다.

접근 방식 2 : 관련 컨트롤을 WAI-ARIA와 연결하기

WAI-ARIA는 fieldset 및 legend와 유사하게 작동하는 그룹화 역할을 제공합니다. 이 예제에서 div 요소에는 포함된 요소가 그룹의 멤버임을 나타내는 role=group이 있고 aria-labelledby 속성은 그룹의 레이블 역할을 할 텍스트의 id를 참조합니다.

이 기법은 추가적인 스타일링 가능성을 제공합니다.

모든 웹 브라우저 및 스크린 리더 조합에서 WAI-ARIA가 완벽하게 지원되는 것은 아니므로 그룹의 첫 번째 폼 컨트롤에 그룹 식별자를 추가해야 합니다.

<div role="group" aria-labelledby="shipping_head">
  <div id="shipping_head">Shipping Address:</div>
  <div>
    <label for="shipping_name">
      <span class="visuallyhidden">Shipping </span>Name:
    </label><br>
	<input type="text" name="shipping_name" id="shipping_name">
  </div>
  […]
</div>
<div role="group" aria-labelledby="billing_head">
  <div id="billing_head">Billing Address:</div>
  <div>
    <label for="billing_name">
      <span class="visuallyhidden">Billing </span>Name:
    </label><br>
    <input type="text" name="billing_name" id="billing_name">
  </div>
  […]
</div>

select 요소의 항목 그룹화

옵션 그룹이 있는 select 요소의 경우 optgroup 요소를 사용하여 해당 그룹을 표시할 수 있습니다. optgroup 요소의 label 속성은 그룹에 레이블을 제공하는 데 사용됩니다. 이는 관련 옵션이 많은 목록에 특히 유용합니다. 아래 예에서 사용자는 세 가지 코스 중 하나의 강의를 선택할 수 있습니다.

<select>
  <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten</option>
    <option value="8.01.2">Lecture 02: 1D Kinematics</option>
    <option value="8.01.3">Lecture 03: Vectors</option>
  </optgroup>
  <optgroup label="8.02 Physics II: Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?</option>
    […]
  </optgroup>
  […]
</select>

폼(form) 지침

사용자가 폼을 작성하고 개별 폼 요소들을 사용하는 방법을 이해하는 데 도움이 되는 지침을 제공하세요. 필수 및 선택 입력, 데이터 형식 및 기타 관련 정보를 표시합니다.

중요 : 스크린 리더는 <form> 요소 내의 콘텐츠를 처리할 때 종종 "폼 모드"로 전환합니다. 이 모드에서는 일반적으로 <input>, <select>, <textarea>, <legend> 및 <label>과 같은 폼 요소만 소리내어 읽습니다. 폼 지침을 소리내어 읽을 수 있는 방식으로 포함시키는 것이 중요합니다. 이에 대해서는 아래에서 자세히 설명합니다.

전체 지침

가능하다면 전체 폼에 적용되는 전반적인 지침을 제공합니다. 예를 들어 필수 및 선택 입력, 허용되는 데이터 형식 및 시간 제한을 표시합니다. 이러한 지침은 <form> 요소 앞에 제공하여 스크린 리더가 '폼 모드'로 전환하기 전에 소리로 읽을 수 있도록 합니다.

아래 예에서는 폼 지침에 필수 필드가 표시되는 방법, 주요 데이터 필드의 예상 형식, 각 입력에 대한 추가 도움말을 찾을 수 있는 위치가 표시되어 있습니다.

'필수'로 표시된 모든 필드를 작성해야 합니다.
날짜는 모두 dd/mm/yyyy 형식으로 입력해야 합니다. (예: 21/07/2013)
비밀번호는 최소 8개 이상의 문자 및/또는 숫자를 포함해야 합니다.
각 필드 바로 뒤에 추가 도움말이 있습니다. </aside>

인라인 지침

전체 지침 외에도 폼 컨트롤의 레이블 내에 관련 지침을 제공하는 것도 중요합니다. 예를 들어 레이블의 텍스트에 필수 입력 필드와 데이터 형식을 표시하는 것입니다.

레이블 내에 지침 제공

간단한 사용 사례의 경우 레이블 내에 지침을 제공하는 것으로 충분할 수 있습니다. 이 접근 방식은 다양한 웹 브라우저와 보조 기술에서 안정적으로 사용할 수 있지만, 일부 스타일링 요구 사항을 지원하려면 약간의 추가 고려가 필요할 수 있습니다.

아래 예시에서 '만료일'에 필요한 형식은 동일한 라벨 내에서 'MM/YYYY' 로 표시됩니다.

<label for="expire">Expiration date (MM/YYYY): </label>
<input type="text" name="expire" id="expire">

레이블 외부에 지침 제공

레이블 외부에 지침을 제공하면 보다 유연한 위치 지정 및 디자인이 가능하지만 간혹 놓칠 수 있습니다. 또한 일부 웹 브라우저(일반적으로 이전 버전)와 WAI-ARIA를 구현하지 않는 보조 기술에서는 지원되지 않습니다.

접근 방식 1 : aria-labelledby 이용하기

한 가지 접근 방식은 WAI-ARIA aria-labelledby 속성을 사용하여 지침을 폼 요소들과 연결하는 것입니다. 이 튜토리얼을 작성하는 시점에서 이 접근 방식은 모든 웹 브라우저 및 보조 기술 (예: 점자 디스플레이)에서 완벽하게 지원되지는 않습니다. 이전 버전과의 호환성을 보장하기 위해 이 예제에서는 for 및 id 속성도 사용됩니다.

<label id="expLabel" for="expire">Expiration date:</label>
<span>
  <input type="text" name="expire" id="expire" aria-labelledby="expLabel expDesc">
  <span id="expDesc">MM/YYYY</span>
</span>

접근 방식 2 : aria-describedby 이용하기

추가 지침을 폼 필드와 연결하는 또 다른 접근 방식은 aria-describedby를 사용하는 것입니다. 이 속성에 의해 참조되는 정보는 레이블 및 기타 정보가 제공된 후에 사용자에게 제공됩니다.

<label id="expLabel" for="expire">Expiration date:</label>
<span>
  <input type="text" name="expire" id="expire" aria-labelledby="expLabel" aria-describedby="expDesc">
  <span id="expDesc">MM/YYYY</span>
</span>

placeholder 텍스트

placeholder 텍스트는 사용자가 아직 편집하지 않은 폼 필드 내부에 필요한 데이터 형식에 대한 지침 또는 예시를 제공합니다. placeholder 텍스트는 일반적으로 사용자가 제공한 텍스트보다 낮은 색상 대비로 표시되며, 사용자가 텍스트 입력을 시작하면 폼 필드에서 사라집니다. placeholder 텍스트에 지침 정보나 예시가 포함되어 있다가 사라지는 경우, 사용자가 폼을 제출하기 전에 응답을 확인하기가 더 어려워집니다.

placeholder 텍스트는 많은 사용자에게 유용한 지침을 제공하지만, placeholder 텍스트가 레이블을 대체할 수는 없습니다. 스크린 리더와 같은 보조 기술은 placeholder 텍스트를 레이블로 취급하지 않습니다. 또한 이 튜토리얼을 작성하는 시점에 placeholder 텍스트는 보조 기술 전반에서 광범위하게 지원되지 않으며 구형 웹 브라우저에서는 표시되지 않습니다.

참고
이 튜토리얼의 숨겨진 레이블 섹션에서는 정보를 시각적으로 숨기되 보조 기술에서 계속 사용할 수 있도록 하는 방법에 대해 설명합니다. 이와 동일한 접근 방식을 사용하여 레이블과 placeholder 텍스트가 모두 표시되는 시각적 중복을 피할 수 있습니다. 이렇게 하면 사용자가 양식을 검토하기가 매우 어렵다는 점에 유의하세요. 이 문제를 피하기 위해 JavaScript를 사용하여 레이블이 초점이 있는 입력 위나 옆에 시각적으로(연결된 레이블 요소에) 표시되도록 할 수 있습니다.

<div>
  <label for="search">Search:</label>
  <input type="text" name="search" id="search" placeholder="e.g. Apple Pie">
</div>
<div>
  <label for="email">Email: </label>
  <input type="text" name="email" id="email" placeholder="joe@example.com">
</div>

스타일링

이 튜토리얼을 작성할 당시 웹 브라우저는 일반적으로 placeholder 텍스트를 WCAG의 최소 대비 요구 사항을 충족하지 않는 색상으로 표시했습니다. 이는 많은 사람들이 보기 어렵다는 것을 의미합니다. 웹 브라우저는 색상과 불투명도의 조합을 사용하여 이 효과를 얻습니다. 대부분의 웹 브라우저에서 placeholder의 색상은 전용 CSS 선택자를 사용하여 스타일을 지정할 수 있습니다. 다음 코드 스니펫은 요소의 배경이 흰색이라고 가정할 때 색상 대비 요구 사항을 충족하기에 충분한 대비를 가진 밝은 회색으로 색상을 설정합니다.

::placeholder {
  color: #767676;
  opacity: 1;
}

입력 유효성 검사

지침을 제공하는 것 외에도 사용자 입력의 유효성을 검사하여 사용자의 실수를 방지하세요. HTML5는 이메일 주소, 날짜 등 일반적인 입력 유형의 유효성을 검사하는 다양한 기본 제공 기능을 정의합니다. 사용자 지정 컨트롤의 유효성을 검사하거나 레거시 브라우저를 지원하는 등 일부 상황에서는 사용자 입력의 유효성을 검사하기 위해 추가 스크립팅이 필요할 수 있습니다.

사용자 지정 유효성 검사는 이 튜토리얼의 사용자 알림 부분에 설명된 대로 사용자에게 접근 가능한 방식으로 알려야 합니다. 클라이언트 측 유효성 검사만으로는 보안을 보장할 수 없으므로 서버 측에서도 데이터를 유효성 검사해야 합니다.

required 입력 유효성 검사

폼에는 레이블을 사용하여 명확하게 식별해야 하는 필수 입력이 포함되어 있는 경우가 많습니다. 또한 필수 속성을 프로그래밍 방식으로 폼 컨트롤에 추가하여 필수임을 나타낼 수도 있습니다. 대부분의 최신 웹 브라우저는 이 속성을 지원하며 표준 웹 브라우저 다이얼 로그 메커니즘을 사용하여 누락된 필수 입력을 사용자에게 전달합니다. 이러한 다이얼 로그는 기본 font-size, color 및 언어와 같은 웹 브라우저(및 운영 체제)에서 사용자의 설정 및 기본 설정을 존중해야 합니다.

아래 예시에서는 입력 필드에 required 속성이 추가되었습니다. 웹 브라우저가 HTML5를 지원하는 경우 입력 필드에 텍스트를 입력하지 않고는 폼을 제출할 수 없습니다. 대신 웹 브라우저 자체에서 생성된 메시지가 표시됩니다.

보조 기술을 사용하지 않거나 HTML5 required 속성을 지원하지 않는 구형 웹 브라우저를 사용하는 사용자에게 알리기 위해 레이블에 '(필수)'가 표시되기도 합니다.

<label for="name">Name (required): </label>
<input type="text" name="name" id="name" required aria-required="true">

참고
aria-required 속성은 보조 기술에 필요한 컨트롤에 대한 정보를 제공하여 (입력의 유효성을 검사하는 것과는 반대로) 사용자에게 적절하게 알려줍니다. 대부분의 최신 웹 브라우저는 HTML5 required 속성이 존재할 때 자동으로 해당 값을 true로 설정합니다. 이 예제에서는 필수 속성을 보조 기술에 전달하지 않는 웹 브라우저를 지원하기 위해 중복으로 제공됩니다.

공통 입력 유효성 검사

HTML5는 email, url, number, range, date 또는 time 등 다른 데이터에 대한 input type도 제공합니다. 대부분의 최신 웹 브라우저는 이러한 기능을 지원하며 입력 유효성 검사를 처리합니다. 또한 HTML5 유효성 검사는 date picker 및 사용자 지정 온스크린 키보드와 같은 특정 컨트롤을 제공하여 사용자가 데이터를 입력하는 데 도움을 줍니다. HTML5 입력 유형은 이러한 HTML5 기능을 지원하지 않는 구형 웹 브라우저에서는 단순한 텍스트 입력 필드로 표시됩니다.

아래 예는 이러한 HTML5 입력 유형이 실제로 작동하는 모습을 보여줍니다. 웹 브라우저에 따라 'range' 입력 필드는 슬라이더 컨트롤로 표시되어 사용자가 더 쉽게 입력할 수 있습니다. 마찬가지로 'number' 입력 필드에는 숫자를 점진적으로 늘리거나 줄일 수 있는 버튼이 표시될 수 있습니다. 잘못된 이메일 주소와 같은 입력 오류는 이전 예에서와 같이 웹 브라우저 대화 상자를 사용하여 표시됩니다.

<div>
  <label for="email">Email: </label>
  <input type="email" name="email" id="email">
</div>
<div>
  <label for="url">Website: </label>
  <input type="url" name="url" id="url">
</div>
<div>
  <label for="number">Number: </label>
  <input type="number" name="number" id="number" min="0" max="100" step="10" value="0">
</div>
<div>
  <label for="range">Range: </label>
  <input type="range" name="range" id="range" min="0" max="100" step="10" value="0">
</div>
<div>
  <label for="date">Date: </label>
  <input type="date" name="date" id="date">
</div>
<div>
  <label for="time">Time: </label>
  <input type="time" name="time" id="time">
</div>

참고
이러한 HTML5 input type 중 몇 가지에는 입력을 제한하고 유효성을 검사하는 데 도움이 되는 추가 매개변수가 있습니다. 여기에는 다음이 포함됩니다.
- maxlength는 텍스트 필드의 최대 길이를 정의합니다.
- min 및 max는 number 및 range 필드의 최소 및 최대를 정의합니다.
- steps는 숫자 및 범위 필드를 증가 및 감소시킬 수 있는 단계를 정의합니다.

패턴 입력 유효성 검사

HTML5 pattern 속성을 사용하면 정규 표현식을 사용하여 입력에 대한 사용자 지정 형식을 지정할 수 있습니다. 이는 전화번호, 우편번호, 일련번호와 같은 특정 유형의 데이터 패턴에 유용합니다.

예제 1 : 자동차 번호판 번호

아래 예에서 입력 요소의 패턴 속성은 독일의 자동차 번호판(등록) 번호와 일치하는 특정 형식을 지정합니다. 필수 패턴은 1~3개의 문자(자동차가 등록된 도시의 경우), 공백, 2~4개의 임의 문자, 또 다른 공백, 1~4개의 임의 숫자로 구성됩니다.

<div>
  <input type="text" id="license"
	pattern="[A-ZÖÄÜ]{1,3} [A-Z]{2,4} [0-9]{1,4}"
  >
</div>

다양한 input type에 대한 관용

유효성 검사는 특정 데이터 유형에 대해 가능한 한 다양한 input type을 수용하는 것을 목표로 해야 합니다. 예를 들어, 전화번호는 서로 다른 구분 기호 및 숫자 그룹으로 작성됩니다. 여러 표기법을 해석할 수 있다면 폼을 사용하기가 더 쉬워집니다. 또한 자유롭게 입력하는 것이 도움이 됩니다. 예를 들어 우편 번호는 일부 국가에서는 숫자로만 제한되지 않으므로 숫자 유형 입력을 사용하면 많은 웹사이트 사용자에게 문제가 될 수 있습니다.

클라이언트 측 유효성 검사의 이점

일반적으로 클라이언트 측 유효성 검사는 사용자 경험을 개선하고 유효성 검사 오류를 더 쉽게 해결할 수 있게 해줍니다. 또한 네트워크 및 서버 부하를 줄일 수 있습니다. 하지만 모든 웹 브라우저가 HTML5를 지원하는 것은 아니며, 사용자 지정 유효성 검사 스크립트를 지원하지 않을 수도 있습니다. 또한 클라이언트 측 유효성 검사를 쉽게 우회하거나 데이터가 서버에 도달하기 전에 변경될 수 있습니다. 즉, 서버 측에서도 유효성 검사를 수행해야 합니다.

사용자에 의한 유효성 검사

가능하면 사용자가 자신의 입력을 확인하고 필요한 경우 수정할 수 있어야 합니다. 이는 영구적이거나 다른 방식으로 중요한 작업뿐만 아니라 데이터를 자동으로 확인할 수 없는 경우에도 특히 중요합니다. 예를 들어, 사용자가 제공한 우편 주소를 확인할 수 있는 옵션을 제공하면 구매가 완료되기 전에 유용할 수 있습니다.

사용자 확인 필요

가능한 경우 데이터 영구 삭제와 같은 되돌릴 수 없는 작업에 대해 사용자 확인을 요구합니다. 예를 들면 다음과 같습니다.

CMS를 사용하면 사용자가 휴지통 폴더에서 댓글을 영구적으로 삭제할 수 있습니다. 이 작업이 시작되면 사용자에게 작업을 확인하는 대화 상자가 표시됩니다.
뱅킹 애플리케이션에서는 사용자가 '이체하려는 금액이 정확한지 확인했습니다'라는 확인란을 선택하여 이체 거래를 확인하도록 요구합니다.
쇼핑 웹사이트에서는 구매 거래가 완료되고 주문이 접수되기 전에 사용자가 확인해야 하는 주문 요약, 배송 주소 및 청구 정보를 표시합니다.

실행 취소 기능 제공

가능한 경우 되돌릴 수 있는 작업을 취소할 수 있는 메커니즘을 제공합니다. 예를 들면 다음과 같습니다.

콘텐츠 관리 시스템(CMS)에서 원치 않는 댓글을 삭제할 수 있습니다. 댓글을 바로 삭제하는 대신 '휴지통' 폴더에 저장하여 복원할 수 있도록 합니다.
웹메일 애플리케이션을 사용하면 몇 초 동안 이메일 전송을 '취소'할 수 있습니다. 이 기능은 사용자가 파일을 첨부하는 것을 잊었거나 잘못된 수신자에게 이메일을 보낸 경우에 유용합니다.
쇼핑 웹사이트에서는 주문이 제출된 후 최대 24시간까지 구매를 취소할 수 있습니다. 웹사이트에서는 정책을 설명하고 사용자에게 이메일로 전송된 구매 영수증에 정책 요약을 포함합니다. 24시간이 지나면 구매 품목이 사용자에게 배송되며 더 이상 취소할 수 없습니다.

사용자 알림

성공 여부와 관계없이 폼 제출 결과에 대한 피드백을 사용자에게 제공합니다. 여기에는 폼 컨트롤 또는 그 근처의 인라인 피드백과 일반적으로 폼 제출 후에 제공되는 전반적인 피드백이 포함됩니다.

알림은 간결하고 명확해야 합니다. 특히 오류 메시지는 이해하기 쉬워야 하며 해결 방법에 대한 간단한 지침을 제공해야 합니다. 성공 메시지 역시 작업 완료를 확인하는 데 중요합니다.

전반적인 피드백

폼이 제출되면 제출이 성공했는지 또는 오류가 발생했는지 여부를 사용자에게 알려주는 것이 중요합니다. 다음 기술 중 몇 가지를 조합할 수 있습니다.

예제 1 : 기본 제목 사용

피드백을 제공하는 일반적인 방법은 웹 페이지의 기본 제목(일반적으로 가장 눈에 잘 띄게 표시되는 <h1> 또는 <h2> 요소)을 사용하는 것입니다. 이 기법은 폼이 서버에서 처리될 때 특히 유용하지만 클라이언트 측 스크립팅에도 유용할 수 있습니다.

/* Error */ 
<h1>3 Errors – Billing Address</h1>

/* Success */ 
<h1>Thank you for submitting your order.</h1>

참고
기본 제목의 주된 목적은 여전히 사용자가 현재 있는 웹 페이지를 식별하는 것입니다. 오류로 인해 사용자가 동일한 웹 페이지로 되돌아간 경우 '오류'라는 단어와 오류 횟수를 사용하여 간단하게 표시하는 것이 도움이 됩니다.

예제 2 : 페이지 타이틀 사용

웹 페이지의 <title> 요소는 성공 및 오류를 표시하는 데 유용할 수 있습니다. 특히 스크린 리더 사용자는 웹 페이지가 로드될 때 이 피드백을 즉시 받게 됩니다. 이 요소는 기본 타이틀이 탐색 메뉴 뒤와 같이 콘텐츠 내 더 깊은 곳에 위치할 때 유용할 수 있습니다.

/* Error */
<title>3 Errors – Billing Address</title>

/* Success */
<title>Thank you for submitting your order.</title>

예제 3 : 대화 창(dialog) 사용

대화 창은 사용자에게 변경 사항을 알리는 일반적인 방법입니다. 사용자에게 알리는 다른 수단이 쉽게 놓칠 수 있는 경우 사용할 수 있습니다. 대화 창은 눈에 거슬리고 주의를 집중시키므로 원하는 효과를 얻을 수 있습니다.

자바스크립트는 적절한 키보드 탐색 기능을 제공하고 글꼴 크기, 색상, 언어 등 사용자의 기본 설정을 존중하는 매우 기본적인 경고 대화 창을 제공합니다. 사용자 정의 대화 창 구현은 해당 기능과 일치해야 합니다.

아래의 기본 예는 사용자가 '저장' 버튼을 활성화할 때 표시되는 팝업을 보여줍니다. 대화 창에 메시지가 표시되고 사용자가 "확인"을 선택할 때까지 웹 페이지가 비활성화됩니다.

<button type="button" id="alertconfirm">Save</button>

document.getElementById('alertconfirm')
.addEventListener('click', function() {
	/* [… code saving data …] */
	alert('Thanks for submitting the form!');
});

예제 4 : 오류 목록

오류가 발생하면 페이지 상단의 폼 앞에 오류를 노출하는 것이 도움이 됩니다. 목록에는 식별하기 쉽도록 고유한 제목이 있어야 합니다. 나열된 각 오류는 다음과 같아야 합니다.

사용자가 컨트롤을 인식할 수 있도록 해당 폼 컨트롤의 레이블을 참조합니다.
모든 사람이 이해하기 쉬운 방식으로 오류에 대한 간결한 설명을 제공해야 합니다.
실수를 수정하는 방법을 표시하고 사용자에게 형식 요구 사항을 상기시킵니다.
사용자가 쉽게 액세스할 수 있도록 해당 폼 컨트롤에 대한 페이지 내 링크를 포함합니다.

예를 들어 AJAX 기술을 사용할 때 브라우저에서 새 페이지를 로드하지 않고 폼 오류와 같은 변경 사항을 페이지에 동적으로 표시하는 경우가 있습니다. 이러한 경우 사용자에게 알리기 위해 오류 목록을 눈에 잘 띄는 컨테이너의 상단에 삽입해야 합니다. 위의 조언과 더불어 이 컨테이너에는 보조 기술 사용자가 이 변경 사항을 알 수 있도록 role 속성이 alert로 설정되어 있어야 합니다.

<div role="alert">
  <h4>There are 2 errors in this form</h4>
  <ul>
     <li>
        <a href="#firstname" id="firstname_error">
          The First name field is empty; it is a required field and must be filled in.
        </a>
    </li>
    <li>
      <a href="#birthdate" id="birthdate_error">
        The Date field is in the wrong format; it should be similar to 17/09/2013 (use a / to separate day, month, and year).
      </a>
    </li>
  </ul>
</div>

또한 폼 필드는 aria-describedby 속성을 사용하여 해당 오류 메시지와 연결할 수 있습니다.

<label for="firstname">First Name:</label>
<input type="text" id="firstname" aria-describedby="firstname_error">

인라인 피드백

전반적인 피드백 외에도 폼 컨트롤 또는 그 근처에서 보다 구체적인 피드백을 제공하면 사용자가 폼을 사용하는 데 더 큰 도움이 될 수 있습니다. 여기에는 입력 오류뿐만 아니라 올바르게 입력했는지를 알려주는 피드백도 포함됩니다.

일반적으로 메시지와 시각적 단서의 조합을 제공하기 위해 인라인 피드백을 사용합니다. 예를 들어, 올바른 입력은 확인 표시(✓)와 녹색 테두리로 표시하고, 오류는 오류 아이콘(예: 빨간색(✗) 권장 사항 또는 느낌표)과 빨간색 테두리로 표시할 수 있습니다. 오류 메시지에는 실수를 수정하는 방법에 대한 지침도 제공해야 합니다. 이러한 오류 메시지의 개념은 기본적으로 지침 제공과 동일합니다.

접근 방식 1 : 폼 제출 이후

아래 예시는 두 개의 입력 필드가 있는 폼을 보여줍니다. 첫 번째 입력 필드인 'username'은 사용자 아이디를 등록하는 데 사용됩니다. 두 번째 입력 필드인 'expiry date'은 등록이 만료되는 날짜를 입력하는 데 사용됩니다.

폼이 제출되면 입력 내용이 확인되고 사용자에게 피드백이 제공됩니다. 각 입력 필드에 적절한 성공 및 오류 메시지가 표시되어 사용자가 폼을 작성하는 데 도움이 됩니다.

제출된 데이터에 오류가 있는 경우, 오류가 있는 첫 번째 <input> 요소에 초점을 설정하는 것이 편리합니다.

<div class="success">
  <label for="username">
    <strong>OK:</strong> Username:
  </label>
  <input type="text" name="username"
         id="username" value="spaceteddy13"
         aria-describedby="userDesc">
  <span id="userDesc">✓</span>
</div>
<div class="error">
  <label for="expire">
    <strong>Error:</strong>
    Expiry date:
  </label>
  <input type="text" name="expire"
         id="expire" value="03.2015"
         aria-describedby="expDesc">
  <span id="expDesc">Use the format MM/YYYY.</span>
</div>
<div>
  <button type="submit">Submit</button>
</div>

.error   { color: #900; }
.success { color: #007a00; }
.error   input { border: 3px solid #900; }
.success input { border: 3px solid #007a00; }

접근 방식 2 : 입력 중

입력 중 즉각적인 피드백은 매우 유용할 수 있습니다. 예를 들어, 이전 예제에서 사용자 이름의 사용 가능 여부를 확인하려면 사용자가 폼을 여러 번 다시 제출해야 했습니다. 사용자가 입력하는 동안 피드백을 제공하면 적합한 사용자 아이디를 찾을 때까지 더 쉽게 시도할 수 있습니다. 그러나 이러한 기능을 사용하려면 클라이언트 측 스크립팅이 필요하며 모든 상황이 이러한 피드백에 적합한 것은 아닙니다.

예제 1 : 바이너리 메시지

다음 예에서는 사용자가 입력 필드에 텍스트를 입력하는 동안 사용자 이름의 사용 가능 여부가 즉시 확인됩니다. 사용자가 폼을 제출할 필요 없이 입력 값에 따라 성공 및 오류 메시지가 표시됩니다.

<div>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <span id="username_feedback" aria-live="polite"></span>
</div>

document.getElementById('username').addEventListener('keyup', function(){
  function setError(el, msg) {
    el.parentNode.querySelector('strong').innerHTML = "Error:";
    el.parentNode.className='error';
    el.parentNode.querySelector('span').innerHTML = msg;
  }
  function setSuccess(el) {
    el.parentNode.querySelector('strong').innerHTML = "OK:";
    el.parentNode.className='success';
    el.parentNode.querySelector('span').innerHTML = "&check;";
  }
  var val = this.value;
  if (val !== "") {
    if (taken_usernames.includes(val.trim())) {
      setError(this, '&cross; Sorry, this username is taken.');
    } else {
      setSuccess(this, '&check; You can use this username.');
    }
  } else {
    document.getElementById('username_feedback').innerHTML = '';
    document.getElementById('username_feedback').parentNode.className = '';
    document.querySelector('[for="username"] strong').innerHTML = '';
  }
});

참고
이 예제에서 표시된 메시지는 aria-live 속성 값이 polite 인 <span> 요소를 사용하여 코딩 되었습니다. 소위 "라이브 영역(live region)"이라고 하는 이 콘텐츠는 스크린 리더 및 기타 보조 기술에 전달됩니다. "polite" 값은 메시지의 중요성을 덜 강조하며 스크린 리더가 이 메시지를 소리내어 읽기 위해 현재 작업을 중단하지 않도록 합니다. 따라서 사용자가 키 입력을 할 때마다 메시지가 읽히는 것이 아니라 사용자가 입력을 멈출 때 한 번만 읽힙니다.

예제 2 : 확장된 피드백

아래 예는 성공 및 오류 메시지와 더불어 가능한 다양한 유형의 피드백을 보여줍니다. 이 예에서는 사용자가 비밀번호를 입력할 때 비밀번호의 강도를 확인합니다. 피드백은 비밀번호가 얼마나 강력한지 정도를 나타냅니다. 피드백은 색상 적용, '약함', '보통', '강함' 등의 라벨과 정도를 나타내는 간단한 그래픽, 비밀번호를 해독하는 데 필요한 시간 등 여러 가지 단서를 사용하여 표시됩니다.

참고
다음 예제 입력 필드에서는 데이터가 전송되지 않습니다. 비밀번호는 데모용으로 일반 텍스트로 표시됩니다.

비밀번호 입력 예제는 아래 링크에서 확인 가능합니다.

접근 방식 3 : 초첨 변경 시

대부분의 경우 오류 메시지가 표시되므로 사용자가 입력하는 동안 입력을 확인하는 것이 의미가 없는 경우도 있습니다. 날짜와 같은 특정 형식으로 데이터를 입력해야 하는 경우가 이에 해당합니다.

아래 예제에서는 사용자가 만료일을 입력해야 합니다. 사용자가 탭 키를 사용하여 포커스를 다음 필드로 이동하거나 다른 필드를 클릭하는 등 폼 필드를 떠날 때 입력이 확인됩니다.

<div>
  <label for="expire"><strong></strong> Expiry date:</label>
  <input type="text" name="expire" id="expire" value="03.2015" aria-describedby="expDesc3">
  <span id="expDesc3" aria-live="assertive"></span>
</div>

참고
이 예제에서 표시된 메시지는 aria-live 속성의 값이 assertive 인 <span> 요소를 사용하여 코딩 되었습니다. 소위 "라이브 영역(live region)"이라고 하는 이 콘텐츠는 스크린 리더 및 기타 보조 기술에 전달됩니다. "assertive" 값은 메시지의 중요성을 강조하고 스크린 리더가 현재 진행 중인 작업을 중단하고 이 메시지를 소리내어 읽도록 합니다. 따라서 포커스를 받은 다음 요소가 사용자에게 알려지기 전에 메시지가 큰 소리로 읽혀집니다.

여러 페이지로 구성된 폼

가능하면 하나의 긴 폼은 논리적 순서나 단계를 구성하는 여러 개의 작은 폼으로 나누세요. 이렇게 하면 컴퓨터 사용 경험이 적거나 다양한 인지 장애가 있는 사람들이 긴 폼을 덜 어렵고 이해하기 쉽게 만들 수 있습니다.

여러 페이지로 구성된 폼에는 다음과 같은 기본 원칙이 적용되어야 합니다.

모든 페이지에서 전체 지침을 반복합니다.
컨트롤의 논리적 그룹에 따라 폼을 분할합니다. 예를 들어 온라인 상점에서는 일반적으로 배송 정보와 결제 정보가 분리되어 있습니다.
선택적 단계를 쉽게 인식하고 건너뛸 수 있도록 하세요. 예를 들어 웹 페이지의 기본 제목에 선택적 단계를 강조 표시하고 건너뛸 수 있는 옵션을 제공하세요.
가능하면 폼 작성에 시간 제한을 설정하지 마세요. 시간 제한이 필요한 경우 사용자가 시간 제한을 조정하거나 연장할 수 있는 기능을 제공하세요.

진행 상황 표시

가능하면 폼의 첫 단계에서 전체 폼이 몇 개의 단계로 되어 있는지 설명해야 합니다. 각 단계는 사용자에게 진행 상황을 알려야 합니다.

접근 방식 1 : 페이지 타이틀 사용

<title> 요소는 스크린 리더 사용자와 같이 많은 사람들이 가장 먼저 읽는 항목입니다. 진행 상황을 포함하도록 페이지 제목을 변경하면 즉각적인 피드백이 제공됩니다. 이 정보는 단계 이름 또는 오류 알림과 같이 제목에 제공된 다른 정보 보다 먼저 표시되어야 합니다.

<title>Step 2 of 4: Shipping Address – Complete Purchase – Galactic Teddy Bears Shop</title>

접근 방식 2 : 주요 헤드라인 사용

주요 헤드라인을 사용하여 사용자에게 정보를 제공하는 것은 일반적으로 문서에서 기본 제목이 눈에 잘 띄기 때문에 페이지를 스캔하는 사람들에게 시각적으로 동일한 정보를 제공할 수 있는 좋은 방법입니다.

<h1>Shipping Address (Step 2 of 4)</h1>

접근 방식 3 : HTML5 progress 요소 사용

HTML5는 사용자에게 진행 상황을 알리는 데 사용할 수 있는 <progress> 요소를 제공합니다. 이는 질문에 대한 답변에 따라 단계를 건너뛰는 설문조사와 같이 사용자 입력에 따라 단계 수가 달라지는 상황에서 특히 유용할 수 있습니다.

Survey <progress max="7" value="1">(Step 1 of circa 7)</progress><br>
Survey <progress max="7" value="2">(Step 2 of circa 7)</progress><br>
[…]
Survey <progress max="7" value="6">(Step 6 of circa 7)</progress><br>
Survey <progress max="7" value="7">(Finished)</progress>

progress 요소는 다른 폼 요소와 마찬가지로 웹사이트에서 직접 렌더링되는 운영 체제의 구성 요소입니다. 이러한 구성 요소는 일부 운영 체제에서 애니메이션으로 표시되므로 사용자가 자동으로 시작되고 5초 이상 지속되며 다른 콘텐츠와 병렬로 표시되는 애니메이션을 비활성화할 수 있어야 한다는 WCAG의 2.2.2 일시 중지, 중지, 숨기기 성공 기준을 위반하게 됩니다.

애니메이션은 아래와 같이 브라우저별 CSS로 사용자 지정 스타일을 사용하여 중지할 수 있습니다.

/* Microsoft IE */
progress {
  color: #036;
}

/* Apple Safari and Google Chrome */
progress::-webkit-progress-bar {
  background-color: #036;
}

/* Mozilla Firefox */
progress::-moz-progress-bar {
  background-color: #036;
}

접근 방식 4 : 단계별 표시기 사용

폼에 완료해야 할 단계 수가 알려진 경우 '단계별 표시기'를 사용하면 사용자가 방향을 잡는 데 도움이 될 수 있습니다. 아래 예에서는 모든 단계에 대해 목록 항목이 있는 정렬된 목록을 사용합니다. 시각적으로 숨겨진 텍스트를 사용하여 현재 단계와 완료된 단계를 표시합니다. 가능하면 이미 완료된 단계에 대한 링크를 제공하여 사용자가 검토할 수 있도록 하세요. 이 경우 현재 단계에 이미 입력된 데이터는 모두 저장되어야 합니다.

<div class="tlwrapper">
  <ol class="timeline">
    <li class="timeline-past">
      <span class="visuallyhidden">Completed: </span>
      <a href="billing.html">Billing Address</a>
    </li>
    <li class="timeline-current">
      <span class="visuallyhidden">Current: </span>
      <span>Shipping Address</span>
    </li>
    <li><span>Review Order</span></li>
    <li><span>Payment</span></li>
    <li><span>Finish Purchase</span></li>
  </ol>
</div>

사용자 지정 컨트롤

폼이 있는 페이지를 디자인하다보면 표준 폼 컨트롤로 달성할 수 있는 것 이상의 무언가가 필요한 경우가 있습니다. 이러한 경우 표준 컨트롤에 추가 기능 및 스타일을 구축할 수 있습니다. 견고성을 보장하려면 최종 컨트롤이 처리하려는 기능의 하위 집합을 수행하는 HTML 요소를 재사용하고 거기서부터 빌드하세요. 다음 예제에서는 추가 기능의 접근성을 보장하기 위해 고려해야 할 사항에 대한 몇 가지 일반적인 지침을 제공합니다.

빌드할 적절한 HTML 요소가 없는 컴포넌트의 경우 보조 기술을 사용하는 사람들을 위해 기능을 전달하는 데 WAI-ARIA 속성이 유용할 수 있습니다.

예제 1 : 공유 버튼

아래 예는 두 가지 기능이 있는 소셜 미디어 '공유 버튼'을 보여줍니다. 이미 얼마나 많은 사람들이 버튼을 활성화했는지('공유') 표시하고 사용자가 버튼을 눌러 공유 기능을 활성화할 수 있습니다.

사용자 지정 버튼은 CSS를 사용하여 일반 <button> 요소의 스타일을 지정하므로 CSS 없이 렌더링할 때 기본 기능이 그대로 유지됩니다. 예를 들어, 대부분의 화면 리더는 버튼과 해당 내용을 알립니다.

또한 <form> 요소의 action 속성은 자바스크립트가 지원되지 않는 경우 동일한 기능을 수행하는 서버 측 스크립트를 참조합니다.

<form action="path/to/submit">
  <button type="submit" id="share-btn" class="btn-primary">
    <span class="count">3</span>
    <span class="text">Shares</span>
  </button>
</form>

document.getElementById('share-btn').addEventListener('click', function(event){
  event.preventDefault();
  event.stopImmediatePropagation();

  var count = this.querySelector('.count');
  var text = this.querySelector('.text');

  count.textContent = parseInt(count.textContent) + 1;
  text.textContent = "Shared ✓";

  this.setAttribute("disabled", "true");
});

예제 2 : 별점

일반적으로 별점은 특정 항목을 평가하는 데 사용할 수 있는 별 5개 이미지로 구성됩니다. 마우스로 별을 가리키고 별을 클릭하면 별을 선택할 수 있습니다. 예를 들어 사용자가 왼쪽에서 세 번째 별을 클릭하면 해당 항목의 평점은 별 5개 중 3개가 됩니다.

가능한 한 쉽게 액세스할 수 있도록 하기 위해 폼은 시각적으로 숨겨지는 필드를 사용합니다.

이 폼에는 각 별에 대해 각 하나의 라디오 버튼, 그리고 기본적으로 선택되어 있는 별 0개에 해당하는 라디오 버튼, 총 6개의 라디오 버튼이 포함되어 있습니다. 라디오 버튼의 레이블에는 실제 텍스트("별 1개", "별 2개", ...)가 포함되며 시각적으로도 숨겨져 있습니다. 또한 폼에는 시각적으로 숨겨진 submit 버튼이 포함되어 있어 키보드 사용자가 라디오 버튼을 탐색할 때 폼이 자동으로 제출되지 않습니다.

별의 이미지는 SVG를 사용하여 생성됩니다. 이 별의 색상을 반영한 애니메이션은 마우스, 키보드 및 기타 입력 방법을 사용하여 활성화할 수 있도록 CSS :focus 및 :hover 가상 클래스를 통해 조정합니다. :checked 가상 클래스 및 일반 형제 선택자는 선택된 별, 활성화된 별, 비활성화된 별을 나타내는 데 사용됩니다.

<form action="#" id="star_rating">
  <input value="0" id="star0" checked
         type="radio" name="rating" class="visuallyhidden">
  <label for="star0">
    <span class="visuallyhidden">0 Stars</span>
    <svg viewBox="0 0 512 512">
      <g stroke-width="70" stroke-linecap="square">
	    <path d="M91.5,442.5 L409.366489,124.633512"></path>
	    <path d="M90.9861965,124.986197 L409.184248,443.184248"></path>
	  </g>
    </svg>
  </label>

  <input value="1" id="star1"
         type="radio" name="rating" class="visuallyhidden">
  <label for="star1">
    <span class="visuallyhidden">1 Star</span>
    <svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
  </label>

  <input value="2" id="star2"
         type="radio" name="rating" class="visuallyhidden">
  <label for="star2">
    <span class="visuallyhidden">2 Stars</span>
	<svg viewBox="0 0 512 512">…</svg>
  </label>

  <input value="3" id="star3"
         type="radio" name="rating" class="visuallyhidden">
  <label for="star3">
    <span class="visuallyhidden">3 Stars</span>
    <svg viewBox="0 0 512 512">…</svg>
  </label>

  <input value="4" id="star4"
         type="radio" name="rating" class="visuallyhidden">
  <label for="star4">
    <span class="visuallyhidden">4 Stars</span>
	<svg viewBox="0 0 512 512">…</svg>
  </label>

  <input value="5" id="star5"
         type="radio" name="rating" class="visuallyhidden">
  <label for="star5">
    <span class="visuallyhidden">5 Stars</span>
    <svg viewBox="0 0 512 512">…</svg>
  </label>

  <button type="submit" class="btn-small visuallyhidden focusable">Submit rating</button>

  <output></output>
</form>

#star_rating svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
}
#star_rating label, #star_rating output {
  display: block;
  float: left;
  font-size: 2em;
  height: 1.2em;
  color: #036;
  cursor: pointer;
  /* Transparent border-bottom avoids jumping
     when a colored border is applied
     on :hover/:focus */
  border-bottom: 2px solid transparent;
}
#star_rating output {
  font-size: 1.5em;
  padding: 0 1em;
}
#star_rating input:checked ~ label {
  color: #999;
}
#star_rating input:checked + label {
  color: #036;
  border-bottom-color: #036;
}
#star_rating input:focus + label {
  border-bottom-style: dotted;
}
#star_rating:hover input + label {
  color: #036;
}
#star_rating input:hover ~ label,
#star_rating input:focus ~ label,
#star_rating input[id="star0"] + label {
  color: #999;
}
#star_rating input:hover + label,
#star_rating input:focus + label {
  color: #036;
}
#star_rating input[id="star0"]:checked + label {
  color: #ff2d21;
}
#star_rating [type="submit"] {
  float: none;
}

var radios = document.querySelectorAll('#star_rating input[type=radio]');
var output = document.querySelector('#star_rating output');

var do_something = function(stars) {
  // An AJAX request could send the data to the server
  output.textContent = stars;
};

// Iterate through all radio buttons and add a click
// event listener to the labels
Array.prototype.forEach.call(radios, function(el, i){
  var label = el.nextSibling.nextSibling;
  label.addEventListener("click", function(event){
    do_something(label.querySelector('span').textContent);
  });
});

// If the form gets submitted, do_something
document.querySelector('#star_rating').addEventListener('submit', function(event){
  do_something(document.querySelector('#star_rating :checked ~ label span').textContent);
  event.preventDefault();
  event.stopImmediatePropagation();
});

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 6. 폼

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.

[번역] 웹접근성 튜토리얼 - 5. 테이블(표)

닥스터 — Thu, 6 Jul 2023 00:17:31 +0900

데이터 표는 그리드에서 논리적 관계로 데이터를 구성하는 데 사용됩니다. 접근 가능한 표에는 헤더 셀과 데이터 셀을 나타내고 그 관계를 정의하는 HTML 마크업이 필요합니다. 보조 기술은 이 정보를 사용하여 사용자에게 컨텍스트를 제공합니다.

표에 액세스할 수 있도록 하려면 헤더 셀은 <th>로, 데이터 셀은 <td>로 마크업해야 합니다.
보다 복잡한 테이블의 경우 scope, id 및 headers 속성을 사용하여 명시적인 연결이 필요할 수 있습니다.

이 자습서에서는 표에 적절한 구조적 마크업을 적용하는 방법을 보여줍니다. 여기에는 다음 페이지가 포함됩니다.

행 또는 열에 대해 하나의 헤더가 있는 표
구분하기 쉬운 콘텐츠가 있는 표의 경우 헤더 셀은 <th>로, 데이터 셀은 <td> 요소로 표시합니다.

헤더가 두 개인 표에는 행 헤더와 열 헤더를 사용합니다.
헤더 방향이 불분명한 테이블의 경우 scope 속성을 열 또는 행으로 설정하여 각 헤더의 방향을 정의합니다.

불규칙한 헤더가 있는 테이블에는 여러 열 또는 행에 걸쳐 있는 헤더 셀이 있습니다.
이러한 테이블의 경우 열 및 행 그룹을 정의하고 scope 속성의 colgroup 및 rowgroup 값을 사용하여 헤더 셀의 범위를 설정합니다.

다단계 헤더가 있는 테이블에는 데이터 셀당 여러 헤더 셀이 연결되어 있습니다.
너무 복잡하여 헤더 셀을 엄격하게 가로 또는 세로로 연결할 수 없는 테이블의 경우 ID 및 headers 속성을 사용하여 헤더와 데이터 셀을 명시적으로 연결합니다.

캡션 및 요약
캡션은 표의 전체 주제를 식별하며 대부분의 상황에서 유용합니다. 요약은 복잡한 표에서 방향 또는 탐색 힌트를 제공합니다.

PDF와 같은 HTML 이외의 일부 문서 형식은 표 구조 마크업과 유사한 메커니즘을 제공합니다. 워드 프로세싱 애플리케이션도 표를 마크업하는 메커니즘을 제공할 수 있습니다. 한 형식에서 다른 형식으로 변환할 때 표 마크업이 손실되는 경우가 많지만 일부 프로그램에서는 표 마크업 변환을 지원하는 기능을 제공할 수 있습니다.

많은 웹 작성 도구와 콘텐츠 관리 시스템(CMS)은 코드를 수동으로 편집하지 않고도 표를 작성하는 동안 헤더 셀을 정의하는 기능을 제공합니다.

참고
이 자습서에서는 그리드에 데이터를 표시하는 데 사용되는 표를 만드는 방법에 대한 지침을 제공합니다.
이 자습서는 레이아웃에 사용되는 테이블에는 적용되지 않습니다. 일반적으로 표는 레이아웃 용도로 사용되지 않습니다. 대신 시각적 프레젠테이션을 위해 CSS(Cascading Style Sheet)를 사용하는 것이 가장 좋습니다.

이것이 왜 중요할까요?

헤더와 데이터 셀을 구분하여 적절하게 연결되도록 구조적 마크업이 반영되지 않은 표는 접근성 장벽을 만듭니다. 시각적 단서에만 의존하는 것만으로는 접근성 높은 표를 만들 수 없습니다. 구조적 마크업을 사용하면 헤더와 데이터 셀을 소프트웨어에서 프로그래밍 방식으로 결정할 수 있습니다.

스크린 리더 사용자는 표를 탐색할 때 행과 열 헤더를 소리내어 읽을 수 있습니다. 스크린 리더는 한 번에 한 셀씩 말하고 관련 헤더 셀을 참조하므로 사용자가 문맥을 잃지 않습니다.
사용자 지정 스타일시트를 사용하여 헤더 셀을 더 눈에 잘 띄게 표시하는 등 데이터를 렌더링하는 다른 방법을 사용하는 사람들도 있습니다. 이러한 기법을 사용하면 텍스트 크기와 색상을 변경하고 정보를 그리드가 아닌 목록으로 표시할 수 있습니다. 대체 렌더링을 허용하려면 테이블 코드가 적절하게 구조화되어 있어야 합니다.

하나의 헤더가 있는 표

이 페이지에서는 행에 하나의 헤더 혹은 열에 하나의 헤더가 있는 표를 다룹니다. 이러한 테이블의 데이터는 그 자체로 설명적이며 모호하지 않습니다.

테이블 콘텐츠가 모호하거나 열의 헤더와 행의 헤더가 모두 있는 경우 혼동을 피하기 위해 범위 속성을 사용해야 합니다. 이러한 표에 대한 자세한 지침은 헤더가 두 개인 표를 참조하세요.

예 1 ) 최상단 행에만 헤더 셀이 있는 표

다음 콘서트 표에는 첫 번째 행의 셀이 <th> 요소를 사용하여 마크업되어 있습니다. 이 표는 매우 작은 표이고 데이터 자체가 각 열에서 뚜렷하게 다르기 때문에 헤더와 데이터 셀 간의 관계가 분명하기 때문에 허용됩니다.

참고
일부 스크린 리더에서는 <th> 요소의 방향이 모호하기 때문에 "장소" 셀에서 "날짜-이벤트-장소"로 읽힙니다.

<table>
  <tr>
    <th>날짜</th>
    <th>이벤트</th>
    <th>장소</th>
  </tr>
  <tr>
    <td>12 February</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  […]
</table>

예 2 ) 첫 번째 열에만 헤더 셀이 있는 표

다음 표에서는 이전 예제의 데이터가 왼쪽에 헤더 열이 있는 상태로 배치되어 있습니다. 이 상황에서도 작고 간단한 테이블이기 때문에 이 코드만 사용할 수 있습니다. 이 튜토리얼의 다음 페이지에서는 더 복잡한 테이블을 코딩하는 방법을 설명합니다.

<table>
  <tr>
    <th>날짜</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th>이벤트</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th>장소</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>

예 3 ) 모호한 데이터가 있는 표

이 예제에서는 데이터(이름, 성, 도시)가 각각 어떤 헤더에 해당하는지 알지 못하면 서로 구분할 수 없습니다. 값이 col인 scope 속성은 헤더 셀의 방향을 정의하고 해당 데이터 셀과 연결합니다. scope 속성은 헤더 행 또는 열이 하나인 큰 테이블에도 필요합니다.

<table>
  <caption>테디 베어 수집가:</caption>
  <tr>
    <th scope="col">성</th>
    <th scope="col">이름</th>
    <th scope="col">도시</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
  <tr>
    <td>Zeki</td>
    <td>Rome</td>
    <td>Min</td>
  </tr>
  <tr>
    <td>Apirka</td>
    <td>Kelly</td>
    <td>Brynn</td>
  </tr>
</table>

두 개의 헤더가 있는 표

이 페이지에서는 행 헤더와 열 헤더가 있는 표를 다룹니다.
이러한 테이블에서는 헤더와 데이터 셀 간의 관계가 금방 모호해집니다. 이러한 테이블의 경우 <th> 요소를 사용하여 헤더 셀을 식별하고 scope속성을 사용하여 각 헤더의 방향을 선언합니다. scope 속성을 row 또는 col로 설정하여 헤더가 각각 전체 행 또는 열에 적용됨을 나타낼 수 있습니다.

또한 <caption> 요소를 사용하여 문서에서 표를 식별할 수 있습니다. 이 요소는 표에서 표로 이동할 수 있는 '표 모드'로 웹 페이지를 탐색하는 스크린 리더 사용자에게 특히 유용합니다. <caption> 요소 사용에 대한 자세한 배경 및 지침은 캡션 및 요약 항목에서 확인할 수 있습니다.

예 1 ) 맨 윗줄과 첫 번째 열에 헤더 셀이 있는 표

다음 개장 시간 표에는 맨 위 행과 첫 번째 열에 헤더 정보가 있습니다. 모든 헤더 셀은 scope 속성이 추가된 <th> 셀로 마크업됩니다.

헤더 행에서 scope의 col 값은 각 헤더 셀을 열의 데이터 셀과 연결합니다. 헤더 열에서 행 값은 개별 헤더를 해당 행과 연결합니다. 이 정보가 없으면 일부 사용자는 헤더와 데이터 셀 간의 관계를 쉽게 이해하지 못할 수 있습니다. 아래 예에서 'Open' 및 'Closed' 레이블은 특정 요일과 시간에 할당할 수 있는 경우에만 유용합니다.

<table>
  <tr>
    <td></td>
    <th scope="col">월요일</th>
    <th scope="col">화요일</th>
    <th scope="col">수요일</th>
    <th scope="col">목요일</th>
    <th scope="col">금요일</th>
  </tr>
  <tr>
    <th scope="row">09:00 – 11:00</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">11:00 – 13:00</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">13:00 – 15:00</th>
    <td>Open</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">15:00 – 17:00</th>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
  </tr>
</table>

예 2 ) 헤더 셀의 오프셋 열이 있는 표

이 표에서는 행 헤더 셀이 첫 번째 열이 아닌 두 번째 열에 있습니다. 접근 방식은 위의 예와 유사합니다: 맨 위 행에 있는 헤더 셀의 scope는 col로 설정됩니다. scope의 row 값을 사용하면 두 번째 열의 헤더 셀이 개별 헤더 셀의 왼쪽과 오른쪽에 있는 데이터 셀에 할당됩니다.

<table>
  <caption>
    지난 6개월 동안 사용한 휴일
  </caption >
  <thead>
    <tr>
      <th scope="col"><abbr title="Identification Number">ID</abbr></th>
      <th scope="col">이름</th>
      <th scope="col">7월</th>
      <th scope="col">8월</th>
      <th scope="col">9월</th>
      <th scope="col">10월</th>
      <th scope="col">11월</th>
      <th scope="col">12월</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>215</td>
      <th scope="row">Abel</th>
      <td>5</td>
      <td>2</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>3</td>
    </tr>

    <tr>
      <td>231</td>
      <th scope="row">Annette </th>
      <td>0</td>
      <td>5</td>
      <td>3</td>
      <td>0</td>
      <td>0</td>
      <td>6</td>
    </tr>

    <tr>
      <td>173</td>
      <th scope="row">Bernard</th>
      <td>2</td>
      <td>0</td>
      <td>0</td>
      <td>5</td>
      <td>0</td>
      <td>0</td>
    </tr>

    <tr>
      <td>141</td>
      <th scope="row">Gerald</th>
      <td>0</td>
      <td>10</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>8</td>
    </tr>

    <tr>
      <td>99</td>
      <th scope="row">Michael</th>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>0</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

불규칙한 헤더가 있는 표

이 페이지에서는 여러 열 또는 행에 걸쳐 있는 헤더 셀이 있는 표에 대해 설명합니다. 여러 요소와 속성을 사용하여 헤더 및 데이터 셀의 구조와 관계를 정의할 수 있습니다.

예를 들어, 세 개의 열에 걸쳐 있는 헤더 셀은 열 그룹의 해당 데이터 셀과 연결되어야 합니다. 헤더 셀의 scope 속성을 colgroup 값으로 설정하면 이 작업을 수행할 수 있습니다. 여러 행에 걸쳐 있는 헤더 셀에도 동일한 원칙이 적용됩니다. 이 경우 scope 속성에 rowgroup 값을 사용하여 연결합니다.

그러나 이러한 연결을 만들기 전에 테이블 마크업에서 이러한 열 및 행 그룹의 구조를 정의해야 합니다:

열 그룹은 <colgroup> 요소를 사용하여 정의합니다.
행 그룹은 <thead>, <tfoot> 및 <tbody> 요소로 정의됩니다.
- <thead> 및 <tfoot> 요소는 테이블에서 한 번만 사용할 수 있습니다.
- 테이블에는 각각 행 그룹을 정의하는 <tbody> 요소가 얼마든지 포함될 수 있습니다.

예 1 ) 두 단계에 걸쳐 헤더가 있는 표

아래 표에는 두 쌍의 열 헤더가 있습니다. 각 열 헤더 쌍인 "생산됨" 및 "판매됨"은 해당 쌍을 식별하는 첫 번째 단계 헤더와 연결됩니다: "Mars" 및 "Venus"입니다. 이러한 첫 번째 단계 헤더는 값이 2인 colspan 속성을 사용하여 두 열에 걸쳐 있도록 만들어집니다.

첫 번째 단계 헤더를 두 열의 모든 셀과 올바르게 연결하려면 테이블의 시작 부분에 열 구조를 정의해야 합니다. <col> 요소는 왼쪽부터 시작하여 각 열을 식별합니다. 헤더가 두 개 이상의 열에 걸쳐 있는 경우 해당 수의 <col> 요소 대신 <colgroup> 요소를 사용하면 span 속성에 걸쳐 있는 열의 수가 표시됩니다.

또한 첫 번째 단계 헤더의 scope 속성 값은 전체 열 그룹과 연결되도록 colgroup으로 설정됩니다. 두 번째 단계 헤더는 해당 열에만 적용되므로 scope 속성은 이전 예제에서와 같이 col로 설정됩니다.

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">생산됨</th>
    <th scope="col">판매됨</th>
    <th scope="col">생산됨</th>
    <th scope="col">판매됨</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

참고
<colgroup> 요소에는 그룹의 개별 열을 식별하는 <col> 요소가 포함될 수 있습니다. <colgroup> 요소에 포함되지 않은 <col> 요소와 <colgroup> 요소의 span 속성으로 표시된 열 요소의 합은 테이블의 총 열 수와 같아야 합니다.

예 2 ) 여러 행 또는 열에 걸쳐 있는 헤더가 있는 표

아래 예제에서 테이블은 두 개의 개별 열과 세 개의 열에 걸쳐 있는 하나의 열 그룹으로 구성됩니다. 행은 6개입니다. 여러 행에 걸쳐 있는 두 개의 헤더. 여러 행에 걸쳐 있는 헤더 셀이 해당 행의 모든 셀과 올바르게 연결되도록 하려면 행을 그룹화해야 합니다. 행 그룹을 정의하려면 해당 행을 <tbody> 요소로 래핑합니다. 또한 행에 걸쳐 있는 헤더 셀의 scope 속성을 rowgroup으로 설정해야 합니다.

헤더가 여러 헤더 행에 걸쳐 있는 경우 <tbody> 요소 대신 <thead> 요소로 행을 래핑합니다. 헤더가 표의 푸터 영역에서 여러 행에 걸쳐 있는 경우 <tfoot> 요소를 사용합니다.

표가 복잡하기 때문에 표의 레이아웃을 자세히 설명하기 위해 요약 기법을 사용할 수 있습니다.

<table>
  <caption>
    Poster availability
  </caption>
  <tr>
    <th scope="col">Poster name</th>
    <th scope="col">Color</th>
    <th colspan="3" scope="colgroup">Sizes available</th>
    </tr>
  <tr>
    <th rowspan="3" scope="rowgroup">Zodiac</th>
    <td>Full color</td>
    <td>A2</td>
    <td>A3</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Black and white</td>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td>Sepia</td>
    <td>A3</td>
    <td>A4</td>
    <td>A5</td>
  </tr>
  <tr>
    <th rowspan="2" scope="rowgroup">Angels</th>
    <td>Black and white</td>
    <td>A1</td>
    <td>A3</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Sepia</td>
    <td>A2</td>
    <td>A3</td>
    <td>A5</td>
  </tr>
</table>

참고
열을 가로지르는헤더가 없더라도 모든 표에 <thead>, <tbody> 및 <tfoot>를 사용하면 언제 사용해야 하는지 혼동을 피할 수 있습니다.

다단계 헤더가 있는 표

이 페이지에서는 데이터 셀마다 다단계 헤더 셀이 연결된 테이블을 다룹니다. 이러한 테이블은 너무 복잡하여 헤더와 데이터 셀 간의 엄격한 수평 또는 수직 연결을 식별하기 어렵습니다. 이러한 테이블에서 각 테이블 헤더는 (문서 전체에 걸친) 고유 id로 표시됩니다. 데이터 셀은 headers 속성에 공백으로 구분된 하나 이상의 id를 나열하여 해당 id를 참조합니다.

이러한 방식으로 마크업해야 하는 테이블에는 다음이 포함됩니다.

테이블 중간에 반복되거나 변경되는 열 헤더가 있는 테이블
각 데이터 셀에 연결된 헤더 셀이 3개 이상인 테이블

여러 헤더가 있는 표에는 표를 식별하는 캡션과 표의 레이아웃을 설명하는 요약이 필요할 수도 있습니다. (캡션 및 요약 참조).

많은 경우, 예 3)에 표시된 것처럼 정보를 더 작고 관리하기 쉬운 테이블로 분할하여 모든 독자가 덜 복잡하게 만들 수 있도록 이러한 테이블의 정보를 재구성하는 것을 고려할 가치가 있습니다.

예 1 ) 각 열에 여러 열 헤더가 있는 표

아래 표에서 표의 상단 절반에 대한 헤더는 하단 절반의 헤더와 다릅니다. 테이블 중간에 헤더가 변경되어 열의 헤더가 모호해집니다. 각 데이터 셀이 올바른 헤더에 연결되도록 하기 위해 각 <th> 요소에는 고유 id가 있고 각 <td> 셀에는 연결된 헤더 셀의 id 값을 나열하는 headers 속성이 있습니다.

다음 코드 스니펫에서는 헤더 셀 자체의 헤더가 빈 셀로 설정되어 있습니다(ID가 "blank"인 경우). 이렇게 하면 일부 보조 기술이 해당 헤더 셀의 헤더를 읽지 못합니다.

<th> 셀에 id 속성 할당하기

[…]
<td id="blank">&nbsp;</td>
<th id="co1" headers="blank">Example 1 Ltd</th>
<th id="co2" headers="blank">Example 2 Co</th>
[…]
<th id="c1" headers="blank">Contact</th>
[…]

<td> 셀에 headers 속성 할당하기

[…]
<td headers="co1 c1">James Phillips</td>
<td headers="co2 c1">Marie Beauchamp</td>
[…]

예 2 ) 각 데이터 셀과 관련된 3개의 헤더가 있는 표

이 예에서 테이블 헤더는 테이블의 다음 섹션에 대한 내용을 설명하는 부제목으로 사용됩니다. 이러한 헤더가 없으면 정보가 불분명할 수 있습니다. headers 속성을 사용하면 세 개의 헤더를 모두 데이터 셀에 적절하게 연결할 수 있습니다.

<th> 셀에 id 속성 할당하기

[…]
  <th id="par" colspan="5" scope="colgroup">Paris</th>
</tr>
<tr>
  <th id="pbed1">1 bedroom</th>
[…]

<td> 셀에 headers 속성 할당하기

[…]
<td headers="par pbed1 stud">11</td>
<td headers="par pbed1 apt"> 20</td>
[…]

예 3 ) 다단계 테이블 분할

아래 두 테이블은 위 예제의 다단계 테이블과 동일한 정보를 제공합니다. 이렇게 하면 누구나 정보를 더 쉽게 이해하고 코딩하기 쉬워집니다. 또한 간단한 표는 WYSIWYG("What you see is what you get”) 편집기를 비롯한 웹 콘텐츠 작성 도구에서 훨씬 더 잘 지원됩니다.

캡션 & 요약

캡션과 요약은 사용자가 표를 찾고, 탐색하고, 이해하는 데 도움이 되는 정보를 제공합니다. 모든 경우에 캡션과 요약이 WCAG를 준수해야 하는 것은 아니지만, 캡션과 요약은 종종 필요한 정보를 제공하는 매우 간단한 방법입니다.

캡션은 표의 제목과 같은 기능을 합니다.
대부분의 스크린 리더는 캡션의 내용을 알려줍니다. 캡션은 사용자가 표를 찾고 표의 내용을 이해하여 읽을지 여부를 결정하는 데 도움이 됩니다. 사용자가 '표 모드'를 사용하는 경우 캡션은 표를 식별하는 기본 메커니즘입니다. 캡션은 <caption> 요소로 제공됩니다.
요약은 표의 데이터 구성에 대한 정보를 전달하고 사용자가 표를 탐색하는 데 도움이 됩니다.
예를 들어 아래 예시에서와 같이 테이블의 구조가 비정상적인 경우 어떤 행 또는 열에서 어떤 콘텐츠를 찾을 수 있는지에 대한 정보를 사용자에게 제공할 수 있습니다. 요약은 일반적으로 복잡한 테이블에만 필요합니다.

하나의 표에 캡션과 요약이 모두 제공되는 경우 요약은 캡션에 있는 정보와 중복되지 않아야 합니다.

캡션에 대한 자세한 내용은 캡션 요소를 사용하여 데이터 테이블 캡션과 데이터 테이블 연결하기를 참조하세요.

예 1 ) 캡션을 사용하여 테이블 식별

캡션은 테이블 콘텐츠에 대한 짧은 제목이어야 합니다. 이 예에서 "콘서트"는 사용자에게 테이블에 어떤 정보가 있는지 알려줍니다(예: 테이블에 미술 전시회 정보도 포함될 수 있음).

<caption> 요소는 <table> 요소의 하위 요소로 직접 배치됩니다.

<table>
  <caption>Concerts</caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  […]
</table>

예 2 ) 더 복잡한 표에 대한 요약

아래 예에서는 사용자에게 요약을 제공하기 위해 다양한 기법이 사용됩니다.

접근 1. <caption> 요소 안에 요약 중첩하기

이 복잡한 표는 두 개의 별도 위치에서 다양한 유형과 크기의 숙박시설의 이용 가능 여부를 보여줍니다. <caption> 요소는 표의 제목 역할을 하며 표의 구성을 설명하는 요약도 함께 제공합니다.

이 방식으로 구현하면 시각적 사용자도 요약을 볼 수 있습니다.

<caption>Availability of holiday accommodation <br>
  <span>Column one has the location and size of accommodation, other columns show the type and number of properties available</span>
</caption>

참고
요약의 스타일을 캡션과 다르게 지정하기 위해 스팬 요소가 추가되었습니다. 이 요소는 필수는 아닙니다.

접근 2. aria-describedby를 사용하여 테이블 요약 제공

이 접근 방식에서는 id 속성이 있는 요소가 테이블의 aria-describedby 속성을 사용하여 요약과 연결됩니다. 고유한 id 속성이 있는 모든 요소는 이러한 방식으로 테이블의 요약으로 사용할 수 있습니다.

요약이 포함된 요소가 문서의 표 앞에 있을 필요는 없지만, 특히 스크린 리더를 사용하지 않는 경우 표 근처에 요약이 있으면 사용자가 요약을 더 빨리 발견하는 데 도움이 됩니다.

참고
이 WAI-ARIA 기능은 이 페이지의 다른 요약 방식에 비해 보조 기술에서 광범위하게 지원되지 않을 수 있습니다.

<p id="tblDesc">Column one has the location and size of accommodation, other columns show the type and number of properties available.</p>
<table aria-describedby="tblDesc">
[…]

접근 3. <figure> 요소를 사용하여 표 요약 마크업하기

이 접근 방식에서는 표를 <figure> 요소로 감싸는 방식입니다. <figcaption> 요소에는 캡션과 요약 텍스트가 포함됩니다.

"표 모드"로 탐색하는 스크린 리더 사용자는 일반적으로 이렇게 적용된 캡션으로는 표를 식별할 수 없습니다. <figcaption> 요소의 캡션 부분은 aria-labelledby 속성을 사용하여 표에 명시적으로 연결할 수 있으며, 요약 부분은 aria-describedby 속성을 사용하여 표에 명시적으로 연결할 수 있습니다. 이렇게 하면 캡션과 요약이 여러 번 읽힐 수 있습니다.

참고
이 HTML5 기능은 이 페이지의 요약에 대한 다른 접근 방식보다 보조 기술에서 널리 지원되지 않을 수 있습니다.

WAI-ARIA 미사용

<figure>
  <figcaption>
    <strong>Paris: Availability of holiday accommodation</strong><br>
    <span>Column one has the location and size of accommodation, other columns show the type and number of properties available.</span>
  </figcaption>
  <table>
[…]
  </table>
</figure>

WAI-ARIA 사용

<figure>
  <figcaption>
    <strong id="paris-caption">Paris: Availability of holiday accommodation</strong><br>
    <span id="paris-summary">Column one has the location and size of accommodation, other columns show the type and number of properties available.</span>
  </figcaption>
  <table aria-labelledby="paris-caption" aria-describedby="paris-summary">
[…]
  </table>
</figure>

테이블 사용 팁

단순하게 유지하세요.

복잡한 표는 콘텐츠 제작자에게는 더 많은 작업을 요구하고 사용자에게는 해석하기 어렵습니다. 일반적으로 복잡한 표는 하나의 하위 주제에 대한 데이터를 포함하는 간단한 개별 표로 나누는 것이 좋습니다.

테이블 분리

여러 표가 서로 이어지는 경우 하나의 표를 사용하지 말고 <th> 셀 행을 추가로 넣습니다. 스크린 리더는 한 열의 모든 <th> 셀을 소리내어 읽을 수 있으므로 혼동을 일으킬 수 있습니다. 주제가 변경되면 새 <th>를 시작하세요.

데이터 분리

각 개별 데이터에 해당 셀이 있는지 확인합니다. 헤더는 한 열에, 모든 데이터는 두 번째 열에 사용하면 스크린 리더가 열 간 데이터 관계를 파악하는 것이 거의 불가능해지므로 사용하지 마세요.

텍스트 크기를 조정할 때 의사 행의 데이터가 더 이상 올바르게 정렬되지 않을 수 있으므로 줄 바꿈(<br> 요소)을 사용하여 표 행을 만들지 마세요.

정렬

텍스트는 왼쪽에, 숫자 데이터는 오른쪽에 정렬하여(왼쪽에서 오른쪽으로 읽고 쓰는 언어) 텍스트 크기가 크거나 화면이 작은 사용자도 쉽게 찾을 수 있도록 합니다. 이 기능은 셀이 두 개 이상의 열에 걸쳐 있는 경우에 특히 유용합니다. 열 헤더의 정렬을 아래 셀의 데이터와 동일하게 지정하면 도움이 됩니다.

헤더 셀 스타일 지정하기

헤더 셀에는 <th> 요소가 사용되며, 다른 스타일이 적용된 <td> 요소를 사용하면 테이블에 접근하기 어렵거나 접근이 불가능할 경우 테이블에 대한 접근성이 떨어집니다. <th>와 <td> 셀을 시각적으로 구분하는 것도 도움이 됩니다. 예를 들어, 이 튜토리얼 페이지에서 헤더 셀은 짙은 회색 배경을 사용합니다.

셀에 색상 대비를 반영한 표

짝수 행과 홀수 행을 다른 방식으로 스타일링하면 읽기에 어려움이 있거나 텍스트를 확대하는 사용자에게 도움이 될 수 있습니다. 시각적 가이드 역할을 합니다. 마우스 오버 및 키보드 포커스 시 셀(및 행/열)을 강조 표시하여 사용자가 해당 셀의 위치를 쉽게 확인할 수 있도록 지원합니다. 헤더와 데이터 셀 모두에서 텍스트와 배경의 대비 비율이 적절한지 확인하세요. 대비 비율을 확인하는 방법은 다음과 같습니다.

유연성

표의 레이아웃 모델로 인해 작은 화면에서는 표가 작게 보이지 않거나 사용자가 확대하면 너무 넓어지는 경우가 있습니다. 이러한 상황에서는 표가 잘리지 않도록 하는 것이 중요합니다. (예: CSS에서 overflow: hidden 사용) 이 튜토리얼에서는 사용자가 표를 가로로 스크롤할 수 있도록 표를 감싸는 요소에 overflow: scroll을 적용했지만, 이러한 상황에서 표를 표시하는 데는 훨씬 더 많은 옵션이 있습니다.

레이아웃 목적의 표

표는 레이아웃 용도로 사용해서는 안 됩니다. 레이아웃에는 CSS(Cascading Style Sheet)를 사용하십시오. 이미 레이아웃 테이블이 있는 경우 이 튜토리얼에서 설명하는 구조 요소(예: <th> 또는 <caption>) 및 속성을 사용하지 말고 <table> 요소에 role="presentation"을 추가하세요.

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 5. 테이블

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.

[번역] 웹접근성 튜토리얼 - 4. 이미지

닥스터 — Thu, 6 Jul 2023 00:17:18 +0900

이미지에는 이미지가 나타내는 정보 또는 기능을 설명하는 대체 텍스트가 있어야 합니다.
이렇게 하면 다양한 장애를 가진 사람들이 이미지를 사용할 수 있습니다. 이 튜토리얼에서는 이미지의 목적에 따라 적절한 대체 텍스트를 제공하는 방법을 설명합니다.

정보 제공 이미지 :
개념과 정보를 그래픽으로 표현하는 이미지로, 일반적으로 그림, 사진 및 일러스트레이션이 해당됩니다. 대체 텍스트는 이미지가 제시하는 필수 정보를 전달하는 간단한 설명 정도여야 합니다.
장식 이미지 :
이미지의 유일한 목적이 페이지 이해에 중요한 정보를 전달하는 것이 아니라 페이지에 시각적 장식을 추가하는 것일 경우 빈 값의 대체 텍스트(alt="")를 제공합니다.
기능적 이미지 :
링크 또는 버튼으로 사용되는 이미지의 대체 텍스트는 시각적 이미지가 아닌 링크 또는 버튼의 기능을 설명해야 합니다. 이러한 이미지의 예로는 인쇄 기능을 나타내는 프린터 아이콘이나 양식 제출 버튼 등이 있습니다.
텍스트 이미지 :
이미지 내에 읽을 수 있는 텍스트가 표시되는 경우가 있습니다. 이미지가 로고가 아닌 경우 이미지에 텍스트를 넣지 마세요. 그러나 텍스트 이미지를 사용하는 경우에는 대체 텍스트에 이미지와 동일한 단어를 포함해야 합니다.
그래프 및 다이어그램과 같은 복잡한 이미지 :
데이터 또는 자세한 정보를 전달하려면 이미지에 제공된 데이터 또는 정보에 해당하는 완전한 텍스트를 텍스트 대체물로 제공하세요.
이미지 그룹 :
여러 이미지가 하나의 정보를 전달하는 경우 한 이미지의 대체 텍스트는 전체 그룹에 대한 정보를 전달해야 합니다.
이미지 맵 :
클릭 가능한 영역이 여러 개 포함된 이미지의 대체 텍스트는 링크 집합에 대한 전반적인 컨텍스트를 제공해야 합니다. 또한 개별적으로 클릭할 수 있는 각 영역에는 링크의 목적 또는 대상을 설명하는 대체 텍스트가 있어야 합니다.

특정 이미지가 어떤 카테고리에 속하는지 결정하는 방법에 대한 간략한 개요는 alt 값의 결정을 도와주는 표를 참조하세요. 대체 텍스트는 이미지의 용도, 문맥 및 콘텐츠에 따라 작성자가 결정해야 합니다. 예를 들어 이미지에 있는 새의 정확한 종류와 생김새는 공원에 관한 웹사이트에서는 관련성이 낮고 간략하게만 설명할 수 있지만 새에 관한 웹사이트에서는 적절할 수 있습니다.

이것이 왜 중요한가요?

이미지와 그래픽은 많은 사람들, 특히 인지 및 학습 장애가 있는 사람들이 콘텐츠를 더 즐겁고 쉽게 이해할 수 있게 해줍니다. 이미지와 그래픽은 저시력자를 비롯한 시각 장애인이 콘텐츠에서 방향을 잡는 데 사용하는 단서 역할을 합니다.

그러나 이미지는 웹사이트에서 광범위하게 사용되며 접근성이 떨어지면 큰 장벽이 될 수 있습니다. 접근 가능한 이미지는 다음과 같은 여러 상황에서 유용합니다.

스크린 리더를 사용하는 사람 : 대체 텍스트를 소리내어 읽거나 점자로 렌더링할 수 있습니다.
음성 입력 소프트웨어를 사용하는 사람 : 사용자는 한 번의 음성 명령으로 버튼이나 링크된 이미지에 초점을 맞출 수 있습니다.
음성 지원 웹사이트를 탐색하는 사용자 : 텍스트 대체를 소리내어 읽을 수 있습니다.
모바일 웹 사용자 : 특히 데이터 로밍 시 이미지를 끌 수 있습니다.
검색 엔진 최적화 : 검색 엔진에서 이미지를 색인화할 수 있습니다.

참고
웹사이트에서 이미지를 제거하면(소위 '텍스트 전용 버전') 이러한 사용자 및 상황에서 웹사이트에 대한 접근성과 기능이 저하됩니다.

정보 제공 이미지

유익한 이미지는 짧은 구절이나 문장으로 표현할 수 있는 간단한 개념이나 정보를 전달합니다. 대체 텍스트는 일반적으로 이미지에 대한 문자 그대로의 설명이 아닌 시각적으로 표시되는 의미나 내용을 전달해야 합니다.

경우에 따라 자세한 문자 그대로의 설명이 필요할 수 있지만, 이는 이미지의 내용이 전달되는 정보의 전부 또는 일부인 경우에만 해당됩니다. 이미지를 정보 제공용 또는 장식용으로 취급할지 여부는 작성자가 페이지에 이미지를 포함하는 이유에 따라 판단합니다.

예 1 ) 기타 정보에 레이블을 지정하는 데 사용되는 이미지

이 예에서는 두 개의 이미지 아이콘(전화기, 팩스)을 보여줍니다. 각 이미지 뒤에는 전화 번호가 있습니다. 시각적 표시와 일관되게 "전화:" 및 "팩스:"라는 대체 텍스트가 각 번호와 연결된 장치를 식별하는 데 사용됩니다.

<p>
  <img src="phone.png" alt="Telephone:"> 0123 456 7890
</p>
<p>
  <img src="fax.png" alt="Fax:"> 0123 456 7891
</p>

예 2 ) 기타 정보를 보완하는 데 사용되는 이미지

다음 이미지는 방울을 착용한 개를 보여줍니다. 이 이미지는 이 종의 용도를 설명하는 인접한 텍스트를 보완합니다. 시각적으로 표시되지만 텍스트에 설명되지 않은 정보는 짧은 텍스트로 대체하여 설명할 수 있으며, 이 경우 대체 텍스트는 "목줄에 방울이 달린 개"입니다.

<p>
  <img src="dog.jpg" alt="목줄에 방울이 달린 개">
  비번 안내견은 종종 벨을 착용합니다. 이 벨은 시각장애인 ...
</p>

참고
텍스트에 개가 방울을 착용하는 방법에 대한 설명이 포함된 경우 이미지는 중복된 것으로 간주되어 장식적인 것으로 간주될 수 있습니다. 텍스트에 언급되어 있지 않으므로 이미지는 정보를 제공하는 것으로 간주됩니다.

예 3 ) 간결한 정보를 전달하는 이미지

이 간단한 다이어그램은 병뚜껑이나 뚜껑을 풀 때 시계 반대 방향으로 돌리는 방법을 보여줍니다. 짧은 문장으로 정보를 설명할 수 있으므로 대체 텍스트인 "뚜껑을 아래로 누르고 시계 반대 방향(오른쪽에서 왼쪽으로)으로 돌립니다"를 alt 속성으로 지정할 수 있습니다.

<img src="cap.png" alt="뚜껑을 아래로 누르고 시계 반대 방향(오른쪽에서 왼쪽으로)으로 돌립니다." />

참고
1. 다른 기법은 이미지 대신 텍스트 대신 주요 콘텐츠 내에 지침을 제공하는 것입니다.
이 기법을 사용하면 모든 사람이 모든 정보를 텍스트로 사용할 수 있으며, 시각적으로 정보를 보는 것을 선호하는 사람에게는 일러스트
를 제공할 수 있습니다.

2. 다이어그램보다 더 많은 정보를 이미지로 전달하려는 경우 복잡한 이미지에 설명된 접근 방식 중 하나를 따르는 것이 더 나을 수 있습
니다. 예를 들어 이 다이어그램이 병에 표시되어 있다는 사실이나 병의 모양과 크기가 관련 정보인 경우 더 자세한 대체 텍스트를 사용
합니다.

예 4 ) 인상이나 감정을 전달하는 이미지

이 사진은 행복한 가족 그룹을 보여줍니다. 스톡 이미지이므로 개인을 식별해서는 안 됩니다. 이 이미지는 웹사이트 또는 웹사이트가 대표하는 회사가 가족 친화적이라는 인상을 주기 위해 사용되고 있습니다. 의도한 인상을 가장 잘 설명하는 텍스트는 "우리는 가족 친화적입니다"입니다.

<img src="family.jpg" alt="우리는 가족 친화적입니다." />

참고
이 이미지의 목적이 인상을 전달하기보다는 단순히 페이지의 모양을 개선하는 것이라면 '장식용 이미지'에 표시된 것처럼 장식용으로 간주할 수 있습니다. “분위기에 사용되는 이미지"에서와 같이 장식적인 이미지로 간주할 수 있습니다. 이미지 사용 목적은 작성자가 결정합니다.

예 5 ) 파일 형식을 전달하는 이미지

이 예에서는 텍스트 링크 내의 형식 아이콘으로 식별되는 세 가지 형식으로 문서를 다운로드할 수 있습니다. 각 링크의 파일 형식을 구분하기 위해 'HTML', 'Word 문서', 'PDF'라는 텍스트 대체 아이콘이 있습니다.

<p>
  <a href="…">
    2012 Annual report and accounts
    <img src="html5logo.png" alt="HTML" > (43KB)
  </a>, also available in
  <a href="…">
    <img src="worddocument.png" alt="Word document"> (254KB)
  </a>
  or
  <a href="…">
    <img src="pdfdocument.png" alt="PDF"> (353KB)
  </a>
  format.
</p>

참고
1. 형식 식별이 링크 텍스트의 일부로 작성된 경우 이미지는 장식용으로 간주되어 비어 있는 alt 속성(alt="")을 가질 수 있습니다. 클릭
가능한 영역에 포함하기 위해 텍스트와 동일한 링크 요소(<a>)에 남아있을 수 있습니다. 자세한 내용은 "기능성 이미지: 링크 텍스트
내의 로고 이미지"를 참조하세요.

2. 이 특정 예는 이미지가 링크 텍스트에 제공되지 않는 정보를 전달한다는 점에서 링크 텍스트 내의 기능성 이미지 아이콘과 유사합니다.

장식 이미지

장식 이미지는 페이지 콘텐츠에 정보를 추가하지 않습니다. 예를 들어 이미지가 제공하는 정보는 이미 인접한 텍스트를 사용하여 제공되거나 웹사이트를 시각적으로 더 매력적으로 만들기 위해 이미지가 포함될 수 있습니다.

이러한 경우에는 스크린 리더와 같은 보조 기술에서 무시할 수 있도록 비어 있는 대체 텍스트(alt="")를 제공해야 합니다. 이러한 유형의 이미지에 대한 텍스트 값은 스크린 리더 출력에 청각적 혼란을 가중시키거나 주제가 인접한 텍스트의 주제와 다른 경우 사용자의 주의를 분산시킬 수 있습니다. alt 속성을 제공하지 않으면 일부 스크린 리더에서는 이미지의 파일 이름을 대신 알려주므로 이 속성을 생략하는 것도 옵션이 아닙니다.

이미지를 장식용으로 처리할지 정보용으로 처리할지는 페이지에 이미지를 포함하는 이유에 따라 작성자만이 판단할 수 있습니다. 이미지는 장식용일 수 있습니다.

테두리, 스페이서 및 모서리와 같은 시각적 스타일링
텍스트의 모양을 개선하거나 클릭 가능한 영역을 늘리기 위해 링크 텍스트를 보조하는 경우
인접한 텍스트를 설명하지만 정보를 제공하지는 않는 경우('눈요기')
주변 텍스트에 의해 식별 및 설명됨

아래 예시에서는 <img> 요소를 사용하여 장식 이미지를 제공할 때 alt 속성을 사용하는 방법을 보여줍니다. 가능한 경우 장식 이미지는 CSS 배경 이미지를 사용하여 제공해야 합니다.

예 1 ) 페이지 디자인의 일부로 사용되는 이미지

이 이미지는 페이지 디자인에서 테두리로 사용되며 순전히 장식적인 목적으로 사용됩니다.

<img src="topinfo_bg.png" alt="" />

또한 스크린 리더를 사용하면 role=”presentation”을 사용하여 요소를 숨길 수 있습니다. 그러나 현재 이 기능은 비어있는 alt 속성을 사용하는 것만큼 널리 지원되지는 않습니다.

<img src="topinfo_bg.png" role="presentation" />

참고
스토리에서 장면이 바뀌거나 다른 주제로 전환하는 등 주제별 구분을 나타내기 위해 이미지를 사용하는 경우에는 <hr> 요소를 사용하여 보조 기술을 알리는 것이 적절할 수 있습니다.

예 2 ) 텍스트 링크의 일부로 장식 이미지 사용

이 크로커스 전구 그림은 링크를 더 쉽게 식별하고 클릭 가능한 영역을 늘리기 위해 사용되었지만 인접한 링크 텍스트(동일한 앵커의)에 이미 제공된 정보에 추가되지는 않습니다. 이 경우 이미지에 비어 있는 대체 값을 사용합니다.

<a href="crocuspage.html">
  <img src="crocus.jpg" alt="" />
  <strong> Crocus bulbs</strong>
</a>

예 3 ) 인접한 텍스트 대체 이미지

이 잠자는 개 그림은 이미 인접한 텍스트로 충분히 설명되어 있습니다. 이 정보를 반복할 필요가 없으며 이 이미지에는 비어 있는 대체 값을 사용할 수 있습니다.

<p>
  <img src="sleepingdog.jpg" alt="" />
  <strong>잠자는 개:</strong> ...
</p>

예 4 ) 분위기(눈요깃거리)에 사용되는 이미지

이 이미지는 페이지에 분위기나 시각적 흥미를 더하는 데만 사용됩니다.

<img src="tropical.jpg" alt="" />

참고
이 이미지의 목적이 단순히 페이지의 모양을 개선하기 위한 것이 아니라 식물을 식별하거나 다른 정보를 전달하기 위한 것이라면 정보 제공용으로 취급해야 합니다. 이미지의 사용 목적은 작성자가 결정합니다.

기능적 이미지

기능 이미지는 정보를 전달하기보다는 행동을 유도하는 데 사용됩니다.
버튼, 링크 및 기타 인터랙티브 요소에 사용됩니다. 이미지의 대체 텍스트는 이미지에 대한 설명이 아니라 시작될 작업(이미지의 목적)을 전달해야 합니다.

예를 들어 아래 예시와 같이 대체 텍스트는 '(프린터 이미지)'가 아닌 '이 페이지 인쇄', '돋보기'가 아닌 '검색', '예시닷컴 로고'가 아닌 '예시닷컴 홈페이지'가 되어야 합니다.

기능 이미지는 콘텐츠의 기능에 필수적이므로 대체 값이 누락되거나 비어 있으면 스크린 리더 사용자에게 심각한 문제가 발생합니다. 스크린 리더는 일반적으로 이미지 파일 이름, 이미지 URL 또는 링크 대상의 URL을 알려주므로 사용자가 이미지로 인해 시작될 작업을 이해하는 데 도움이 되지 않습니다.

예 1 ) 링크된 로고로 단독으로 사용된 이미지

다음 이미지는 W3C 홈 페이지로 연결되는 링크의 유일한 콘텐츠입니다. 이 이미지에는 링크가 사용자를 어디로 연결할지 나타내는 "W3C 홈"이라는 대체 텍스트가 있습니다. 다음 예제인 '링크 텍스트 내의 로고 이미지' 예제에서는 링크에 목적지를 식별하는 텍스트가 더 있는 경우 어떻게 해야 하는지에 대해 설명합니다.

<a href="https://www.w3.org/">
  <img src="w3c.png" alt="W3C 홈" />
</a>

참고
1. 이 상황에서도 로고는 'W3C'라는 텍스트 이미지이지만, 이 경우 로고의 주요 기능은 홈페이지 링크이므로 텍스트 대체에 '홈'이라는 단어를 추가했습니다.
2. 로고로 사용되는 이미지는 다른 텍스트 이미지에 적용되는 일부 접근성 요구 사항(예: 최소 색상 대비 및 텍스트 크기 요구 사항 없음)이 면제됩니다.

예시 2 ) 링크 텍스트 내 로고 이미지

이 예에서는 W3C 로고가 W3C 홈 페이지로 연결되는 링크 내의 텍스트를 보완하는 데 사용됩니다. 이미지는 링크 텍스트에 이미 제공된 것과 다른 기능을 나타내거나 다른 정보를 전달하지 않으므로 중복 및 반복을 방지하기 위해 널(공백) 값(alt="")이 적용됩니다. 사실상 이미지는 링크 텍스트에 대한 장식적인 보조 또는 시각적 단서 역할을 합니다.

<a href="https://www.w3.org/">
  <img src="w3c.png" alt="" /> W3C Home
</a>

예 3 ) 링크 텍스트 내에 정보를 전달하는 아이콘 이미지

이 예에서는 이미지가 링크 내의 텍스트를 따라가면서 링크가 새 창에서 열릴 것임을 사용자에게 알립니다. 아이콘의 의미를 전달하기 위해 '새 창'이라는 대체 텍스트가 있습니다.

<a href="https://www.w3.org/" target="_blank">
  W3C Homepage <img src="new-window.png" alt="새 창" />
</a>

참고
이 기법은 아이콘과 함께 AVI, ODF, MP3, PDF, Word 등과 같은 다양한 파일 형식을 나타내는 데 자주 사용됩니다. 이 경우 대체 텍스트는 각 아이콘이 나타내는 형식을 동일하게 전달해야 합니다(유익한 이미지를 참조하세요).

예 4 ) 기능이 있는 독립형 아이콘 이미지

다음 이미지는 인쇄 기능을 나타내는 프린터를 나타내는 아이콘입니다. 이 아이콘의 목적은 인쇄 대화 상자를 선택했을 때 활성화하는 것이므로 "이 페이지 인쇄"라는 텍스트 대안이 있습니다.

<a href="javascript:print()">
  <img src="print.png" alt="이 페이지 인쇄" />
</a>

예 5 ) 버튼에 사용된 이미지

다음 이미지는 버튼에 독특한 스타일을 부여하는 데 사용됩니다. 이 경우 검색 요청을 시작하는 버튼이며 돋보기를 나타내는 아이콘입니다. 이미지의 대체 텍스트는 버튼의 목적을 전달하기 위해 "검색"입니다.

<input type="image" src="searchbutton.png" alt="검색" />

텍스트 이미지

텍스트 이미지는 읽히도록 의도된 텍스트를 표시합니다. 대부분의 웹 브라우저에서 현재 CSS 기능을 사용할 수 있으므로 이미지 기반 텍스트 표시보다는 CSS로 스타일이 지정된 실제 텍스트를 사용하는 것이 좋은 디자인 관행입니다. 실제 텍스트는 이미지보다 훨씬 유연합니다: 선명도를 잃지 않고 크기를 조정할 수 있으며 배경 및 텍스트 색상을 사용자의 읽기 선호도에 맞게 수정할 수 있습니다. 이미지는 크기를 조정할 때 왜곡되거나 픽셀화될 가능성이 더 높습니다. 드물지만 텍스트 이미지를 사용해야 하는 경우에는 대체 텍스트에 이미지에 표시된 텍스트와 동일한 텍스트가 포함되어야 합니다.

예 1 ) 장식 효과가 있는 스타일 텍스트

다음 이미지는 장식 효과가 있는 슬로건 텍스트를 전달하는 데 사용됩니다.

이미지 사용

이전에는 여러 브라우저에서 일관되게 렌더링되는 CSS 스타일링을 사용하여 이러한 텍스트를 만들 수 없었기 때문에 텍스트 이미지를 사용했습니다. 이 이미지의 대체 텍스트는 "도시에 대한 귀하의 접근성"로 이미지에 표시된 슬로건과 동일합니다. 장식 효과(양식화된 텍스트 및 그림자)는 관련성이 없으므로 설명하지 않았습니다.

<img src="access-city.png" alt="도시에 대한 귀하의 접근성." />

CSS3 사용

위 이미지의 시각적 효과는 CSS3와 임베디드 글꼴을 사용하여 만들 수 있습니다. 구형 브라우저를 지원해야 하는 작성자와 개발자는 스타일이 덜한 대체 텍스트를 사용할 수 없는 경우 이 이미지 예제가 유용할 수 있습니다.

브라우저 지원

이러한 효과를 표시하려면 다음 웹 기술을 지원하는 브라우저가 필요합니다.

CSS Transforms
CSS Fonts

<div class="tagline"><span>도시에 대한 귀하의 접근성</span></div>

@font-face {
  font-family: 'Harabara Hand';
  src: url('harabarahand.ttf') format('truetype');
}

.background {
  background-color: #FFF;
  padding: 2em;
}
.tagline {
  font-family: 'Harabara Hand', cursive;
  text-transform: lowercase;
  color: #226C8E;
  font-size: 1.5em;
  letter-spacing: -1px;
  padding-left: 1em;
  background-color: #DDD9D6;
  box-shadow: 0 2px  4px rgba(0,0,0,.5);
}
.tagline span {
  display: inline-block;
  transform: rotate(-10deg);
}

참고
코드 스니펫에는 공급업체 접두사가 표시되지 않습니다. CSS3 기능의 실험적 구현을 사용하여 이전 버전의 웹 브라우저와의 호환성을 높이기 위해 이러한 접두사를 추가할 수 있습니다.

예 2 ) 링크되지 않은 로고로 사용된 텍스트 이미지

다음 이미지는 웹 접근성 이니셔티브의 로고입니다. 이 이미지는 링크의 일부가 아니므로 대체 텍스트는 "웹 접근성 이니셔티브"입니다. 로고라는 점을 언급할 필요가 없습니다.

<img src="wai.png" alt="Web Accessibility initiative" />

참고
1. 로고로 사용되는 이미지는 다른 텍스트 이미지에 적용되는 일부 접근성 요구 사항에서 면제됩니다. 예를 들어 최소 색상 대비 및 텍스트 크기 요구 사항이 없습니다.
2. 이 로고가 링크되면 기능적 이미지가 됩니다. 기능성 이미지를 참조하세요: 링크된 로고로 단독으로 사용되는 이미지를 참조하세요.

예 3 ) 수학 표현식

지금까지 수학식은 방정식과 특수 수학 기호를 HTML로 표현하기 어렵기 때문에 이미지로 표현되는 경우가 많았습니다. 그러나 MathML은 웹에서 접근 가능한 수학을 표현하는 데 선호되는 방식으로 부상하고 있습니다.

이미지 사용

아래 이미지는 반복되는 십진수(끝이 없는 십진수)를 표시합니다. 이 반복 숫자의 대체 텍스트는 '0.3333 반복'입니다. (이미지에서 반복은 소수점 넷째 자리의 '3' 위에 선으로 표시되어 있습니다.)"입니다.

이 특정 예에서는 재귀가 표시되는 방식이 중요하므로 텍스트 대안에도 설명되어 있습니다. 다른 이미지와 마찬가지로 작성자는 이미지가 전달하고자 하는 정보를 결정하고 그에 따라 텍스트 대안을 구성할 수 있는 가장 좋은 위치에 있습니다.

<img
  src="0dot3333recurring.png"
  alt="0.3333 반복. (반복은 소수점 넷째 자리의 '3' 위에 선으로 표시됩니다.)" />

MathML 사용

수학 표현식 이미지는 페이지 또는 웹사이트의 일반 콘텐츠에 예외적으로 적용되는 경우 등 예외적인 상황에서만 사용해야 합니다. 수학 표현식을 표시하는 데 가장 선호되는 방법은 수학 표현식을 의미적으로 표시할 수 있는 MathML입니다.

수학식이 콘텐츠의 상당 부분을 차지하는 경우(예: 온라인 수학 강좌)에는 MathML을 대신 사용해야 합니다. MathML은 프레젠테이션과 콘텐츠를 의미적으로 모두 표현하므로 더 많은 사용자가 더 쉽게 접근할 수 있습니다.

반복수의 간단한 예는 수학적 표현으로 내용과 표현을 간결하고 명확하게 설명하는 것이 얼마나 어려운지를 보여줍니다. 특히, 일부 수업 환경에서는 중요하지만 재귀를 나타내는 오버라인의 위치와 위치를 설명하는 것이 번거롭습니다. 더 복잡한 표현식이나 방정식의 경우 이미지 대신 텍스트를 사용하면 충분한 세부 정보를 간결하게 제공하지 못할 수 있습니다. MathML은 텍스트가 아닌 코드 내에서 이러한 의미를 제공하는 데 도움이 됩니다.

<math>
  <mstack stackalign="right">
    <msline length="1"/>
    <mn> 0.3333 </mn>
  </mstack>
</math>

접근성 지원: MathML, 웹 브라우저 및 보조 기술

대부분의 웹 브라우저는 MathML을 올바르게 렌더링하기 위해 플러그인이 필요하며, 특히 이 예제에서 사용된 새로운 MathML 3.0 기능의 경우 더욱 그렇습니다. 아래 MathML 예제를 보려면 이 Firefox 플러그인이 필요할 수 있습니다.

MathJax와 같이 웹 브라우저용 MathML을 폴리필하는 일부 라이브러리는 접근성 기능을 지원합니다.

MathML에 대한 접근성 지원은 다양하지만 웹 브라우저와 보조 기술이 발전함에 따라 계속 개선되고 있습니다. 어떤 기술을 사용할지 결정하기 전에 MathML 지원을 평가하는 것이 중요합니다.

웹킷 기반 및 Mozilla 기반 브라우저의 MathML 상태에 대한 자세한 정보를 확인하세요.

참고
위의 코드에는 보조 기술에 콘텐츠와 프레젠테이션을 모두 전달하는 의미론적 정보가 포함되어 있습니다.

복잡한 이미지

복잡한 이미지에는 짧은 구절이나 문장으로 전달할 수 있는 것보다 더 많은 정보가 포함되어 있습니다. 일반적으로 다음과 같은 이미지가 이에 해당합니다.

순서도 및 조직도를 포함한 그래프 및 차트
페이지 텍스트가 사용자가 이미지를 이해할 수 있는지에 따라 달라지는 다이어그램 및 일러스트레이션
날씨 시스템과 같은 위치 또는 기타 정보를 보여주는 지도

이러한 경우 두 부분으로 구성된 텍스트 대체물이 필요합니다. 첫 번째 부분은 이미지를 식별하기 위한 짧은 설명이며, 적절한 경우 긴 설명의 위치를 표시합니다. 두 번째 부분은 이미지가 전달하는 필수 정보를 텍스트로 표현하는 긴 설명입니다. 다음 예는 이러한 짧은 설명과 긴 설명을 제공하는 데 사용할 수 있는 다양한 접근 방식을 보여줍니다.

긴 설명

이미지의 구성이 중요하여 긴 설명을 제공해야 하는 상황이 있습니다. 예를 들어, 막대형 차트에서 사용된 색상의 순서와 열의 상대적 높이는 차트가 나타내는 실제 값과 추세 외에도 차트의 구조에 대한 관련 정보일 수 있습니다.

복잡한 이미지는 많은 사람들, 특히 저시력자, 학습 장애가 있는 사람, 주제에 대한 경험이 부족한 사람에게는 이해하기 어려울 수 있습니다. 콘텐츠를 더 많은 사람에게 전달하려면 모든 사람이 이해할 수 있는 긴 설명을 제공하세요. 예를 들어 설명을 주요 콘텐츠의 일부로 표시합니다. 또한 이미지의 불필요한 복잡성을 줄이고 모든 사람이 이해하기 쉽게 만들 수도 있습니다.

더 복잡한 이미지는 함께 제공되는 텍스트에서 참조하고 요약하는 것도 좋은 방법입니다. 예를 들어 "다음 그래프는 1분기에는 방문자 수가 감소했지만 2분기에는 회복되었음을 보여줍니다."와 같은 참조 문구는 이미지가 전달하고자 하는 관련 정보를 파악하는 데 도움이 됩니다.

예시 1 ) 구조화된 정보를 포함하는 설명

이 예에서 웹사이트 방문자 통계의 막대형 차트에는 이미지의 alt 속성을 통해 제공되는 "사이트 1~3에 대한 2014년 1분기 월별 및 총 방문자를 보여주는 막대형 차트"라는 짧은 설명이 있습니다. 긴 설명은 시각적으로 표시되는 척도, 값, 관계 및 추세를 포함한 자세한 정보를 제공합니다. 예를 들어, 긴 설명은 막대형 차트에 인코딩된 사이트 1의 감소하는 값, 사이트 2의 일관된 값, 사이트 3의 증가하는 값을 지적할 수 있습니다. 다음 예에서 사용된 긴 설명 접근 방식은 이 섹션의 뒷부분에 설명되어 있습니다.

참고
이 이미지와 관련된 긴 설명 예시를 참조하세요.

아래 방법 중 첫 번째와 네 번째 방법은 웹 브라우저 및 검색 엔진과 같은 다른 프로그램에서 정보를 사용할 수 있도록 합니다.

접근 방식 1 ) 이미지 옆에 긴 설명에 대한 텍스트 링크 제공

이 접근 방식은 이미지 옆에 긴 설명이 포함된 별도의 웹 페이지 또는 동일한 웹 페이지의 섹션을 가리키는 텍스트 링크를 제공합니다. 링크 텍스트는 목적지를 명확히 하고 이미지와 연결되어야 합니다.

<p>
  <img
    src="chart.png"
    alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트" />
  <br>
  <a href="2014-first-qtr.html">Example.com 사이트 방문자 2014년 1월부터 3월까지의 막대형 차트 텍스트 설명</a>
</p>

이 접근 방식은 모든 웹 브라우저와 보조 기술에서 지원되며 모든 사람이 긴 설명을 사용할 수 있습니다. 그러나 링크는 의미론적으로 이미지와 연결되지 않습니다.

HTML5 <figure> 및 <figcaption> 요소를 사용하여 이미지와 링크를 의미적으로 그룹화할 수 있습니다. 그림에 role="group"을 추가하면 <figure> 요소의 기본 시맨틱을 지원하지 않는 웹 브라우저와의 하위 호환성을 유지할 수 있습니다.

<figure role="group">
    <img
        src="chart.png"
        alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트">
    <figcaption>
        <a href="2014-first-qtr.html">Example.com 사이트 방문자 2014년 1월부터 3월까지의 막대형 차트 텍스트 설명</a>
    </figcaption>
</figure>

접근 방식 2 ) alt 속성에 긴 설명의 위치 설명하기

이미지와 동일한 웹 페이지에 긴 설명이 제공되는 경우 이미지의 alt 속성을 사용하여 해당 위치를 설명할 수 있습니다. 위치 정보는 사용자가 콘텐츠를 찾는 데 도움이 되도록 명확하고 정확해야 합니다.

<p>
  <img
    src="chart.png"
    alt="사이트 1~3에 대한 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대형 차트입니다. 사이트 방문자 전체 텍스트 제목 아래에 설명되어 있습니다.">
</p>
[…]
<h4>사이트 방문자 전체 텍스트</h4>
[…]

접근 방식 3 ) 이미지와 인접한 긴 설명(HTML5)을 구조적으로 연결하기

HTML5 <figure> 요소를 사용하여 이미지와 긴 설명을 모두 묶을 수 있습니다. 긴 설명(제목, 텍스트 및 표로 표시됨)은 <figcaption> 요소로 둘러싸입니다. 이 설명은 <figure> 요소의 의미를 전달하지 않는 웹 브라우저에서 포함된 <figure> 요소에 role="group"을 사용하여 이미지와 명시적으로 연결됩니다.

<figure role="group">
  <img src="chart.png"
    alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대형 차트는 아래에 자세히 설명되어 있습니다.">
  <figcaption>
    <h2>개요</h2>
    <p>이 차트는 2014년 1분기 웹사이트 조회수를 보여줍니다...</p>
    <h2>값</h2>
    <table>
      <caption>2014년 1월부터 3월까지 Example.com 사이트 방문자 수</caption>
      <tr>…</tr>
    </table>
  </figcaption>
</figure>

접근 방식 4 ) longdesc를 통해 긴 설명에 대한 링크 제공

longdesc 속성에는 이미지에 대한 긴 설명을 제공하는 별도의 웹 페이지의 URI 또는 긴 설명을 제공하는 동일한 페이지의 요소를 참조하는 조각 식별자가 포함될 수 있습니다.

longdesc 속성에 긴 설명이 있는 다른 웹 페이지를 참조하는 URI가 포함된 경우 접근 방식 1(이미지 옆에 긴 설명에 대한 텍스트 링크)도 적용하는 것이 좋습니다. 이 방법은 longdesc 속성을 완전히 지원하지 않는 웹 브라우저 및 보조 기술을 위한 해결 방법입니다.

<img
  src="chart.png"
  alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트"
  longdesc="2014-first-qtr.html">
<a href="2014-first-qtr.html">긴 설명</a>

접근성 지원 : 긴 설명, 웹 브라우저 및 보조 기술

Firefox에서는 이미지의 컨텍스트 메뉴에 있는 '설명 보기'를 통해 긴 설명으로 연결된 긴 설명을 사용할 수 있습니다. 비슷한 방식으로 긴 설명 액세스 기능을 추가하는 공식 Chrome 확장 프로그램도 있습니다. Safari는 longdesc를 지원하지 않습니다. 다른 웹 브라우저에서는 현재 스크린 리더 사용자만 longdesc를 사용할 수 있습니다. 모바일 플랫폼은 현재 longdesc를 지원하지 않습니다.

위에서 언급한 이미지 컨텍스트 메뉴 외에 longdesc 속성의 존재를 시각적으로 표시하는 브라우저는 없습니다.

longdesc 속성에 # 뒤에 같은 웹 페이지에 있는 요소의 ID("해시 링크")가 포함된 경우, 이는 긴 설명을 제공하는 같은 웹 페이지의 요소를 나타냅니다. 웹 브라우저 및 보조 기술의 지원 여부는 다를 수 있지만 예시 2, 접근 방식 1과 유사한 사용 사례를 다룹니다. 긴 설명이 이미지와 가까운 곳에 있는 경우 (접근 방식 2를 적용하여) 추가 링크가 필요하지 않습니다.

<img
  src="chart.png"
  alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트"
  longdesc="#chart-longdesc">
[…]
<div id="chart-longdesc">
  […]
</div>

예 2: 텍스트 정보가 포함된 설명

WAI-ARIA aria-describedby 속성을 사용하면 longdesc 접근 방식과 유사한 방식으로 동일한 웹 페이지의 어느 곳에서나 제공되는 이미지의 설명에 연결할 수 있습니다. 속성 값은 긴 설명을 제공하는 요소의 ID입니다.

중요: aria-describedby가 참조하는 요소는 하나의 연속된 텍스트 단락으로 취급됩니다. 스크린 리더 및 기타 보조 기술은 제목 및 표와 같은 구조적 정보에 액세스할 수 없습니다. 따라서 구조적 관계를 표시하지 않고 해당 탐색 메커니즘 없이 포함된 요소의 텍스트를 읽거나 제공합니다. 따라서 이 접근 방식은 이전 예제에서와 같이 구조적 정보가 필요하지 않고 텍스트로만 구성된 긴 설명에 대해서만 작동합니다.

이 예에서는 웹 페이지에 있는 텍스트 단락을 사용하여 공작의 머리를 설명합니다.

<img src="peacock.jpg"
     alt="수컷 공작새 머리"
     aria-describedby="description" />
[…]
<p id="description">
 수컷은 왕관의 금속성 파란색이며 머리의 깃털은 짧고 말려 있습니다. 머리의 부채꼴 볏은 깃털로 만들어져 있으며 검은색 축이 드러나 있고 연두색 물갈퀴로 끝이 있습니다. 눈 위에는 흰색 줄무늬가 있고 눈 아래에는 초승달 모양의 흰색 패치가 흰색 피부로 형성되어 있습니다. 머리 옆면에는 무지개 빛깔의 녹청색 깃털이 있습니다. 등에는 검은색과 구리색 무늬가 있는 비늘 모양의 청록색 깃털이 있습니다.
</p>

이미지 그룹

때로는 이미지 그룹을 함께 사용하여 하나의 정보를 나타내기도 합니다. 예를 들어 별표 아이콘 모음은 함께 등급을 나타냅니다. 이 경우 이미지 중 하나만 전체 컬렉션을 설명하는 대체 텍스트가 필요하고 다른 이미지는 보조 기술에서 무시되도록 비어 있는 alt 속성을 갖습니다.

다른 경우에는 이미지 그룹이 관련 이미지의 컬렉션을 나타낼 수 있습니다. 예를 들어, 주제별로 관련된 예술 작품 모음을 표시할 수 있습니다. 이 경우 각 이미지에는 그룹 내 관계뿐만 아니라 개별 이미지를 설명하는 대체 텍스트가 필요합니다.

예 1 ) 하나의 정보를 전달하는 여러 이미지

다섯 개의 이미지가 결합된 이 그룹은 제품 등급을 보여줍니다. 전체 평점을 나타내는 이미지 5개(채워진 별 3개, 반쯤 채워진 별 1개, 비어 있는 별 1개)가 있습니다. 첫 번째 이미지의 대체 텍스트는 "평점: 별 5개 중 3.5점"입니다. 다른 모든 이미지에는 null(비어 있는) alt 속성(alt="")이 있습니다.

Rating:
<img src="star-full.jpg"  alt="3.5 out of 5 stars">
<img src="star-full.jpg"  alt="">
<img src="star-full.jpg"  alt="">
<img src="star-half.jpg"  alt="">
<img src="star-empty.jpg" alt="">

예 2 ) 이미지 컬렉션

아래 예시에서는 HTML5 <figure> 및 <figcaption> 요소를 사용하여 컬렉션의 각 이미지에 캡션을 제공합니다. <figure> 요소는 중첩될 수 있으며, 이 예에서는 전체 이미지 컬렉션에 대한 캡션을 제공하는 데 사용됩니다. 그룹 값이 있는 WAI-ARIA 속성 role은 보조 기술에 이 그룹을 나타내는 데 사용되며, aria-labelledby는 figcaption 요소가 개별 그룹에 대한 레이블로 사용되도록 합니다.

참고: 웹 브라우저 및 보조 기술 지원은 이 특정 WAI-ARIA 속성 및 값에 따라 다릅니다.

<figure role="group" aria-labelledby="fig1">
  <figcaption id="fig1">
    The castle through the ages: 1423, 1756, and 1936 respectively.
  </figcaption>


  <figure role="group" aria-labelledby="fig11">
    <img src="castle-etching.jpg"
      alt="The castle has one tower, and a tall wall around it.">
    <figcaption id="fig11">Charcoal on  wood. Anonymous, circa 1423.</figcaption>
  </figure>

  <figure role="group" aria-labelledby="fig12">
    <img src="castle-painting.jpg"
      alt="The castle now has two towers and two walls.">
    <figcaption id="fig12">Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
  </figure>

  <figure role="group" aria-labelledby="fig13">
    <img src="castle-fluro.jpg"
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
    <figcaption id="fig13">Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
  </figure>
</figure>

이미지 맵

클라이언트 측 이미지 맵은 사용자 상호 작용을 허용하는 <area> 요소('핫스팟')로 정의된 선택 가능한 영역으로 나뉘어진 이미지입니다. 일반적으로 선택 가능한 영역은 다른 페이지로 연결되는 링크입니다. 이미지 맵의 경우 <img> 요소 자체(정보 컨텍스트를 전달하기 위해)와 각 <area> 요소(링크 대상 또는 링크를 따라갈 경우 시작될 작업을 전달하기 위해) 모두에 텍스트 대체 텍스트가 필요합니다.

예 1 ) 개별 페이지로 연결되는 링크가 있는 조직도

다음 조직도는 각 이사의 홈페이지로 연결되는 링크를 제공하는 데 사용됩니다.
이미지의 대체 텍스트는 "이사회 및 관련 직원 :"입니다. 링크된 각 <area>에는 개인을 식별할 수 있는 "Davy Jones: 회장"와 같은 대체 텍스트가 있습니다. 개인에 대한 대체 텍스트에는 그래프에 관계도 명시되어 있습니다.

<img src="orgchart.png"
     alt="Board of directors and related staff: "
     usemap="#Map">

<map name="Map" id="Map">
  <area
    shape="rect"
    coords="176,14,323,58"
    href="…"
    alt="Davy Jones: Chairman"
  >

  <area
    shape="rect"
    coords="81,75,226,114"
    href="…"
    alt="Carole Brewster: Company Secretary"
  >
  <area
    shape="rect"
    coords="6,138,155,182"
    href="…"
    alt="Harry H Brown: Marketing Director (reports to chairman)"
  >
  <area
    shape="rect"
    coords="175,138,323,182"
    href="…"
    alt="Paula Holbein: Sales Director (reports to chairman)"
  >
  <area
    shape="rect"
    coords="345,136,496,186"
    href="…"
    alt="Hugh Howard: Finance Director (reports to chairman)"
  >
</map>

이미지 맵에 대한 브라우저 구현은 작성 시점에 따라 다르므로 이 HTML 버그를 참조하세요. 다양한 구현을 수용하려면 다음 사항에 유의하세요.

모든 이미지 맵은 한 번만 사용하세요. 즉, 동일한 맵이 포함된 여러 이미지를 사용하려면 맵을 복제하고 다른 ID를 사용해야 합니다.
<map> 요소를 이미지의 직접적인 형제 요소로 배치합니다.

참고
영역의 좌표가 이미지와 동일한 비율로 배율이 조정되지 않은 경우 일부 모바일 장치에서는 이미지 맵이 제대로 작동하지 않을 수 있습니다. 이를 보완하려면 동일한 페이지에 중복 텍스트 링크를 제공하세요.

alt 결정 트리

이 의사 결정 트리에서는 다양한 상황에서 <img> 요소의 alt 속성을 사용하는 방법을 설명합니다. 일부 유형의 이미지의 경우 텍스트 이미지 대신 장식용 이미지나 웹 글꼴에 CSS 배경 이미지를 사용하는 등의 대체 접근 방식이 있습니다.

이미지 사용 팁

적절한 텍스트 대체물 선택하기 웹 페이지를 이해해야 하는 상대방에게 전화로 웹 페이지를 소리 내어 읽어준다고 상상해 보세요. 이렇게 하면 이미지에 어떤 정보나 기능이 있는지 결정하는 데 도움이 됩니다. 정보가 없고 링크나 버튼이 아닌 것처럼 보이는 이미지는 장식용으로 처리하는 것이 안전합니다.
텍스트 대체 정보에 우선순위를 둡니다 가장 중요한 정보를 맨 앞에 배치하는 것을 목표로 합니다.
대체 텍스트의 길이 대체 텍스트는 이미지의 용도를 최대한 간결하게 설명해야 합니다. 짧은 구절이나 문장 이상의 설명이 필요한 경우 복잡한 이미지에서 설명한 긴 설명 방법 중 하나를 사용하는 것이 좋습니다.
반응형 디자인 텍스트 레이블이 있는 아이콘은 작은 화면에서 볼 때 텍스트 레이블이 잘 보이지 않는 경우가 많습니다. 아이콘이 해당 크기에서 읽을 수 있고, 텍스트 없이도 이해할 수 있으며, 텍스트 설명이 있는지 확인하세요.
alt 속성 내 구두점
- 모든 텍스트의 경우 대체 텍스트에 구두점을 사용하면 정보를 더 쉽게 이해할 수 있습니다. 특히 이미지와 인접한 텍스트 사이에 공백 문자가 없는 경우 대체 텍스트에 공백 문자를 추가하여 스크린 리더가 읽을 때 단어가 함께 이어지는 것을 방지해야 합니다.
- 장식 이미지를 숨기기 위해 널(비어 있는) 텍스트 대체(alt="")를 사용하는 경우 따옴표 사이에 공백 문자가 없는지 확인합니다. 공백 문자가 있으면 보조 기술에서 이미지가 효과적으로 숨겨지지 않을 수 있습니다. 예를 들어 일부 스크린 리더는 따옴표 사이에 공백 문자를 넣어도 이미지가 있음을 알립니다.
텍스트 대체에 불필요한 정보가 있는 경우 일반적으로 대체 텍스트에 '이미지', '아이콘' 또는 '그림'과 같은 단어를 포함할 필요가 없습니다. 볼 수 있는 사람들은 이미 이 사실을 알고 있으며 스크린 리더는 이미지가 있음을 알려줍니다. 일부 상황에서는 그림, 사진, 일러스트레이션 등을 구분하는 것이 중요할 수 있지만 일반적인 용어는 피하는 것이 가장 좋습니다.
SVG 그래픽
- SVG 그래픽은 다른 이미지 형식(PNG, JPEG, GIF)과 마찬가지로 <img> 요소의 src 속성에서 참조할 수 있습니다. 이 경우 이 튜토리얼의 예제는 SVG에도 사용할 수 있습니다.
- SVG 이미지는 HTML과 같은 태그로 구성되므로 해당 코드를 HTML5에서 직접 사용할 수도 있습니다. 이 경우 SVG 이미지 내의 <title> 요소에 텍스트 대안을 제공할 수 있습니다. 접근성 지원을 개선하기 위해 해당 제목은 예를 들어 <svg> 요소의 aria-labelledby 속성에서 참조해야 합니다.
로고 텍스트가 포함된 로고 이미지는 일부 접근성 요구 사항에서 면제됩니다. 예를 들어 최소 대비 요구 사항이 없습니다.

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">설정</title> [기타 svg 코드] 
</svg>

기타 W3C 리소스

장애인의 웹 사용 방법에서 텍스트가 아닌 콘텐츠에 텍스트 대체물을 제공하는 것에 대한 배경 정보를 확인하세요.
사이트에서 이미지의 접근성을 테스트합니다. 빠른 이미지 텍스트 대체 확인.
텍스트 대체물 선택 시 좋은 사례와 나쁜 사례의 예는 데모 전후(BAD) 데모에서 확인할 수 있습니다.

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 4. 이미지

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.

[번역] 웹접근성 튜토리얼 - 3. 메뉴(네비게이션)

닥스터 — Thu, 6 Jul 2023 00:17:06 +0900

메뉴는 네비게이션에 사용되며 웹 페이지 작동의 중요한 부분인 기능을 제공합니다.

구조 : 메뉴의 구조를 반영하고 적절한 레이블을 지정하는 방식으로 메뉴를 마크업합니다.
스타일링 : 일반적으로 인식되는 디자인 패턴을 사용하여 메뉴와 메뉴 항목의 상태를 구분합니다.
플라이아웃 메뉴 : 플라이아웃(드롭다운) 하위 메뉴를 마우스와 키보드로 적절하게 사용할 수 있는지 확인합니다.
애플리케이션 메뉴 : 데스크톱 애플리케이션 메뉴와 유사하도록 특정 마크업 및 키보드 동작을 추가합니다.

이것이 왜 중요한가요?

네비게이션 메뉴는 웹사이트의 기본 구조를 반영합니다. 애플리케이션 메뉴는 애플리케이션의 필수 기능에 대한 액세스를 제공합니다. 따라서 메뉴는 웹 페이지와 애플리케이션의 중요한 부분이며 디자인 및 개발 과정에서 특별한 주의가 필요합니다.

스크린 리더 및 키보드 사용자는 키보드 상호 운용성 및 다양한 방식으로 메뉴를 조작할 수 있는 마크업의 이점을 누릴 수 있습니다.
소근육 장애가 있는 사용자와 터치스크린 사용자는 클릭하거나 탭할 수 있는 더 큰 타겟이 필요합니다. 플라이아웃 메뉴에서는 마우스가 클릭 가능한 영역을 벗어난 직후에 하위 메뉴가 사라지지 않아야 합니다.
주의력이 제한적이거나 단기 기억력이 약한 사용자는 현재 페이지와 같이 쉽게 식별할 수 있는 상태를 명확하고 뚜렷하게 표시한 메뉴가 유용합니다.

메뉴 구조

시맨틱 마크업은 메뉴 구조를 사용자에게 전달합니다. 의미론적으로 코딩된 메뉴는 작은 화면 디스플레이, 화면 확대 및 기타 보조 기술과 같은 다양한 상황에 쉽게 적응할 수 있습니다.

메뉴 표현

일반적으로 목록을 사용하여 메뉴 구조를 전달합니다. 이러한 구조적 정보를 통해 보조 기술은 메뉴의 항목 수를 알리고 해당 탐색 기능을 제공할 수 있습니다.

접근 방식 1 : 정렬되지 않은 목록

메뉴 항목이 특정 순서가 아닌 경우 정렬되지 않은 목록(<ul>)을 사용합니다. 웹사이트 탐색과 같은 대부분의 메뉴 유형이 이 범주에 속합니다.

<ul>
  <li><a href="…">Home</a></li>
  <li><a href="…">Shop</a></li>
  <li><a href="…">Space Bears</a></li>
  <li><a href="…">Mars Cars</a></li>
  <li><a href="…">Contact</a></li>
  …
</ul>

접근 방식 2 : 정렬 목록

메뉴 항목의 순서가 중요한 경우 정렬된 목록(<ol>)을 사용합니다. 다음 예제에서 메뉴 항목은 시공 매뉴얼의 단계를 나타냅니다.

<ol>
  <li><a href="…">Unpacking the Space Craft</a></li>
  <li><a href="…">Check Contents of Package</a></li>
  <li><a href="…">Build Chassis</a></li>
  <li><a href="…">Build Engine</a></li>
  <li><a href="…">Mount Engine to Chassis</a></li>
  …
</ol>

메뉴 식별

사용자가 메뉴에 직접 액세스할 수 있도록 <nav> 요소를 사용하여 메뉴를 식별합니다. 메뉴를 마크업하는 다른 기법은 페이지 영역 튜토리얼에 설명되어 있습니다.

<nav>
  <ul>
    …
  </ul>
</nav>

메뉴 레이블

메뉴를 쉽게 찾고 이해할 수 있도록 메뉴에 레이블을 붙입니다. 레이블은 사용자가 웹 페이지의 여러 메뉴를 구분할 수 있도록 짧지만 설명이 포함되어야 합니다. 제목, aria-label 또는 aria-labelledby를 사용하여 레이블을 제공합니다. 이러한 기법은 영역 레이블 지정 튜토리얼에 설명되어 있습니다.

<nav aria-labelledby="mainmenulabel">
  <h2 id="mainmenulabel" class="visuallyhidden">Main Menu</h2>
</nav>

현재 항목 표시

마크업을 사용하여 웹사이트의 현재 페이지와 같은 메뉴의 현재 항목을 표시하여 메뉴의 방향을 개선할 수 있습니다.

접근 방식 1 : 보이지 않는 텍스트 사용

스크린 리더 사용자에게 소리내어 읽히고 다른 보조 기술에서 현재 항목을 표시하는 데 사용되는 보이지 않는 레이블을 제공하여 사용자 지정 레이블 텍스트를 허용합니다.

사용자가 현재 항목과 상호 작용할 수 없도록 앵커(<a>)를 제거합니다. 이렇게 하면 오해를 피하고 현재 메뉴 항목이 활성화되어 있음을 강조할 수 있습니다.

다음 예제에서는 메뉴 항목에 보이지 않는 텍스트 "현재 페이지:"가 있고 <a> 요소는 현재 클래스가 있는 <span>으로 대체됩니다.

<li>
  <span class="current">
    <span class="visuallyhidden">Current Page: </span>
    Space Bears
  </span>
</li>

접근 방식 2 : WAI-ARIA 사용

메뉴의 현재 페이지를 표시하려면 aria-current="page" 속성을 사용합니다. 이 기법은 HTML에서 앵커(<a>)를 제거할 수 없을 때 특히 유용합니다.

다음 예제에서는 탐색의 링크가 페이지의 주요 콘텐츠를 가리킵니다.

<li>
  <a href="#main" aria-current="page">
    Space Bears
  </a>
</li>

메뉴 스타일링

명확하고 일관된 스타일링을 사용하면 사용자가 메뉴를 더 빨리 찾고 인식할 수 있습니다. 이러한 스타일링에는 웹사이트 전체 페이지에서 동작, 모양 및 상대적 위치의 일관성이 포함됩니다.

일반적인 고려 사항

메뉴에는 장식용 또는 기능을 전달하는 아이콘과 같은 이미지가 사용되는 경우가 많습니다. 이러한 이미지에는 이미지 튜토리얼에 설명된 대로 대체 텍스트가 필요합니다. 대비 요구 사항은 메뉴 및 해당 항목에도 적용됩니다.

위치

웹사이트의 대상 고객이 예상하는 위치에 메뉴를 표시합니다. 예를 들어 웹사이트의 기본 탐색 메뉴는 일반적으로 페이지 왼쪽에 세로로 배치되거나 상단에 가로로 배치됩니다. 애플리케이션 메뉴는 일반적으로 상단에 가로로 배치됩니다.

식별

메뉴와 해당 항목을 쉽게 식별할 수 있어야 합니다. 이전 섹션에서 설명한 구조적 마크업 외에도 메뉴 및 항목의 존재를 시각적으로 전달하기 위해서는 색 구성표가 필요합니다.

모든 사람이 메뉴 레이블을 볼 수 있도록 하는 것이 좋습니다. 예를 들어 이 자습서에서 '메뉴 자습서', '모든 자습서', '이 페이지에서'는 모든 사용자가 사용할 수 있는 표시되는 제목으로 제공되는 메뉴 레이블입니다.

가독성

모든 텍스트에 맞게 메뉴 및 메뉴 항목의 크기를 적절하게 조정합니다. 메뉴 크기는 다양한 텍스트 크기에 맞게 조정하여 단어가 긴 언어와 더 큰 텍스트가 필요한 사용자를 수용해야 합니다. 대문자 텍스트, 줄 바꿈, 하이픈은 종종 산만하고 읽기 어렵기 때문에 가급적 사용하지 마세요.

크기

모바일 디바이스의 작은 터치스크린과 손재주가 약한 사람들을 위해 패딩과 같은 충분한 공백을 제공하세요. 동시에 사용자가 텍스트 크기를 늘리거나 페이지를 확대할 때 메뉴와 페이지의 다른 콘텐츠가 겹치지 않도록 하세요.

메뉴 항목

색상 및 기타 스타일링 옵션을 사용하여 메뉴 항목과 해당 상태를 전달하세요. 일부 사용자는 이러한 변경 사항을 인식하지 못할 수 있으므로 색상에만 의존하지 마세요. 예를 들어 메뉴 항목이 선택되었을 때 색상을 변경하는 것 외에도 메뉴 항목의 모양을 변경하거나 아이콘을 추가할 수 있습니다.

기본 상태

메뉴 항목을 활성화할 수 있는 페이지의 영역으로 시각적으로 표시하려면 고유한 스타일을 사용합니다. 그러나 대문자나 작은 대문자로 된 단어와 같이 과장된 텍스트 장식은 텍스트를 읽기 어렵게 만들 수 있으므로 피하세요.

호버 및 포커스 상태

메뉴 탐색 시 사용자에게 시각적 안내를 제공하는 호버링 또는 포커스된 메뉴 항목을 변경합니다. 이 예에서 호버링 및 포커스 상태는 반전된 색 구성표(흰색에 파란색이 아닌 흰색에 파란색)와 밑줄을 사용합니다.

nav a:hover,
nav a:focus {
  color: #036;
  background-color: #fff;
  text-decoration: underline;
}

활성 상태

클릭, 탭 또는 키보드 선택을 통해 활성화된 메뉴 항목을 표시합니다. 예를 들어 사용자가 잘못된 메뉴 항목을 클릭한 경우와 같이 의도하지 않은 활성화를 식별할 수 있습니다. 이 예에서 활성화된 항목은 진한 파란색 배경과 밑줄이 있습니다.

nav a:active {
  color: #fff;
  background-color: #024;
  text-decoration: underline;
}

현재 상태

또한 이전 섹션에서 설명한 구조적 마크업과 더불어 현재 메뉴 항목을 시각적으로 표시합니다.

이 예에서는 현재 메뉴 항목에 뚜렷한 색상과 모양을 부여하기 위해 다른 색상 조합(회색에 검은색)과 하단 테두리를 추가했습니다.

nav [aria-current=page] {
  background-color: #bbb;
  color: #000;
  border-bottom: .25em solid #444;
}

방문한 상태

안내 단계와 같은 일부 메뉴 유형의 경우 사용자가 이미 방문한 적이 있는 메뉴 항목을 표시하는 것이 유용할 수 있습니다. 그러나 대부분의 메뉴는 방문한 상태에 따라 변경되지 않을 것으로 예상됩니다.

드롭다운 메뉴

플라이아웃(또는 드롭다운) 메뉴를 사용하여 웹 사이트의 페이지 계층 구조에 대한 개요를 제공합니다. 사용자가 정보를 찾을 수 있는 위치를 알고 있다면 여러 페이지를 로드할 필요가 없습니다. 애플리케이션 메뉴도 이와 유사하게 구현되지만 WAI-ARIA 마크업이 추가됩니다.

손 떨림과 같이 손재주가 약한 사람들은 종종 드롭다운 메뉴를 조작하는 데 어려움을 겪습니다. 일부에게는 불가능할 수도 있습니다. 상위 메뉴 항목의 페이지에서 하위 메뉴 항목을 반복하는 등 하위 메뉴 항목에 도달할 수 있는 다른 방법을 제공해야 합니다.

하위 메뉴 표시

마크업을 사용하여 시각적으로 하위 메뉴가 있는 탐색 메뉴 항목을 표시합니다. 다음 예에서는 하위 메뉴가 아이콘으로 시각적으로 표시됩니다. WAI-ARIA 마크업 aria-expanded="false"는 하위 메뉴 탐색이 현재 숨겨져 있거나 "collapsed"을 선언합니다.

<nav aria-label="Main">
  <ul>
    <li><a href="…">Home</a></li>
    <li><a href="…">Shop</a></li>
    <li class="has-submenu">
      <a href="…" aria-expanded="false">
        Space Bears
      </a>
      <ul>
        <li><a href="…">Space Bear 6</a></li>
        <li><a href="…">Space Bear 6 Plus</a></li>
      </ul>
    </li>
    <li><a href="…">Mars Cars</a></li>
    <li><a href="…">Contact</a></li>
  </ul>
</nav>

드롭다운 기능

드롭다운 기능은 마우스와 키보드 사용자를 약간 별도로 고려한 CSS와 스크립트를 사용하여 만들어졌습니다.

마우스 사용자

다음 예제는 상위 메뉴 항목을 마우스 오버했을 때 하위 메뉴를 표시하고 숨기는 데 아래의 CSS 코드를 사용합니다.

nav > ul li  ul { display: none; }
nav > ul li:hover ul { display: block; }

또한 스크립팅을 사용하여 마우스가 해당 영역을 벗어날 때 하위 메뉴 항목이 즉시 닫히는 것을 약간 지연시킵니다. 이 지연을 통해 마우스로 탐색하는 것이 정확하지 않을 때 메뉴를 더 쉽게 사용할 수 있습니다.

다음 예에서는 타이머를 사용하여 1초의 지연을 추가합니다.

var menuItems = document.querySelectorAll('li.has-submenu');
Array.prototype.forEach.call(menuItems, function(el, i){
  el.addEventListener("mouseover", function(event){
    this.className = "has-submenu open";
    clearTimeout(timer);
  });
  el.addEventListener("mouseout", function(event){
    timer = setTimeout(function(event){
      document.querySelector(".has-submenu.open").className = "has-submenu";
    }, 1000);
  });
});

키보드 사용자

탭 키를 사용하여 메뉴를 탐색할 때 하위 메뉴가 열리면 키보드 사용자가 다음 최상위 항목으로 이동하기 위해 모든 하위 메뉴 항목을 거쳐야 하므로 하위 메뉴가 열리지 않아야 합니다. 대신 다음 접근 방식 중 하나를 고려하십시오.

접근방식 1) 부모 요소를 토글로 사용

상위 메뉴 항목이 하위 메뉴를 요약만 하고 웹 페이지 링크와 같은 기능을 수행할 필요가 없는 상황에서 이 접근 방식을 사용합니다. 이 경우 사용자가 최상위 항목을 활성화하면 스크립트에 의해 하위 메뉴가 열리고 초점이 하위 메뉴에서 벗어나면 하위 메뉴가 닫힙니다.

참고
href 속성 값은 무시되지만 JavaScript가 로드되지 않은 경우 기존 문서에 링크할 수 있습니다.

다음 코드는 has-submenu 클래스가 있는 모든 최상위 항목을 반복하고 상태에 따라 하위 메뉴를 열거나 닫는 클릭 이벤트를 추가합니다. 또한 하위 메뉴가 열려 있으면 aria-expanded 속성이 true로 설정되고 그렇지 않으면 false로 설정됩니다.

참고
이름과 상관없이 클릭 이벤트는 링크가 활성화되는 즉시 입력 방법에 관계없이 활성화됩니다.

var menuItems = document.querySelectorAll('li.has-submenu');
Array.prototype.forEach.call(menuItems, function(el, i){
  el.querySelector('a').addEventListener("click",  function(event){
    if (this.parentNode.className == "has-submenu") {
      this.parentNode.className = "has-submenu open";
      this.setAttribute('aria-expanded', "true");
    } else {
      this.parentNode.className = "has-submenu";
      this.setAttribute('aria-expanded', "false");
    }
    event.preventDefault();
    return false;
  });
});

접근방식 2) 버튼 요소를 토글로 사용

상위 메뉴 항목이 웹 페이지 링크와 같은 기능을 수행해야 하는 경우 상위 항목에 별도의 버튼을 추가하여 하위 메뉴를 열고 닫을 수 있습니다. 이 버튼은 하위 메뉴의 존재를 시각적으로 표시하는 역할도 할 수 있습니다.

다음 코드는 하위 메뉴가 있는 모든 최상위 메뉴 항목에 버튼을 추가합니다. 버튼이 활성화되면 하위 메뉴가 표시되거나 숨겨집니다. 버튼의 보이지 않는 레이블은 하위 메뉴의 상태를 반영하여 "하위 메뉴 표시" 또는 "하위 메뉴 숨기기"로 설정됩니다.

참고
가능하면 버튼의 레이블에 상위 메뉴 항목의 이름을 포함하세요(예: 예: "Space Bears 하위 메뉴 표시".

var menuItems = document.querySelectorAll('li.has-submenu');
Array.prototype.forEach.call(menuItems, function(el, i){
  var activatingA = el.querySelector('a');
  var btn = '<button><span><span class="visuallyhidden">show submenu for “' + activatingA.text + '”</span></span></button>';
  activatingA.insertAdjacentHTML('afterend', btn);

  el.querySelector('button').addEventListener("click",  function(event){
    if (this.parentNode.className == "has-submenu") {
      this.parentNode.className = "has-submenu open";
      this.parentNode.querySelector('a').setAttribute('aria-expanded', "true");
      this.parentNode.querySelector('button').setAttribute('aria-expanded', "true");
    } else {
      this.parentNode.className = "has-submenu";
      this.parentNode.querySelector('a').setAttribute('aria-expanded', "false");
      this.parentNode.querySelector('button').setAttribute('aria-expanded', "false");
    }
    event.preventDefault();
  });
});

애플리케이션 메뉴

웹 애플리케이션 메뉴는 탐색 메뉴와 동일한 기본 구조를 사용합니다. 가로 메뉴 모음으로 구성되며 레이어 메뉴 기능을 사용하는 경우가 많습니다. 그러나 추가 마크업 및 키보드 동작을 추가해야 합니다.

추가 마크업

aria-expanded 및 aria-haspopup 속성 외에도 애플리케이션 메뉴에 필요한 시맨틱을 제공하기 위해 다음과 같은 WAI-ARIA 역할이 사용됩니다.

menubar : (일반적으로 가로) 메뉴 표시줄을 나타냅니다.
menu : 메뉴 표시줄의 링크 또는 명령 집합을 나타내며, 플라이아웃 메뉴에 사용됩니다.
menuitem : 개별 메뉴 항목을 나타냅니다.
separator : 메뉴에서 두 메뉴 항목 그룹 사이의 구분 기호를 나타냅니다.

<ul role="menubar" id="appmenu">
  …
  <li role="menuitem" aria-haspopup="true">
    Edit
    <ul role="menu">
      <li role="menuitem">Undo</li>
      <li role="menuitem">Redo</li>
      <li role="separator"></li>
      <li role="menuitem">Cut</li>
      <li role="menuitem">Copy</li>
      <li role="menuitem">Paste</li>
    </ul>
  </li>
  …
</ul>

애플리케이션 메뉴에는 일반적으로 링크가 없으며 기능을 제공하기 위해 스크립팅에 의존합니다.

기능

WAI-ARIA 역할을 추가한다고 해서 메뉴의 기능이나 키보드 동작이 자동으로 활성화되는 것은 아닙니다. 이러한 기능은 스크립팅을 사용하여 추가해야 합니다. WAI-ARIA 속성 및 키보드 동작에 대한 자세한 설명은 WAI-ARIA 저작 사례 문서(초안)에서 확인할 수 있습니다.

키보드 동작

웹 애플리케이션 메뉴는 데스크톱 애플리케이션 메뉴처럼 작동해야 합니다. 예를 들어 왼쪽 및 오른쪽 키는 최상위 항목을 반복하는 데 사용되며 위쪽 및 아래쪽 화살표는 하위 메뉴를 탐색하는 데 사용됩니다. 탭 키를 누르면 다음 메뉴 항목이 아닌 메뉴 뒤의 다음 항목에 초점이 맞춰집니다.

키보드로 메뉴 항목에 초점을 설정할 수 있도록 항목에 -1 값의 tabindex 속성이 지정됩니다. 첫 번째 주 메뉴 항목(이 예에서는 "파일")에는 탭 순서에 추가되는 tabindex 값 0이 할당되어 사용자가 키보드를 사용하여 메뉴에 액세스할 수 있습니다.

Array.prototype.forEach.call(appsMenuItems, function(el, i){
  if (0 == i) {
    el.setAttribute('tabindex', '0');
    el.addEventListener("focus", function() {
      currentIndex = 0;
    });
  } else {
    el.setAttribute('tabindex', '-1');
  }
});

Array.prototype.forEach.call(subMenuItems, function(el, i){
  el.setAttribute('tabindex', '-1');
});

최상위 메뉴 항목

다음 표에는 최상위 메뉴 항목의 일반적인 동작이 요약되어 있습니다.

최상위 메뉴 항목에 대한 키 매핑

하위 메뉴 항목

다음 표에는 하위 메뉴 항목의 일반적인 동작이 요약되어 있습니다.

하위 메뉴 항목의 키 매핑

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 3. 메뉴(네비게이션)

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.

[번역] 웹접근성 튜토리얼 - 2. 페이지 구조

닥스터 — Thu, 6 Jul 2023 00:16:48 +0900

잘 구조화된 콘텐츠는 보다 효율적인 탐색과 처리를 가능하게 합니다.
웹 페이지와 애플리케이션에서 탐색 및 방향성을 개선하려면 HTML과 WAI-ARIA를 사용하세요.

페이지 영역 (Page Regions) : HTML5 및 WAI-ARIA 역할을 사용하여 웹 페이지에서 영역을 식별하고 마크업합니다.
영역 라벨링 (Labeling Regions) : 사용자가 영역을 구분하고 액세스할 수 있도록 영역에 레이블을 지정합니다.
제목 (Headings) : 제목을 추가하고 논리적으로 중첩하여 웹 페이지의 섹션에 관계와 중요도에 따라 레이블을 지정합니다.
콘텐츠 구조 (Content Structure) : 적절하고 의미 있는 요소를 사용하여 페이지의 콘텐츠를 마크업합니다.

왜 중요한가?

예를 들어, 잘 구성된 콘텐츠가 있는 페이지는 많은 웹 사용자에게 필수적입니다.

인지 및 학습 장애가 있는 사용자는 페이지에서 콘텐츠를 더 쉽게 찾고 우선 순위를 지정할 수 있습니다.
스크린 리더를 사용하는 사용자는 주요 콘텐츠로 바로 건너뛰고 자신에게 중요한 섹션으로 이동할 수 있습니다.
키보드 사용자는 페이지와 해당 섹션을 더 효율적으로 탐색할 수 있습니다. 그렇지 않으면 사용자가 각 섹션의 모든 링크를 탐색하기 위해 탭 키를 여러 번 눌러야 합니다.
인지 장애가 있는 사용자처럼 웹 페이지의 주요 콘텐츠만 표시하는 소프트웨어를 사용하는 사용자는 페이지 구조가 올바르게 마크업되어 있으면 더 나은 결과를 얻을 수 있습니다.
저시력 장애인을 비롯한 시각 장애인은 페이지와 콘텐츠에 방향을 알려주는 단서가 있습니다.
모바일 웹 사용자는 페이지가 올바르게 마크업된 경우에만 페이지의 주요 콘텐츠가 표시되는 소위 '리더' 또는 '읽기' 모드에 액세스할 수 있는 경우가 많습니다.
특정 브라우저 플러그인을 사용하는 사용자는 랜드마크 역할을 사용하여 페이지의 특정 섹션으로 이동할 수 있습니다.
접근성이 좋은 페이지 구조에는 장애인이 경험하는 것 외에도 추가적인 이점이 있습니다. 예를 들어, 검색 엔진은 데이터를 사용하여 페이지 콘텐츠의 색인을 더 잘 생성할 수 있습니다.

페이지 영역 (Page Regions)

웹 페이지와 애플리케이션의 다양한 영역을 마크업하여 웹 브라우저와 보조 기술에서 식별할 수 있도록 합니다.

페이지 헤더

대부분의 웹사이트에는 웹사이트 로고, 검색 기능, 탐색 옵션 등 사이트 전체 정보가 포함된 영역이 모든 페이지 상단에 있습니다. HTML5는 이러한 영역을 정의하는 데 사용할 수 있는 <header> 요소를 제공합니다.

참고
<header> 요소가 <article> 및 <section> 요소 안에 사용되는 경우 해당 요소와 연결되지 않습니다. 이 요소는 WAI-ARIA banner 역할(role)을 하지 않으며 보조 기술에서 특별한 동작을 하지 않습니다.

<header>
  ...
  <img src="/img/logo.png" alt="SpaceBear Inc." />
  ...
</header>

페이지 푸터

참고
<footer> 요소가 <article> 및 <section> 요소 안에 사용되는 경우 해당 요소와 연결되지 않습니다. 이 요소는 WAI-ARIA contentinfo 역할(role)을 가져오지 않으며 보조 기술에서 특별한 동작을 하지 않습니다.

<footer>
  ...
  <p>&copy; 2023 SpaceBear Inc.</p>
  ...
</footer>

네비게이션

<nav> 요소는 탐색 메뉴를 식별하는 데 사용할 수 있습니다. 웹 페이지에는 여러 개의 탐색 메뉴가 있을 수 있습니다. label을 사용하여 각 탐색 메뉴를 식별합니다.

<nav aria-label="Main">
  ...
</nav>

...

<nav aria-labelledby="regionheading">
  <h2 id="regionheading">On this page</h2>
  ...
</nav>

메뉴 튜토리얼에서 메뉴 생성에 대한 자세한 내용을 확인할 수 있습니다.

메인 콘텐츠

웹 페이지 또는 애플리케이션의 주요 콘텐츠 영역을 <main> 요소를 사용하여 식별합니다.

<main>
  <h1>Stellar launch weekend for the SpaceBear 7!</h1>
  ...
</main>

보완 콘텐츠

주요 콘텐츠를 지원하지만 그 자체로 별개의 의미 있는 섹션인 영역을 <aside> 요소를 사용하여 식별합니다.
(예: 주요 콘텐츠를 설명하거나 주석을 다는 사이드 노트)

<aside>
  <h3>Related Articles</h3>
  ...
</aside>

WAI-ARIA를 사용한 HTML5의 페이지 영역

현재 대부분의 웹 브라우저는 위의 HTML5 요소를 지원하며 접근성 API를 통해 보조 기술에 정보를 전달합니다. 그러나 WAI-ARIA를 지원하지만 아직 HTML5를 지원하지 않는 웹 브라우저 및 보조 기술과의 호환성을 극대화하려면 현재로서는 HTML5 요소와 해당 WAI-ARIA 역할을 모두 사용하는 것이 좋습니다.

<header role="banner">...</header>
<main role="main">...</main>
<nav role="navigation">...</nav>
<footer role="contentinfo">...</footer>

다른 WAI-ARIA 리소스를 살펴보세요.

영역 라벨링 (Labeling Regions)

같은 페이지에서 <nav> 요소를 사용하는 'main navigation' 및 'sub-navigation' 메뉴와 같이 동일한 유형의 두 페이지 영역을 구분하는 레이블을 제공합니다. 레이블은 페이지 영역의 기본 식별을 변경하는 데도 사용됩니다.
(예: <aside> 영역을 "광고"로 식별).

<main>과 같이 고유한 영역은 추가 레이블이 필요하지 않습니다.

접근 1) aria-labelledby 사용

aria-labelledby를 사용하여 (고유) id로 기존 요소를 가리킵니다. 영역의 레이블은 참조된 요소의 콘텐츠입니다. 모든 요소는 이런 식으로 레이블이 될 수 있습니다. 레이블은 짧고 설명적이어야 합니다. 영역에 제목이 있는 경우 제목을 레이블로 사용하는 것이 좋습니다.

<nav aria-labelledby="regionheading">
  <h2 id="regionheadling">On this Page</h2>
  ...
</nav>

참고
제목(headings)을 사용하는 이 접근 방식은 구형 웹 브라우저와도 호환되며 보조 기술은 HTML5 및 WAI-ARIA를 처리하지 않습니다.

접근 2) aria-label 사용

영역에 레이블을 지정하려면 WAI-ARIA aria-label 속성을 사용합니다. 레이블이 페이지에 시각적으로 표시되지 않아야 하는 경우 이 접근 방식을 고려하세요.

<nav aria-label="Main">
  ...
</nav>

제목 (Headings)

제목은 페이지에 있는 콘텐츠의 구성을 전달합니다.
웹 브라우저, 플러그인 및 보조 기술에서는 이를 사용하여 페이지 내 탐색 기능을 제공할 수 있습니다.

제목 순위

순위(또는 수준)에 따라 제목을 중첩합니다. 가장 중요한 제목은 순위가 1(<h1>)이고 가장 중요하지 않은 제목은 순위가 6(<h6>)입니다. 순위가 같거나 높은 제목은 새 섹션을 시작하고 순위가 낮은 제목은 더 높은 순위의 섹션에 속하는 새 하위 섹션을 시작합니다.

제목 순위를 건너뛰면 혼란스러울 수 있으므로 가능한 경우 피해야 합니다.
<h2> 바로 뒤에 <h4>가 오지 않도록 하세요. 예를 들어, 새 섹션을 시작하는 <h2>가 이전 섹션을 마무리 하는 <h4> 뒤에 올 수 있는 것처럼 하위 섹션을 닫을 때는 순위를 건너 뛰어도 괜찮습니다.

고정 페이지 섹션의 예외

사이드바와 같이 페이지의 고정된 섹션에서는 콘텐츠 영역의 순위에 따라 제목 순위가 변경되지 않아야 합니다. 이러한 경우 페이지 전체에서 일관성이 더 중요합니다.

텍스트 구절 구성

다음 예에서 제목은 주요 콘텐츠와 같이 페이지의 텍스트 구절을 구성하는 데 사용됩니다.

페이지 구성을 반영하는 제목

제목은 페이지 영역에 레이블을 지정하는 데 유용합니다.
이 튜토리얼의 페이지 영역 레이블 지정 섹션에 설명된 대로 aria-labelledby를 사용하여 제목을 페이지 영역과 연결합니다. 제목이 표시되면 모든 사용자가 영역을 쉽게 식별할 수 있습니다.

예 1) 네비게이션 이전의 기본 제목

이 첫 번째 예에서는 순위가 1인 제목이 문서에서 첫 번째 제목입니다. 페이지 구성을 위한 다른 모든 제목(네비게이션 메뉴, 사이드바, 푸터)은 한 등급 낮으며, 주요 콘텐츠의 제목도 마찬가지입니다.

예 2) 네비게이션 이후의 기본 제목

이 두 번째 예제에서 주 제목은 사이트 이름이 아니라 콘텐츠 제목이며, 이는 1순위입니다. 콘텐츠의 부제목은 다른 모든 구조적 제목과 마찬가지로 2순위입니다.

콘텐츠 구조 (Content Structure)

웹사이트 콘텐츠를 의미론적으로 마크업하여 웹사이트를 확장할 수 있도록 합니다.
유효한 의미론은 재사용이 가능하고 보조 기술에 더 의미 있는 콘텐츠를 만듭니다.

article

<article> 요소는 웹 페이지에서 전체 또는 독립된 구성을 나타냅니다. 쇼핑 사이트의 상품이나 뉴스 사이트의 뉴스 기사 등이 기사의 예입니다.

<article>
  <h2>Space Bear Classic</h2>
  ...
</article>
<article>
  <h2>Space Bear Extreme</h2>
  ...
</article>

section

<section> 요소는 웹 페이지 또는 기사의 일반적인 영역을 표시합니다. 콘텐츠의 주제별 그룹화에 사용됩니다.

<section>
  <h2>Chapter 2</h2>
  ...
</section>

문단

문단 요소(<p>)를 사용하여 지금 이 문단과 같이 텍스트 단락을 표시할 수 있습니다. 단락의 일관된 스타일링은 텍스트 가독성을 향상시킵니다. 또한 사용자가 보기를 사용자 지정할 때 더 많은 제어 기능을 제공합니다.

다양한 유형의 목록을 사용하여 정보의 성격에 따라 정보를 그룹화하여 사용자에게 방향을 제시하세요.

정렬되지 않은 목록(<ul>)은 항목의 순서가 관련이 없는 경우에 사용됩니다. 정렬되지 않은 목록의 목록 항목은 글머리 기호로 표시됩니다.
정렬된 목록(<ol>)은 순차적 정보에 사용되며 브라우저에서 자동으로 열거됩니다.
설명 목록(<dl>)은 프로그래밍 방식으로 연결된 관련 용어 및 설명의 그룹입니다.

개별 목록 항목에는 단락, 제목, 양식 요소, 기타(중첩된) 목록 등 다양한 HTML 요소가 포함될 수 있습니다.

정렬되지 않은 목록

정렬되지 않은 목록은 하나의 <ul> 요소와 여러 목록 항목(<li>) 요소로 구성됩니다.

<ul>
  <li>Corn</li>
  <li>Tomatoes</li>
  <li>Beans</li>
  <li>Onions</li>
  <li>Garlic</li>
  …
</ul>

정렬된 목록

정렬된 목록은 하나의 <ol> 요소와 여러 목록 항목(<li>) 요소로 구성됩니다.

<ol>
  <li>Cook beans for 45 minutes.</li>
  <li>Cut vegetables in small cubes.</li>
  <li>Sauté onions and garlic.</li>
  <li>Deglaze using the tomatoes.</li>
  <li>Add corn and beans.</li>
  …
</ol>

중첩된 목록

모든 목록은 다른 목록에 중첩될 수 있습니다. 다음 예에서는 순서는 중요하지 않지만 재료를 사용하기 전에 준비 자체를 완료해야 합니다. 정보는 여전히 이해하기 쉬우며 보조 기술을 통해 사용자에게 단계 수를 쉽게 알려줄 수 있습니다.

<ol>
  <li>
      Prepare ingredients
      <ul>
          <li>Cook beans for 45 minutes.</li>
          <li>Cut vegetables in small cubes.</li>
      </ul>
  </li>
  <li>Sauté onions and garlic.</li>
  <li>Deglaze using the tomatoes.</li>
  <li>Add corn and beans.</li>
  …
</ol>

설명 목록

설명 목록은 하나 이상의 용어 및 설명 그룹으로 구성됩니다. 각 그룹은 하나 이상의 용어(<dt> 요소의 내용)를 하나 이상의 설명(<dd> 요소의 내용)과 연결합니다.

그룹화는 목록의 첫 번째 항목에서 시작되거나 <dt> 요소가 <dd> 요소 다음에 올 때마다 시작됩니다.

예 1) 하나의 용어, 여러 설명

다음 예에서는 John과 Luke를 작성자(Authors)로, Frank를 편집자(Editor)로 설명합니다.

<dl>
  <dt>Authors</dt>
  <dd>John</dd>
  <dd>Luke</dd>
  <dt>Editor</dt>
  <dd>Frank</dd>
</dl>

예 2) 여러 용어, 하나의 설명

다음 예에서는 설명 목록을 사용하여 한 단어의 철자가 다른 두 가지를 정의합니다. 이러한 경우 정의된 용어를 마크업하려면 dfn 요소를 사용합니다.

<dl>
   <dt lang="en-US"><dfn>color</dfn></dt>
   <dt lang="en-GB"><dfn>colour</dfn></dt>
   <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>

예 3) 여러 용어, 여러 설명

이 예에서 John과 Luke는 작성자(Authors)이면서 편집자(Editor)이기도 합니다.

<dl>
  <dt>Authors</dt>
  <dt>Editors</dt>
  <dd>John</dd>
  <dd>Luke</dd>
</dl>

인용문

인용문을 식별하면 콘텐츠의 출처가 다른 작성자임을 명확히 알 수 있습니다. 인용문은 인라인 또는 텍스트 블록으로 마크업할 수 있습니다. 보조 기술을 통해 인용문의 시작과 끝을 사용자에게 전달하여 오해를 피할 수 있습니다.

예 1) 인용문

더 길고 복잡한 따옴표는 <blockquote> 요소를 사용합니다. 단락, 제목 및 기타 텍스트 구조 요소를 포함할 수 있습니다. 이러한 요소는 인용된 문서의 구조를 반영해야 합니다. <cite> 요소는 인용문의 출처를 참조하는 데 사용됩니다.

<p>
  The following is an excerpt from the <cite>The Story of my Life</cite> 
  by Helen Keller
</p>
<blockquote>
  <p>
    Even in the days before my teacher came, 
    I used to feel along the square stiff boxwood hedges, 
    and, guided by the sense of smell, would find the first violets and lilies. 
    There, too, after a fit of temper, I went to find comfort and to hide my hot
    face in the cool leaves and grass.
  </p>
</blockquote>

예 2) 인라인 인용문

일반적으로 다른 문장에 포함되는 짧은 인용문의 경우 <q> 요소를 사용합니다.

<p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, 
we can never do anything good in the world.</q></p>

figure

figure는 페이지의 주요 콘텐츠에서 추가 정보가 설정된 블록으로, 때로는 주요 텍스트에서 참조되기도 합니다. 일반적으로 목록, 이미지, 표를 포함하지만 다른 콘텐츠도 포함할 수 있습니다. 예를 들어 연례 보고서에서 제품의 판매량이 포함된 다이어그램을 참조할 수 있습니다.

각 그림은 <figure> 요소로 둘러싸여 있으며 중첩된 <figcaption> 요소를 사용하여 레이블이 지정됩니다.

<p>The sales volume of our SpaceBear product was steadily the first three 
quarters but had a huge success in quarter four with the introduction of 
SuperBear in time for the holiday season. See graphic G3 for details.</p>

<figure role="group" aria-labelledby="fig-t3-capt">
  <figcaption id="fig-t3-capt">G3: SpaceBear sales volume</figcaption>
  <img src="…"
       alt="SpaceBear sales diagram, showing the huge success in Q4"
       longdesc="…">
  <a href="…">Long Description</a>
</figure>

참고
이 글을 작성하는 현재, 보조 기술에 일관된 방식으로 정보를 제공하기 위해 WAI-ARIA 속성 role="group" 및 aria-labelledby가 사용되고 있습니다.

참고
다이어그램을 마크업하는 방법에 대한 자세한 내용은 복잡한 이미지를 참조하세요.

이미지 및 일러스트레이션

이미지와 일러스트레이션은 많은 사용자의 시각적 참여를 유도하는 데 유용합니다. 또한 읽기 장애가 있는 사람들을 위해 텍스트를 명확하게 설명할 수도 있습니다. 이미지 또는 일러스트레이션을 사용하는 경우에는 적절한 대체 텍스트를 추가해야 합니다. 대체 텍스트에 대한 지침은 이미지 튜토리얼을 참조하세요.

테이블

데이터 테이블은 모든 사람에게 테이블의 구조를 전달할 수 있도록 데이터를 표시하는 유용한 방법을 제공합니다. 적절한 테이블 레이아웃을 사용하면 사람들이 그리드를 보지 않고도 의미 있는 데이터 관계를 이해할 수 있습니다. 자세한 내용은 테이블 자습서를 참조하십시오.

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 3. 메뉴

[A11Y] - 웹접근성 튜토리얼 - 2. 페이지 구조

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.

[번역] 웹접근성 튜토리얼 - 1. 개요

닥스터 — Thu, 6 Jul 2023 00:16:29 +0900

이 튜토리얼 모음에서는 장애인이 액세스할 수 있고 모든 사람에게 더 나은 사용자 경험을 제공하는 웹 콘텐츠를 개발하는 방법을 보여 줍니다.

이 튜토리얼은 다음과 같은 다양한 사람들이 사용할 수 있도록 설계되었습니다.

웹 개발자는 여러 가지 일반적인 코딩 문제에 대한 지침과 상용구 솔루션을 찾을 수 있습니다.
웹 디자이너는 포괄적인 디자인이 내장된 웹 페이지 구성 요소를 만드는 방법을 배울 수 있습니다.
웹 강사는 사람들에게 접근 가능한 웹 디자인 및 개발에 대해 가르칠 수 있는 예제를 찾을 수 있습니다.
콘텐츠 작성자는 접근 가능한 방식으로 콘텐츠를 준비하기 위한 개념과 기술을 배웁니다.
프로젝트 관리자는 프로젝트에 접근성을 통합하는 방법을 이해할 수 있습니다.

이 튜토리얼은 웹 프로젝트의 일반적인 작업을 기반으로 다양한 접근성 주제를 다룹니다. 예를 들어 HTML4, HTML5, CSS3, WAI-ARIA, MathML, SVG 등 다양한 웹 기술을 사용하여 접근 가능한 이미지와 표를 제공하는 방법을 보여 줍니다. 튜토리얼에서 설명하는 개념과 기법은 다른 형식에도 적용됩니다.

웹 저작 도구(콘텐츠 관리 시스템(CMS), WYSIWYG 편집기, 워드 프로세서 등)를 사용하면 이 자습서에서 설명하는 대로 액세스할 수 있는 콘텐츠를 만드는 데 도움이 될 수 있습니다.

WCAG와의 관계

이 튜토리얼은 다양한 상황에서 접근성을 구현하기 위한 모범 사례 지침을 제공합니다. 이 튜토리얼은 다양한 적합성 수준에서 WCAG 2 성공 기준과 기술을 결합합니다. 각 튜토리얼 페이지에는 해당 페이지에서 사용된 구체적인 성공 기준과 기법이 나열되어 있습니다. 규범적인 WCAG 2.0 및 WCAG 2.1 표준과 그 지원 자료에 대한 보다 포괄적인 내용은 WCAG 2를 충족하는 방법: 사용자 지정 가능한 빠른 참조에서 확인할 수 있습니다.

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 1. 개요