웹 접근성 - 개발 팁

오민영·2023년 2월 10일

HTML

목록 보기

5/9

폼 요소에는 레이블을 넣어준다.

폼 요소의 id 어트리뷰트와 연결되어있는 label의 for 어트리뷰트를 사용하거나, WAI-ARIA 어트리뷰트를 사용을 한다.
label 요소를 시각적으로 숨기기 위한 목적이 아니라면, 모든 리더기가 사용자가 입력한 input을 올바르게 이해할 수 있도록 label을 사용해야 한다.

<label for="userName">User Name</label>
<input id="userName" type="text" name="username">

<label> 태그만 혼자 사용되는 경우 오류가 발생할 수 있다. 이런 경우 <div> 로 대체한다.

이미지에 대한 대체 텍스트를 포함한다.

눈으로 화면을 볼 수 없는 경우, 이미지에 대한 설명을 대체 텍스트로 입력해서 스크린 리더를 통해 정보를 인식하게 도와준다.
텍스트가 아닌 콘텐츠는 그 의미나 용도를 알 수 있도록 대체 텍스트를 제공해야 한다.
배경 이미지나 장식 목적의 img는 대체 텍스트를 빈값으로 넣는다.

// 의미 있는 img 요소 정보 제공
<img src="./sample.png" alt="모두를 위한 웹 접근성" />

// 의미 없는 img 요소
<img src="./sample.png" alt="" />

// 의미 있는 button 요소 정보 제공
<button type="button">
  <img src="./sample.png"  alt="앞으로 이동">
    </button>

웹 페이지의 언어 및 언어 변경을 명확하게 표시한다.

html의 lang Attribute를 사용해서 모든 페이지의 대표되는 언어를 나타내도록 한다.

<html lang = "ko">

특정 요소의 언어가 페이지의 기본 언어와 다를 경우, 그 특정 요소에 맞는 lang 어트리뷰트를 명시해준다.

시멘틱 태그를 사용해서 마크업을 한다.

Headings, lists, tables 등과 같이 의미에 맞는 마크업을 사용한다.
HTML5에서는 보다 나은 구조를 명시하기 위해, nav, section ,aside 와 같은 요소를 제공하고 있다.
WAI-ARIA는 추가적인 정보를 제공하는데, 예를들어 검색 기능을 의미하는 role="search" 를 사용할 수 있다.
HTML5 사용

<section>
  <article>
    <h2>Superbear saves the day</h2>
    <time datetime="2015-08-07">7 Aug 2015</time>
    <p>The city's favorite bear yet again proves his mettle by rescuing a young cat from a tree. Witnesses say that Superbear's efforts were not appreciated by the feline, who inflicted some minor scratch wounds on his rescuer.</p>
    <aside>
      <h3>Related Articles</h3>
      <ul>
        <li><a href="#">Bear receives key to city</a></li>
        <li><a href="#">Superbear stands for mayor</a></li>
      </ul>
    </aside>
  </article>
</section>

WAI-ARIA 사용

<form action="#" method="post">
  <div role="search">
    <label for="search">Search for</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">Search records by customer id or name</div>
    <button type="submit">Go</button>
  </div>
</form>

표준화 되지 않은 컴포넌트에 의미를 제공한다.

커스텀 버튼이나 커스텀 셀렉트, 아코디언과 같이 작업자가 새롭게 정의내린 컴포넌트에 정보를 제공하기 위한 WAI-ARIA를 사용한다.
- 예) role="navigation", aria-expanded="true"
- 컴포넌트가 어떻게 키보드 동작에 반응을 하는지 | 컴포넌트를 열고 닫기와 같은 기능 동작을 구현하려면 추가적인 WAI-ARIA 코드가 필요할 수 있다.

// 예시
<form action="#" method="post">
  <div role="search">
    <label for="search">Search for</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">Search records by customer id or name</div>
    <button type="submit">Go</button>
  </div>
</form>

사용자에게 올바른 오류 메세지 | 알림을 제공해준다.

예를 들어, 사용자가 입력 폼을 올바르게 작성할 수 있도록 명확한 지침, 오류 메세지 및 알림을 제공한다.
- 어디에서 문제가 발생했는지 알려준다.
- 충분하고 이해를 할 수 있도록 설명을 제공해준다.
- 고치는 방법을 안내해준다.

// 예시
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel"
       pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
       aria-describedby="phone-desc">
<p id="phone-desc">For example, (02) 1234 1234</p>

사용자가 읽는 순서에 맞춰 코드를 작성한다.

코드 작성의 순서가 사용자가 읽는 보편적인 순서와 일치하는지 체크한다.
순서의 흐름에 맞는지 확인기 위해 CSS를 제거하고 HTML 코드로만 확인을 해본다.

// 틀린 순서
<article class="product">
  <img alt="Purple high top trainer with white laces, empty white dot on outside ankle, and white toe cap" src="images/trainer.png">
  <h3 class="name">Space trainers</h3>
  <p class="desc">Space trainer for a classic and stylish look.</p>
  <p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Add to cart</a></p>
</article>

// 올바른 순서
<article class="product">
  <h3 class="name">Space trainers</h3>
  <img alt="Purple high top trainer with white laces, empty white dot on outside ankle, and white toe cap" src="images/trainer.png">
  <p class="desc">Space trainer for a classic and stylish look.</p>
  <p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Add to cart</a></p>
</article>

사용자 디바이스에 맞도록 적절한 대응을 한다. (미디어쿼리 사용)

반응형 디자인을 사용해서 모바일 디바이스나 테블릿 디바이스과 같이, 다른 뷰포트 사이즈와 확대/축소 상태에 맞게 디스플레이를 조정한다.
미디어 쿼리를 사용하면 유용하다.

@media screen and (min-width: 43em) {
  #nav {
    float: left;
    width: 24%;
  }
  #main {
    margin-left: 27%;
  }
}

키보드로만 접근 할 경우, 확인이 가능하도록 요소에 적절한 상태 스타일을 추가해준다.

버튼 마우스 포커스 상태, 메뉴, 접을 수 있는 아코디언 또는 미디어 플레이어와 같이 인터랙티브한 요소를 구현할 때, 키보드의 Tab 사용하는 경우 등을 고려한다.
예를 들어, button / a 엘리먼트 같이 포커스를 받는 엘리먼트를 제외하고, 사용자가 div / span 에 포커스를 받도록 하고 싶으면 tabindex를 사용해서 자바스크립트 처리를 한다.

가능하면 CAPTCHA 사용을 피한다.

사람이 사용자 입력을 생성했는지 확인하는 기능인 CAPTCHA 사용은 가급적 피한다.
꼭 사용해야 한다면 사용자가 이해하기 쉽고, 장애가 있는 사용자를 위한 대안을 포함해야 한다.
- 2가지 이상의 해결 방법을 제공한다.
- CAPTCHA가 아닌 사람이 확인할 수 있는 방법도 제공한다.