웹접근성 기본개념

웹접근성 기본개념

모든사람이 다양한 조건의 환경에서 손쉽게 웹 콘텐츠에 접근할 수 있도록 보장하는 것을 의미합니다. 
장애가 있거나(일시적인 장애를 지니게 되는경우를 포함) , 네트워크 환경이 좋지 못한 경우 혹은 모바일 기기를 사용하는 경우, 다양한 운영체제 및 웹 브라우저를 사용하는 경우 등 환경조건에 관계없이 웹콘텐츠에 접근할 수 있어 웹 사용성을 증가시키게 됩니다.

관리기준

한국형 웹 콘텐츠 접근성지침 KWCAG V.2.0

한국형 웹 콘텐츠 접근성 지침 2.0이 TTA 단체 표준으로 2009년 12월 22일에 제정되었습니다.

 

웹접근성 평가도구

웹접근성 평가툴 K-WAH 4.0

K-WAH 4.0은 한국형 웹 콘텐츠 접근성 지침 2.0에 따라 웹사이트(웹페이지)가 접근성 지침의 6개 세부지침을 준수하는지를 자동 점검하도록 지원해 주는 소프트웨어입니다.대체텍스트 제공

1. 제목제공

2. 기본언어 명시

3. 사용자 요구에 따른 새창 열기

4. 레이블 제공

5. 마크업 오류 방지

웹접근성 평가툴 N–WAX

NHN 에서 북 마클릿형 웹 접근성 평가 도구 PAJET 에서 모티브를 따와 내부 가이드를 바탕으로 제작한 웹 접근성 평가 툴입니다.
Firefox, Chrome의 부가기능으로 설치할수 있습니다.
Crome 설치시 : https://chrome.google.com/webstore/search/nwax
Firefox 설치시 : 메뉴 > 부가기능 > 확장기능 > N-WAX 검색 후 설치가능합니다.

웹접근성 평가툴 OPENWAX

NHN 에서 북 마클릿형 웹 접근성 평가 도구 PAJET 에서 모티브를 따와 내부 가이드를 바탕으로 제작한 웹 접근성 평가 툴입니다.
Firefox, Chrome의 부가기능으로 설치할수 있습니다.
Crome 설치시 : https://chrome.google.com/webstore/search/openwax
Firefox 설치시 : 메뉴 > 부가기능 > 확장기능 > OPENWAX 검색 후 설치가능합니다.

Colour_Contrast_Analyser Colour_Contrast_Analyser 다운로드

고대비 평가툴로 브라우져가 아닌 어플리케이션상에서 바로 color picker로 전경대비를 찍어볼 수 있습니다.

웹접근성 보장방법

의미에 맞는 마크업 (Sementic Markup)

의미론적 element는 브라우저, 개발자 모두에게 그의미를 명확하게 전달해주는 역할을 합니다. 예를 들면, 
비 의미론적 element : div 및 span는 아무의미가 없습니다.
의미론적 element : form, table과의 img는 그 의미와 역할이 있음을 나타냅니다.
제목을 나타내어주는 해딩요소인 h1 ~ h6 로 마크업시 웹접근성 보조기기에서 인식이 가능하며, 검색앤진에서 해당페이지를 잘 수집할 수 있도록 SEO점수가 향상되게 해줍니다. 
따라서, 기계가 인식할수 있도록 의미에 맞는 마크업을 한다는것은 웹표준, 웹접근성 그리고 SEO점수 향상을 위해서는 반드시 지켜야 할 부분입니다.

- 적절한 해딩 엘리먼트 사용 - 문서 구조 파악이 용이하도록 h1 ~ h6의 헤딩 엘리먼트를 순차적으로, 적절한 위치에 사용합니다.
적절하게 사용된 헤딩 엘리먼트를 통해 묷서의 목차를 자동으로 생성할 수도 있으며, 스크린 리더에서 지원하는 헤딩 갂 이동을 통해 사용자가 도달하고자 하는 정보에 더 빠르게 접근할 수 있습니다.

- 적절한 목록 엘리먼트 사용 - 순차/비순차/정의 목록 ol , ul, dl을 쓰임새에 맞게 사용하면 CSS가 적용되지 않은 화면에서도 각 목록의 의미를 확실히 전달할 수 있으며 스크린 리더에서는 전체 목록의 개수, 시작과 끝을 파악할 수 있습니다.

논리적 순서 보장

논리적 순서에 맞게 마크업을 한다는 것은 문서의 흐름과 동일하게 마크업 순서를 결정하는 것이다.
키보드를 통한 접근을 하거나, 스크린 리더를 통해 웹콘텐츠에 접근하는 사용자는 마크업 순서가 논리적이지 못하면, 원하는 콘텐츠에 도달하지 못하거나 문서를 이해하는 데 어려움을 겪게 됩니다.

 

잘못된 예 (X)

