[사용자 친화 웹] 웹 접근성

jungmin Lee·2023년 9월 18일

웹 접근성(Web Accessibility)

웹 접근성의 개념

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 웹 접근성을 갖추면 웹에 접근했을 때 어떤 상황에서도 항상 동등한 수준의 정보를 제공받을 수 있도록 보장받을 수 있다.

웹 접근성 실태

우리나라의 웹 접근성 수준은 높은 정보화 수준에 비하면 높지 않은 것을 확인할 수 있다. 공공기간과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 되어있지만 웹 접근성을 갖춘 사례는 찾아보기 힘들다

웹 접근성을 갖추면 얻을 수 있는 효과

▷ 사용자층 확대
웹 접근성을 확보하면 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있으므로 새로운 고객층을 확보할 수 있다

▷ 다양한 환경 지원
정보 소외 계층이 아니라도 정보에 접근하기 어려운 상황이 발생할 수 있으며 웹 접근성을 향상시키면 다양한 환경과 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있다.

▷ 사회적 이미지 향상
기업의 사회적 책임이 중요성이 증가하면서 웹 접근성을 확보하면 기업의 사회적 이미지가 향상되면서 충성 고객도 확보할 수 있는 가능성이 커진다.

웹 콘텐츠 접근성 지침

W3C이 웹 전근성 권고안인 'WCAG(Web Content Accessibility Guidelines) 2.0'을 기반으로 작성된 '한국형 웹 콘텐츠 접근성 지침 2.0'에 대한 내용 정리이다.

인식의 용이성(Perceivable) :모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

▷ 적절한 대체 텍스트
텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
화면을 인식할 수 없는 사용자나 상황을 대비해서 대체 텍스트를 제공할 필요가 있다.
배경 이미지와 같이 인식할 필요가 없는 이미지, 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에는 alt값으로 빈 문자열을 주는 것이 좋다.

<img src="이미지 주소" alt="이미지에 대한 대체 텍스트" />

▷ 자막 제공
멀티미디어 콘텐츠에는 자막, 원고, 수화를 제공해야 한다.
비디오 요소 안쪽에 track요소를 사용하여 자막 파일을 불러온다면 WebVTT(Web Video Text Tracks, vtt 파일)이나 Timed Text Markup Language(TTML)형식을 사용해야 한다.

<video ... >
	<track src="자막.vtt" kind="captions" />
</video>

▷ 색에 무관한 콘텐츠 인식

콘텐츠는 색에 관계없이 인식될 수 있어야 하며 콘텐츠에 테두리 설정하기, 콘텐츠에 레이블 달기로 문제를 해결할 수 있다

▷ 명확한 지시사항 제공
지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. 시각 장애를 가진 사용자는 어떤 버튼을 가르키는 것인지 알 수 없을수 있으므로 해당 버튼을 설명하는 대체 텍스트를 작성하거나 청각 장애를 가진 사용자는 지시사항을 제대로 인식할 수 없으므로 시각적 피드백도 함께 제공해야 한다.

▷ 텍스트 콘텐츠 명도 대비
텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1이상이어야 한다.
텍스트가 18pt 또는 굵은 14pt 이상, 확대 가능한 페이지, 비활성화 된 콘텐츠, 장식 목적의 콘텐츠인 경우에는 명도 대비가 3대 1까지는 허용된다

▷ 자동 재생 금지
스크린 리더를 사용하는 경우에는 자동으로 재생된 소리와 겹쳐 페이지 내용을 파악하기 어려우므로 자동으로 소리가 재생되지 않아야 한다.
불가피하게 재공해야 하는 경우에는 가장 먼저 위치시켜 정지할 수 있게 구현하기, ESC를 눌러 정지, 3초 내에 정지를 갖춰야 한다.

▷ 콘텐츠 간 구분
웹 페이지를 구성하는 모든 콘텐츠는 테두리, 구분선, 무늬, 명도대비, 간격 등 시각적으로 구분할 수 있는 방법을 사용하여야 한다.

▷ 인라인 스타일링 사용
웹 표준으로 HTML, CSS, JavaScript 등의 영역이 분리되어 얻게 되는 여러 이점들을 다시 합치는 것과 같으므로 코드를 분리해서 작성해주는 것이 좋다

운용의 용이성(Operable) :사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

▷ 키보드 사용 보장
모든 사용자가 마우스를 사용할 수 있는 것이 아니므로 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

▷ 초점 이동
키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
초점은 일반적으로 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 이동하게 된다.

▷ 조작 기능
사용자 및 입력 컨트롤은 조작 가능하도록 제공되어야 한다.

▷ 응답 시간 조절
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 하며 충분한 시간, 종료 안내, 조절 수단을 제공해야 한다.