<ul>   <li>메뉴1</li>     <li>메뉴2</li>     <li>메뉴3</li> </ul> <ul>   <li>메뉴 1-1</li>   <li>메뉴 1-2</li> </ul>

바른 예 (O)

<ul>   <li>메뉴1         <ul>        <li>메뉴 1-1</li>        <li>메뉴 1-2</li>     </ul>   </li>   <li>메뉴2</li>   <li>메뉴3</li> </ul>

대체 텍스트 제공

이미지 대체 텍스트 제공

- 이미지 내용과 동일한 값을 alt 애트리뷰트에 표기하여, 이미지를 볼 수 없는 환경(스크린 리더, 이미지 서버 장애, 이미지 표시하지 않음 설정)에서도 내용을 확인할 수 있게 합니다.

- 이미지에 포함된 내용 그대로 대체 텍스트를 제공합니다. 대체 텍스트의 내용 일부만 제공되는 일이 없도록 합니다.

 

 

잘못된예 (X)

<img src="/common/images/ex/ex_wa_free.jpg" alt="공짜">

바른예 (O)

<img src="/common/images/ex/ex_wa_free.jpg" alt="마트ON 첫구매 팥빙수 공짜찬스">

 

텍스트가 많은 이미지의 대체 텍스트 제공

- 텍스트가 많은 이미지의 경우, 이미지를 배경으로 처리하고 텍스트는 배경으로 처리된 이미지 뒤에 숨긴다.

- 음성보조기기에서 이미지를 읽을때 보통 alt와 title값을 읽어주므로, alt로 대체할 텍스트를 넣어주고, 부가적인 긴텍스트가 들어가는 경우 title을 사용합니다. 150자가 넘어가면 음성보조기기에서 건너뛰는 경우가 있으므로 주의하여 150자 이하의 경우에 활용하는것이 좋다.

- 텍스트가 많은 150자 이상의 경우는 longdesc를 활용하여 html파일로 연결하는것이 좋다.

<img src="/imgtest.gif" alt="G마켓과 함께하는 8월 이벤트 행사내용" longdesc="/longdesc/gmkevent8.html">

추가 정보 필요 시 title 애트리뷰트 사용

title 애트리뷰트는 html, head, title, base, basefont, meta, script, param을 제외한 모든 엘리먼트에 사용할 수 있으며, 일반적으로 브라우저에서 툴팁으로 표시됩니다.

폼 엘리먼트

input(text, checkbox, radio, file, password), select, textarea와 같은 폰 엘리먼트에 기본적으로 label 엘리먼트가 부여되지 않은 경우, title 애트리뷰트를 이용하여 해당 엘리먼트에 대한 추가 정보를 표기 합니다. 단, type이 hidden 인 경우는 추가 정보를 표기하지 않아도 됩니다.

<input type="password" value="" title="비밀번호를 입력해주세요">
<input type="checkbox" name="2" id="check_id2" title="약관 동의">
<textarea id="babo5" rows="5" cols="30" title="약관">제 1조 1항 </textarea>
<select title="쇼핑몰 선택"> <option value="1">Gmarket</option><option value="2">Auction</option></select>

iframe

부득이하게 iframe을 사용해야 한다면 title에 iframe을 설명하는 내용을 표기합니다.

<iframe src="sbox.html" title="검색창 상세정보 미리보기"></iframe>

표의 구성

caption

caption 엘리먼트는 표의 제목을 나타내기위해 사용하며, 태그 바로 아래 선언합니다. 디자인 상으로 표의 제목이나 설명이 표기되어 있지 않더라도 caption 엘리먼트는 반드시 선언합니다.

thead, tfoot, tbody 엘리먼트 사용

thead>, tfoot, tbody 엘리먼트를 사용하여 머리글과 바닥글을 분리합니다. 본문이 길면 스크롤이 가능하게 하고 인쇄할 때 머리글과 바닥글은 반복적으로 인쇄할 수 있습니다.

tfoot>은 표에 바닥글 정보가 있을 때만 사용합니다.

th 엘리먼트 사용

th 엘리먼트를 사용하여 표의 데이터값이 무엇을 의미하는지 명확하게 전달합니다. 디자인에 머리글 정보가 표현되어 있지 않더라도 반드시 넣어 줍니다.

scope 애트리뷰트 사용

scope 애트리뷰트는 지정된 셀의 머리글 정보를 제공하여 행과 열의 데이터값을 쉽게 매칭하고 이해할 수 있도록 합니다. 아래의 예제 코드에서 th에 선언된 scope="col" 애트리뷰트는 같은 열의 셀에 대한 머리글 정보를 제공하며, td에 선언된 scope="row" 애트리뷰트는 같은 행의 셀에 대한 머리글 정보를 제공합니다.

<table summary="현재개봉 영화들의 예매순위입니다. 순위변동은 지난 1시간 대비 결과를 나타냅니다." >
  <caption>개봉중 영화들의 예매순위</caption>
  <thead>
    <tr>
      <th scope="col">순위</th>
      <th scope="col">영화이름</th>
      <th scope="col">순위변동</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1위</td>
      <td>디워</td>
      <td>2단계상승</td>
    </tr>
    …