▷ 정지 기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
자동 변경 슬라이드(캐러셀 슬라이드) - 이전, 다음, 정지 기능을 제공해야 한다
자동 변경 콘텐츠 -실시간 검색어와 같이 자동으로 변경되는 콘텐츠는 이전, 다음, 정지 기능이 없더라도 접근했을 때 모든 콘텐츠를 확인할 수 있어야 한다.

▷ 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠는 제공하지 않아야 한다.
번쩍이는 콘텐츠가 차지하는 면적이 전체 화면의 10%미만이어야 하며 사전에 경고하고 중단할 수 있는 수단을 제공하고 시간을 3초 미만으로 제한해야 한다.

▷ 반복 영역 건너뛰기
콘텐츠의 반복되는 영역은 가장 앞에 건너뛰기 링크 제공하거나 메뉴를 필요할 때만 열 수 있도록 만들어서 건너뛸 수 있어야 한다.

▷ 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

▷ 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

이해의 용이성(Understandable) :콘텐츠는 이해할 수 있어야 한다.

▷ 기본 언어 표시
주로 사용하는 언어를 명시해야 한다.

<html lang="ko">

▷ 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥략 변화 등)은 실행되지 않아야 한다.
페이지 진입 시에 팝업이 뜨지 않아야 하고, 모달창이 있는 경우에는 상단에서 가장 먼저 제어할 수 있도록 해야 한다. 새 창의 떴을 경우에는 새창에 접근하게 되었다는 것을 알려줘야 한다.

<a href="...">페이지<span class="blind">새 창</span></a>
<a href="..." title="새 창">페이지</a>
<a href="..." target="_blank">페이지</a>

▷ 콘텐츠 선형 구조
콘텐츠는 논리적인 순서로 제공해야 한다.

// 잘못 작성한 예시
<div>탭1</div>
<div>탭2</div>
<div>탭1 관련 내용</div>
<div>탭2 관련 내용</div>

// 해결 방법
<div>탭1</div>
<div>탭1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>

▷ 표의 구성
표는 이해하기 쉽게 구성해야 한다.
테이블 요소 안에 caption요소를 사용해서 표에 제목을 제공하거나 표의 셀은 제목 셀 와, 데이터 셀 를 사용하여 구분되도록 구성해야 한다. 표의 구조가 복잡할 경우에는 scope나 id, headers 속성을 사용하여 작성한다.

<table>
  <caption>Cmarket 판매총액</caption>
      <thead>
         <tr>
            <th scope="col">(col)<br/>상품명</th>
            <th scope="col">(col)<br/>판매가</th>
            <th scope="col">(col)<br/>판매량</th>
            <th scope="col">(col)<br/>판매총액</th>
          </tr>
        </thead>
        <tbody>
          <tr>
             <td scope="row">(row)<br/>2023년 달력</td>
             <td>12,000원</td>
             <td>6개</td>
             <td>72,000원</td>
             </tr>
           <tr>
             <td scope="row">(row)<br/>수면 안대</td>
             <td>2,900원</td>
             <td>4개</td>
             <td>11,600원</td>
            </tr>
            <tr>
              <td scope="row">(row)<br/>잉어 가방</td>
              <td>3,900원</td>
              <td>7개</td>
              <td>27,300원</td>
             </tr>
             <tr>
                <td scope="row">(row)<br/>와플기계</td>
                <td>9,900원</td>
                <td>5개</td>
                <td>49,500원</td>
              </tr>
            </tbody>
</table>
<table>
    <caption>Cmarket 판매총액</caption>
        <thead>
           <tr>
             <th id="A">상품명<br/>(A)</th>
             <th id="B">판매가<br/>(B)</th>
             <th id="C">판매량<br/>(C)</th>
             <th id="D">판매총액<br/>(D)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td id="a">2023년 달력<br/>(a)</td>
              <td headers="B a">12,000원<br/>(B a)</td>
              <td headers="C a">6개<br/>(C a)</td>
              <td headers="D a">72,000원<br/>(D a)</td>
             </tr>
             <tr>
               <td id="b">수면 안대<br/>(b)</td>
               <td headers="B b">2,900원<br/>(B b)</td>
               <td headers="C b">4개<br/>(C b)</td>
               <td headers="D b">11,600원<br/>(D b)</td>
              </tr>
          </tbody>
</table>

▷ 레이블 제공
사용자 입력에는 대응하는 레이블을 제공해야 한다.
<input>요소에 id를 설정하고 <label>요소의 for 속성으로 연결하거나 title속성을 사용한다
위의 방법으로 해결이 되지 않을 경우에는 WAI-ARIA의 aria-label 속성을 사용할 수 있다.

<label for="user_id">아이디</label>
<input id="user_id" type="text" placeholder="아이디" />
<input type="text" title="아이디" placeholder="아이디" />
<input type="text" aria-label="아이디" placeholder="아이디" />