온라인 서식 구성

fieldset 을 이용한 그루핑

그루핑할수있는 유사한 형태끼리의 사용자 입력 폼은 fieldset 엘리먼트를 이용하여 그루핑합니다. 이 때, fieldset 의 제목(캡션) 역할을 하는 값을 legend 안에 반드시 명시하여 접근성을 높이도록 합니다.

<fieldset>
  <legend>회웎정보</legend>
    … 
</fieldset>
<fieldset>
  <legend>문의 유형<legend>
    … 
</fieldset>

키보드 접근성 보장

장치 독립적인 이벤트 사용

키보드 접근성을 보장한다는 것은 마우스를 사용할 수 없는 환경(장치 없음, 시각 장애, 지체 장애, 일부 모바일)에서 웹을 이용할 수 있는 가장 기본적인 방법이다. 따라서, 모든 콘텐츠는 키보드로 접근이 가능해야 하며 마우스 의존적인 이벤트 핸들러는 사용하지 않습니다.

마우스 의존적인 이벤트, 키보드 의존적인 이벤트, 장치 독립적인 이벤트에 관한 테이블

마우스 의존적인 이벤트	키보드 의존적인 이벤트	장치 독립적인 이벤트
onMouseDown	onKeyDown	onClick
onMouseMove	onKeyPress	onFocus
onMouseOut	onKeyUp	onBlur
onMouseOver		onSelect
onMouseUp

키보드 단축키 제공

accesskey 애트리뷰트를 이용한 단축키 제공

accesskey 애트리뷰트는 지정된 단축키를 실행할 경우 해당 엘리먼트로 포커스를 이동합니다. 중요한 기능에 단축키를 제공하면 키보드 접근성이 좋아진다. accesskey 애트리뷰트의 사용은 선택 사항이다.

accesskey 애트리뷰트가 사용할 수 있는 엘리먼트는 a, area, button, input, label, legend, textarea이다. accesskey 사용 예는 다음과 같습니다.

<input type="text" name="search" id="search" title="검색어입력" accesskey="S"><input type="text" name="uid" id="uid" title="로그인ID" accesskey="L">

스킵 내비게이션 제공

스킵 내비게이션은 스크린 리더를 통해 웹에 접근할 때 서비스 전체에 공통으로 사용되는 콘텐츠를 매번 반복해서 인지 않도록 합니다. 콘텐츠의 가장 윗부분에 스킵 내비게이션을 선언하여 문서 내의 콘텐츠 정보가 먼저 읽히지 않도록 합니다. 또한 스킵 네비게이션은 키보드로 접근했을 때, 화면에서 육안으로 확인 가능해야하므로 서비스 담당자와 UX/디자인을 협의하여 제공하도록 해야합니다.

<body>
<a href="#content">본문 바로가기</a>
<div id="header"> … </div>
<div id="content">
본문
</div>

생략된 제목 표시

문서를 올바르게 이해할 수 있도록 생략된 제목을 표시합니다. 일반 사용자는 활성화된 디자인을 통해 제목을 인식할 수 있지만, 이미지를 볼 수 없는 상황, 특히 스크린 리더를 사용하는 시각 장애인은 생략된 제목을 인식 할 수 없다. 따라서 HTML 구조적으로 제목을 파악할 수 없는 내용일 때는 반드시 제목을 표시합니다.

<style type="text/css"> .blind{overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0} </style>
<ul>
  <li class="on"><a href="…">BRAND ON</a></li>
  <li><a href="…">롯데백화점</a></li>
  <li><a href="…">해외직구</a></li>
</ul>
<div id="…">
  <h3 class="blind">BRAND ON</h3>
  <ul>
    <li>
      <a href="…">지오다노 스판 반바지 18,810</a>
    </li>
    <li>
      <a href="…">CJ몰 썸머 시즌오프 7% 슈퍼쿠폰 지급 - 매일 선착순 2천명 추가할인 혜택! - 1만원 이상 구매시사용 7% 슈퍼쿠폰</a>
    </li>
    <li>
      <a href="…">티비제이 빅포티 에리티 5,600</a>
    </li>
    <li>
      <a href="…">팬톳 후드 원피스 48,060</a>
    </li>
  </ul>
</div> 
<div id="…">

배경 색상 제공(모바일)

이미지를 불러오지 못하거나 느린 네트웍 속도로 인해 이미지를 빠르게 가져오지 못하는 경우에도 콘텐츠를 이용할 수 있도록 배경 색상을 제공합니다. 배경 색상은 디자인 된 색상 중 가장 넓은 면적을 차지하는 색상에서 추출하여 지정하며, 동일한 색상이지만 콘텐츠 구분이 필요한 경우 채도나 명도를 조절해줍니다.