웹 접근성

14 Jan 2020 in Sidemenu / UI

[웹 접근성 파헤치기~]

웹 접근성

접근성

사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도

웹 접근성

어떠한 사용자(장애인, 노인 등)가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것
모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것

웹 접근성을 지켜야 하는 이유

장애인 차별 금지법(장차법)

장애인 차별을 금지하는 법으로 장차법에서는 2013년 4월 11일부터 장애인들도 비장애인과 동등하게 전자정보 및 비전자정보를 사용할 수 있도록 해야 한다는 내용이 포함되어있다.
따라서 장차법이 정해져 있기 때문에 웹 접근성을 지켜야 한다.

1. 장애

신체적 또는 정신적 결함이 있는 것 뿐만 아니라 정보를 얻지 못하도록 방해하는 것도 장애가 된다.

웹의 힘은 보편성에 있다.
장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수요소다. - 팀 버너스 리

2. 장애 환경

전맹 시각 장애
- 시력이 전혀, 거의 없어 앞을 볼 수 없다.
- 청각적 : 스크린리더가 웹에 존재하는 이미지, 글씨를 음성으로 읽어주어 이를 통해 정보를 파악
- 촉각적 : 점자 정보 단말기를 통해 점자를 손으로 읽으면서 웹 페이지의 내용을 인식
저시력 시각 장애
- 안경이나 렌즈, 치료, 수술로 해결할 수 없는 시력으로써 일상생활이 어려움
- 시야 장애(페이지의 일부만 봄) -> 화면 확대 기능 이용
- 색약, 색맹 -> 더 선명하게 웹 페이지를 볼 수 있도록 고대비 사용
중증 운동 장애
- 손 또는 팔을 사용하지 못하고 목만 움직일 수 있는 장애 환경
- 손을 대신하여 타이핑 가능한 포인터 스틱을 머리에 고정하여 키보드를 조작하고 자판이 큼직한 빅키 키보드와 타이핑 스틱이 엇나가지 않도록 보조해주는 키가드로 보다 정확하게 타이핑 할 수 있다.
손 운동 장애
- 한 손만 사용 가능하며, 마우스나 키보드의 정교한 조작이 어려운 장애 환경
- 한 손자용 키보드는 한 손으로만 사용하기 때문에 일반 키보드와 비교했을 때 위치와 모양이 다르고 트랙볼 마우스는 큰 볼을 굴려서 마우스 포인터를 쉽게 이동할 수 있으며, 별도로 제공되는 버튼을 한 번만 클릭해 정교한 조작을 쉽게 할 수 있다.
청각 장애
- 들을 수 없기 때문에 알림음, 영상 같은 정보를 제공받을 수 없다.
- 안내 문구나 자막 같은 화면의 글씨를 읽는다.
맥 사용자
- 맥 환경인데 웹을 윈도우에서만 사용이 가능한 경우도 웹에 접근이 불가능하기 때문에 장애이다.
느린 인터넷
- 인터넷이 느린 경우 로딩이 잘 안되어 UI가 깨지는 경우는 오히려 비장애인들이 웹 페이지를 인식하는데 불편함을 줄 수 있다.

WCAG

W3C에서 발표한 웹 콘텐츠 접근성 지침

KWCAG

해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침

1. 적절한 대체 텍스트 제공

텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

alt로 대체 텍스트 제공 - 텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative속성인 ‘alt’에 적용해준다.
```
<img src="potato.jpg" alt="감자 사진입니다.">
```
img 요소뿐만 아니라 추가적으로 input의 type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해준다.
마크업으로 대체 텍스트 제공 - 대체 텍스트가 너무 긴 경우에는 이미지에는 대체 텍스트를 빈 값으로 제공하고 대체 텍스트를 마크업으로 제공한다.
```
<img src="160314.png" alt="">
<p class="blind">
    주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외  
    2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대
</p> 
```
여기서 해당 마크업을 보이지 않게 처리할 때 “display:none”이나 “visibility:hidden”을 사용하면 스크린리더에서 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 한다.

데이터 차트나 복잡한 콘텐츠 - 데이터 차트나 복잡한 콘텐츠도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 한다.

<img src="graph.png" alt="" />
<table class="blind">
    <caption>...</caption>
        <thead>
	 <tr>
	    <th scope="col">년도</th>
	    <th scope="col">학과</th>
	    <th scope="col">지원 수</th>
	</tr>
    </thead>
    <tbody>
       <tr>
           <td>2003</td>
           <td>언어학</td>
           <td>10200명</td>
       </tr>
     ...
    </tbody>
</table>

의미 있는 이미지 - 의미 있는 이미지의 경우에도 대체 텍스트를 시각적으로 보는 것과 동등하게 제공해야 한다.
```
<img src="btn_next.png" alt="다음 콘텐츠 보기">
```
배경 이미지 - 의미 있는 이미지가 이미지 요소가 아닌 배경으로 처리된 경우에도 다음과 같이 대체 텍스트를 제공해야 한다.
```
<a href="#" class="link_next">다음 콘텐츠 보기</a>
```
```
.link_next{
    background-image:url('./img/icon_next.png');
}
```
의미 없는 이미지 - 단순한 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우는 대체 텍스트로 공백 문자, 즉 다음과 같이 파일명을 읽는 일이 없어 아무것도 읽어주지 않도록 alt를 빈 값으로 제공해야 한다.
```
<img src="123456.jpg" alt="">
```
이모티콘 이미지 - 이모티콘의 의미가 다 다른 만큼 ‘미안해하는 브라운’처럼 시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 한다.
```
<img src="brown_img_5.png" alt="미안해하는 브라운"> 
```
QR코드 이미지 - QR코드의 경우 비장애인들은 이미지를 찍어서 링크를 연결할 수 있지만 시각적으로 인식할 수 없는 사용자들은 해당 링크 주소를 알 수 있도록 대체 텍스트를 제공해야 한다.
```
<a href="http://www.naver.com">
    <img src="qr_code.png" alt="http://www.naver.com 바로 가기 QR코드">
</a> 
```
썸네일 이미지 - 이미지와 텍스트를 하나의 링크로 묶어주고 대체 텍스트가 이미 존재하기 때문에 이미지에는 alt를 빈 값으로 제공해 주는 것이 좋다.
```
<a href="…">
    <img src="thumb01.jpg" alt="">
    <span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a> 
```
캡차 이미지 - 캡차 이미지에 대체 텍스트로 이미지에 있는 텍스트를 제공하면 스크린리더를 사용하는 분들에게는 정답을 알려주는 것이 되므로 캡차 이미지에는 대체 텍스트로 ‘캡차’ 또는 ‘보안 문자’라고 제공하고 따로 음성으로 들을 수 있도록 청각적 캡차를 제공해야 한다.
```
<img src="text.jpg" alt="보안 문자">
```
사용자가 업로드하는 이미지 - 사용자가 업로드하는 이미지의 경우 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 툴을 제공해야 한다. 사용자가 입력한 내용이 대체 텍스트로 제공되도록 구현한다.

2. 자막 제공

멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.

멀티미디어 대체 수단 제공 - 청각적으로 내용을 인식할 수 없는 사용자가 시각적으로도 인식할 수 있도록 멀티미디어 콘텐츠에 포함된 음성 및 대사와 동등하게 대체 수단을 제공해야 한다. 대체 수단은 자막, 대본, 원고, 수화 중 하나로 제공한다.
사용자가 업로드하는 멀티미디어 - 제3자가 영상을 업로드하는 경우 사용자가 대체 콘텐츠를 제공할 수 있도록 툴을 제공해야 한다.
음성이 나오지 않는 영상 - 멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우는 시각적으로만 인식이 가능하므로 따로 원고를 제공하는 등의 방법을 통해 대체 콘텐츠를 제공한다.

3. 색에 무관한 콘텐츠 인식

콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

색으로만 구분한 사례 - 차트, 슬라이드 버튼 선택 여부, 페이지네이션, 탭 버튼 선택 여부
색으로만 구분한 경우 색을 구분하기 힘든 사용자는 인식하기 어렵기 때문에 패턴, 굵기, 모양, 테두리 등의 다양한 방법으로 구분해야 한다.

4. 명확한 지시사항 제공

지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

모양으로만 정보 제공 - 회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 *표시는 필수 입력 사항입니다.라는 설명을 제공하거나 (*)영역에 필수라는 정보를 숨김 텍스트로 제공
위치나 방향으로만 정보 제공 - 왼쪽의 숫자를 입력하라고 방향으로만 제시하는 경우, 시각적으로 인식이 어려운 사용자의 경우 왼쪽이 어딘지 알기 힘들다.
크기로만 정보 제공 - 작은 버튼을 클릭하세요 의 경우 대상이 되는 버튼이 작은 버튼이라는 대체 텍스트를 포함하고 있지 않을 경우 시각적으로 인식이 어려운 사용자는 어떤 요소를 지칭하는지 알 수 없다.
색으로만 정보 제공 - 보라색 지역은 관할 지역입니다.의 경우 서울, 경기, 인천지역은 관할 지역입니다.라고 명확하게 정보를 제공해야 한다.

5. 텍스트 콘텐츠의 명도 대비

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

텍스트 명도 대비 - 페이지에 존재하는 모든 텍스트 뿐만 아니라 텍스트가 이미지로 된 경우에도 명도 대비를 준수해야 한다.
텍스트와 배경색 간의 명도 대비는 4.5:1 이상이 되도록 구현해야 한다.
의미 있는 이미지 명도 대비 - 텍스트 뿐만 아니라 의미 있는 이미지의 경우에도 이미지를 인식할 수 있도록 명도 대비를 준수해야 한다.
확대 가능한 브라우저에서 명도 대비 - 확대가 가능한 브라우저에서는 최소 3:1 이상이면 준수이다. 그래도 명도 대비가 높을수록 가독성이 높기 때문에 4.5:1 이상이 되도록 구현해야 한다.

6. 자동 재생 금지

자동으로 소리가 재생되지 않아야 한다.

페이지 진입 시 자동 재생되는 3초 이상의 배경음 콘텐츠(동영상 포함) - 아무것도 모르는 상태로 페이지 진입 시 스크린리더 음성과 겹치게 되면서 페이지의 내용을 인식하기 어렵다.
따라서 콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공되어야 하고 사용자가 요구할 경우에만 재생 가능하도록 제공해야 한다.
불피하게 제공할 경우 해결 방안
- 3초 내에 정지
- ESC 키 선택시 정지
- 소스 상 가장 먼저 제공하여 정지 기능 실행 가능하도록 구현

7. 콘텐츠 간의 구분

이웃한 콘텐츠는 구별될 수 있어야 한다.

테두리 이용하여 구분
콘텐츠 사이에 시각적인 구분선을 삽입하여 구분
서로 다른 무늬를 이용하여 구분
콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분
줄 간격 및 글자 간격을 조절하여 구분
기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분

8. 키보드 사용 보장

모든 기능은 키보드만으로도 사용할 수 있어야 한다.

마우스 오버 시 드롭 다운 메뉴가 노출
=> 키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현
자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출
=> 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현
특정 버튼에 마우스 오버 시 레이어 노출
=> 키보드 접근 시에도 레이어가 노출되도록 구현
이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용
=> 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현
a링크 요소에 href속성이 없는 경우
=> 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href속성을 반드시 제공
a링크에 href속성은 있지만 onfocus=”this.blur();”가 적용이 되어 있는 경우
=> 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 onfocus=”this.blur();”제거하고 구현
키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우
=> 키보드가 함정에 빠지지 않고 마우스 사용시와 동일하게 접근 가능하도록 구현

9. 초점 이동

키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

논리적 초점 이동
- 스크린리더 사용자와 키보드 사용자 모두 초점이 논리적으로 이동해야 웹 페이지를 탐색하는데 어려움이 없다.
- 따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야 한다.
초점 표시
- 마우스가 아닌 키보드로 웹을 사용하는 사람들은 초점이 어디에 위치하는지 알 수 있어야 한다
- 시각적으로 초점이 보이지 않으면 어디에 초점이 있는지 알 수가 없어서 컨트롤을 선택할 수 없다.
- 따라서 키보드 접근 시 해당 컨트롤이 초점을 받았음을 시각적으로 구별하 수 있어야 한다.

10. 조작 가능

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

컨트롤 대각선 길이 6mm 이상
- 정교한 마우스 조작을 할 수 없는 사람들은 컨트롤이 너무 작으면 클릭하기 불편하다.
- 따라서 웹에서 컨트롤의 대각선 길이는 6mm 이상으로 구현되어야 한다.
컨트롤 테두리 안쪽으로 1px이상의 여백
- 컨트롤이 연달아 있을 때 1px이상의 여백이 있지 않으면 컨트롤 구분도 힘들고 잘못 선택할 확률도 높다.
- 따라서 컨트롤은 테두리 안쪽으로 1px이상의 여백을 두어야 한다.

11. 응답 시간 조절

시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

시간 연장이 불가능한 콘텐츠
- 웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다.
- Ex) 충분한 시간 제공, 종료 안내, 조절 수단 제공
페이지 자동 전환
- 페이지 진입 시 바로 리프레시 되는 것이 아니라 Meta 요소의 refresh속성 등을 사용하여 일정 시간이 지난 뒤 페이지가 자동 전환되는 경우도 오류
- 따라서 이전 예시처럼 연장할 수 있는 수단을 제공하거나 이를 해제할 수 있는 수단을 제공해야 한다.
- 스크린리더 사용자와 키보드 사용자도 이를 인지하고 수단까지 가는데 시간이 부족하지 않아야 한다.

12. 정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

자동 변경 슬라이드 - 이전, 다음, 정지 기능을 제공해야 하며 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정된다.
자동 변경 콘텐츠 - 실시간 검색어처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지는 않더라도 마우스 오버 시와 키보드 접근 시 모든 콘텐츠가 보이고 탐색 가능하면 준수하다.

13. 깜빡임과 번쩍임 사용 제한

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

광과민성 발작 : 오랜 시간 불규칙적으로 깜빡거리는 광과에 자극받아 생기는 간질 발작

해결 방안

번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10% 미만
시간을 3초 미만으로 제한
사전에 경고하고 중단 가능한 수단을 제공

14. 반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

반복 영역 건너뛰기 제공 방법
- 마크업 최 상단에 위치
- 건너뛰기 링크가 페이지 내에 존재
- 키보드 접근 시 화면에 노출
- 하단 메뉴로 바로 가기와 같은 위치 정보 제공은 부적절(4번 명확한 지시 사항 제공에도 영향을 미침)

<body>
    <div id="skip_nav">
        <a href="#content">본문 바로 가기</a>
        <a href="#menu">주 메뉴 바로 가기</a>
        …
    <div id="content">
        …
    <div id="menu">
        …
</body>

15. 제목 제공

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

페이지 제목 제공
- 웹 페이지의 제목은 유일하고 서로 다르게 제공해야 한다.
- 스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문에 페이지 제목을 적절하게 제공해야 한다.
- 페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위분류로 적절하게 제공해야 한다.
프레임 제목 제공
- 프레임이나 아이프레임에도 각 프레임을 설명하는 간단 명료한 제목을 제공해야 한다.
- 웹 페이지를 구성하는 모든 프레임에 제목을 제공하면 시각 장애인, 지적 장애인, 중증 지체 장애인 등의 사용자가 프레임 제목을 통해 프레임 간을 매우 편리하게 이동 할 수 있다.
콘텐츠 제목 제공
- 뉴스스탠드 콘텐츠는 헤딩 태그로 콘텐츠의 제목을 뉴스스탠드라고 제공하는 것이 적절하며, 뉴스스탠드랑 동일한 depth에 있는 콘텐츠는 하위나 상위 콘텐츠가 아니기 때문에 동일한 헤딩 태그로 일관성 있게 제목을 제공해야 한다.
특수 기호 사용 제한
- 연속된 특수기호를 사용하게 되면 스크린리더에서 불필요한 음성을 반복해서 출력하게 되므로 시각적인 장식을 위해 반복되는 특수문자는 제공하지 않아야 하며 특수 기호는 1개까지만 사용 제한을 두고 있다.

16. 적절한 링크 텍스트

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

빈 링크
- 아래와 같은 빈 링크가 존재하는 경우 스크린리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없기 때문에 의미 없는 빈 링크는 제거해야 한다.
```
<a href="…" title=""></a> 
```
독립적 이미지 링크
- 이미지를 독립적으로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 적절한 링크 텍스트를 제공해야 한다.
```
<a href="#">
    <img src="btn_next.png" alt="다음 콘텐츠 보기">
</a> 
```
독립적 배경 이미지 링크
- 링크에 의미 있는 배경 이미지를 적용한 경우에도 이미지 대체 텍스트이자 링크 텍스트를 적절하게 제공해야 한다.
```
<a href="#" class="link_next">다음 콘텐츠 보기</a>
```
```
.link_next{
    background-image: url('./img/icon_next.png');
}
```
썸네일 링크
- 이미지와 텍스트를 하나의 링크로 묶어주고 중복되지 않도록 이미지에는 alt를 빈 값으로 제공하고 링크 텍스트를 제공해 주는 것이 좋다.
```
<a href="…">
    <img src="thumb01.jpg" alt="">
    <span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a> 
```
명확한 링크 제공
- URL만 링크로 제공하는 것보다는 해당 주소의 목적을 함께 제공하는 것이 좋다.
- 즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 한다.
```
<p>
    더 자세한 사항을 보려면
    <a href="#">여기</a>를 클릭하세요.
</p>
```

17. 기본 언어 표시

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

기본 언어 표시
- 기본 언어 표시는 HTML 태그에 lang 속성을 사용하여 ISO639-1에서 지정한 두 글자로 된 언어 코드로 제공해준다.
- 한국어는 ko로 기본 언어를 지정하고, 영어 페이지는 en으로 설정해주면 된다.
- 기본 언어 설정을 해둔 상태에서 중간에 다른 언어가 존재한다면 해당 영역에만 lang 속성으로 적절한 언어를 제공해주면 된다.

문서 타입별 기본 언어 표시

HTML 4.01/HTML5 표준
```
<html lang="ko">
```

XHTML 1.0 표준

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

XHTML 1.1 표준

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">

18. 사용자 요구에 따른 실행

사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

페이지 진입 시 뜨는 새 창(팝업)
- 사용자가 예측할 수 없는 상황에서 페이지 진입 시 새 창이 열리는 경우 오류이므로 새 창을 제공하지 않아야 한다.
화면을 가리는 레이어 팝업
- 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나 화면을 가리지 않고 가장 상단에 에이어 팝업을 제공해야 한다.
사전에 인식할 수 없는 새 창
- 특정 링크 클릭 시 새 창이 뜨는 경우 스크린리더 사용자는 새 창이 뜬 것을 인지하기 힘드므로 이전 창인 줄 알고 계속 탐색할 수도 있다.
- 키보드 사용자도 다시 해당 창으로 돌아와서 키보드 접근을 해야하는 불편함이 있다.
- 새 창 제공 방법
```
<a href="…">이용약관<span class="blind">새 창</span></a>
     
<a href="…" title="새 창">이용약관</a>
     
<a href="…" target="_blank">이용약관</a>
```
- title과 target으로 제공하는 방법은 센스리더 외 다른 스크린리더에서는 새 창이라고 읽어주지 않으므로 blind로 새 창이라는 텍스트를 넣어주는 방법이 가장 확실한 해결방법이다.
컨트롤 선택 시 기능 실행
- 사용자가 콤보 상자, 라디오 버튼, 체크 상자 등의 컨트롤을 선택했을 때 기능이 실행되거나 서식 제출이 일어나지 않아야 한다.
select에 onchange 이벤트 적용
- select에 onchange 이벤트가 적용되어 option을 선택하자마자 페이지가 이동된 경우 오류
- onFocus나 onKeypress등의 이벤트에 의해, 포커스를 옮기는 동작만으로, 초점을 받은 것만으로, 새 창이나 레이어가 뜨거나 페이지가 바뀌는 경우 모두 사용자가 원하지 않은 기능이 실행되는 것이므로 오류이다.
- 즉, 사용자가 의도하지 않은 기능이 실행되지 않도록 구현해야 한다.

19. 콘텐츠의 선형 구조

콘텐츠는 논리적인 순서로 제공해야 한다.

탭 제목-내용 콘텐츠
- 탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있다.
- 따라서 메뉴 내용 메뉴 내용 순으로 마크업하거나 메뉴끼리 내용끼리 마크업하되 내용에 해당 메뉴 제목을 제공해주어야 한다.
  1. 탭 1제목 > 탭 1내용 > 탭 2제목 > 탭 2내용
    <a href="…">상품</a> <div>상품 내용</div> <a href="…">쇼핑몰</a> <div>쇼핑몰 내용</div> …
  2. 해당 탭 콘텐츠에 제목 제공
    <ul> <li><a href="…">상품</a></li> … </ul> <div> <h2 class="blind">상품</h2> 상품 내용 </div>

제목-내용-더 보기 콘텐츠

논리적인 순서는 제목 다음, 내용 다음, 더 보기 버튼 순이므로 마크업도 이 순서대로 해주어야 한다.

<div class="noti_section">
    <h3><span class="blind">공지사항</span></h3>
        <ul class="lst_noti">
            <li>
                <a href="…">[복구완료] 10/19 (금), '뮤직'...</a>
            </li>
            <li>
                <a href="…">[복구완료] 10/17 (수), '지도'...</a>
            </li>
        </ul>
        <a href="…"><span class="blind">공지사항</span>더보기</a>
</div>

20. 표의 구성

표는 이해하기 쉽게 구성해야 한다.

데이터 표

비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으면서 인식한다.
스크린리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터 셀이 구분되도록 구성해야 한다.
표의 구성
- 제목 셀과 내용 셀 구분
- 제목과 요약 정보 제공

XHTML, HTML4 - caption으로 제목을 제공, summary속성으로 요약 정보를 제공

<table summary="부서별 직원 수, 합계 정보">
	<caption>직원 관리 현황 표</caption>
	<thead>
		<tr>
			<th scope="col">번호</th>
			<th scope="col">부서</th>
			<th scope="col">직원 수</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="row">합계</th>
			<td></td>
			<td>15명</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>1</td>
			<td>총무부</td>
			<td>5명</td>
		</tr>
		<tr>
			<td>2</td>
			<td>인사부</td>
			<td>4명</td>
		</tr>
		<tr>
			<td>3</td>
			<td>기획부</td>
			<td>6명</td>
		</tr>
	</tbody>
</table>

HTML5 - summary속성이 없어졌으므로 caption에 제목과 요약 정보를 모두 제공

<table>
	<caption>
		<strong>직원 관리 현황 표</strong>
		<span>부서별 직원 수, 합계 정보</span>
	</caption>
	<thead>
		<tr>
			<th scope="col">번호</th>
			<th scope="col">부서</th>
			<th scope"col">직원 수</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>총무부</td>
			<td>5명</td>
		</tr>
             …
</table> 

복잡한 표 - id와 headers 속성을 이용하여 제목 셀과 내용 셀을 보다 정확하게 연결

<thead>
		<tr>
			<th rowspan="2" scope="col" id="date">기준일</th>
			<th colspan="2" scope="col" id="gsale">경기도 매매가</th>
		</tr>
		<tr>
			<th scope="col" id="price">면적단가</th>
			<th scope="col" id="change">변동액</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row" id="d20181020">2018.10.20</th>
			<td headers="date d20181020 gsale price">902</td>
			<td headers="date d20181020 gsale change">유지 0</td>
		</tr>
		<tr>
			<th scope="row" id="d20181021">2018.10.21</th>
			<td headers="date d20181021 gsale price">904</td>
			<td headers="date d20181021 gsale change">상승 2</td>
		</tr>
	</tbody>

제목 셀마다 각각 다른 id 값을 부여하고, 내용 셀과 관련이 있는 제목 셀의 id 값을 headers에 나열해준다.

레이아웃 테이블
- 데이터 테이블은 테이블 태그로 마크업하는 것이 맞으나, 데이터 테이블이 아닌 레이아웃 테이블은 테이블로 마크업하지 않고 구조적으로 마크업하는 것이 좋다.

21. 레이블 제공

사용자 입력에는 대응하는 레이블을 제공해야 한다.

레이블이 시각적으로 노출되어 있는 경우

레이블과 입력 서식이 1:1 매칭인 경우 - 레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공

<label for="user_id">아이디</label>
<input type="text" id="user_id" />
      
<label for="user_pw">비밀번호</label>
<input type="text" id="user_pw" />

레이블과 선택 서식이 1:1매칭인 경우

<label for="user_gender">성별</label>
<select id="user_gender">
    <option value selected>성별</option> 
    <option value="0">남자</option> 
    <option value="1">여자</option> 
</select>

레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우

<input type="radio" id="gender_male" />
<label for="gender_male">남자</label>
<input type="radio" id="gender_female" />
<label for="gender_female">여자</label>
      
<input type="checkbox" id="agree" />
<label for="agree">이용약관에 동의합니다.</label>

레이블과 입력 서식이 1:다 매칭인 경우 - 각 입력 서식에 대해 title을 제공

<input type="text" title="생년월일 중 년 4자리 입력" />
<input type="text" title="생년월일 중 월 입력" />
<input type="text" title="생년월일 중 일 입력" />

레이블이 시각적으로 노출되지 않은 경우 - 각 입력 서식에 title을 제공
```
<input type="text" title="아이디" />
<input type="text" title="비밀번호" />
```

스크린리더는 레이블과 타이틀을 둘 다 읽어주지만 둘 다 제공한 경우 스크린리더에 따라 레이블을 읽어주기도 하고 타이틀을 읽어주기도 한다. 따라서 중복 제공은 피하고 클릭할 수 있는 범위가 늘어나기 때문에 1:1매칭인 경우는 우선적으로 레이블을 제공하고 이외의 경우에는 타이틀로 설명을 제공하주면 된다.

22. 오류 정정

입력 오류 시 정정할 수 있는 방법을 제공해야 한다.

입력 오류 시 입력 내용이 모두 사라지는 경우 - 입력 서식 작성 시 오류가 발생하여 입력 내용이 모두 사라지는 경우이며, 작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 한다.
오류 내용 제공 - 오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려 주어야 한다.
오류 발생 시점으로 초점 이동 - 오류가 발생한 입력 서식으로 초점이 이동해야 한다.

23. 마크업 오류 방지

마업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

요소의 열고 닫음
- 마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시작 요소와 끝나는 요소가 정의되어야 한다.
- img요소와 같이 단일 태그가 아닌 열고 닫힘이 존재하는 태그의 경우 열고 닫음이 일치해야 한다.
요소의 중첩
- 시작 요소와 끝나는 요소의 나열 순서는 포함 관계가 어긋나지 않아야 한다.
중복된 속성 사용
- 하나의 요소 안에서 속성을 중복하여 선언하지 않아야 한다.
id 속성 값 중복
- 페지 내 id 값이 중복 선언되지 않도록 제공해야 한다.
- 레이블과 매칭된 서식의 id가 중복된 경우에는 21번 레이블 제공에도 영향을 미친다.

24. 웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

웹 애플리케이션이란 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종으로, 리치 인터넨 애플리케이션(RIA: Rich Internet Application)이라곡도 한다.
웹 애플리케이션에 대한 접근성 프로그래밍 인터페이스 사용을 지원한다거나 대체 수단을 제공하거나 보조 기술을 지원해야 한다.
예를 들어, 접근성이 어려운 플래시의 경우 HTML버전을 선택할 수 있는 대체 수단이나 텍스트를 제공해야 한다.

웹 접근성

웹 접근성

접근성

웹 접근성

웹 접근성을 지켜야 하는 이유

장애인 차별 금지법(장차법)

1. 장애

2. 장애 환경

WCAG

KWCAG

1. 적절한 대체 텍스트 제공

2. 자막 제공

3. 색에 무관한 콘텐츠 인식

4. 명확한 지시사항 제공

5. 텍스트 콘텐츠의 명도 대비

6. 자동 재생 금지

7. 콘텐츠 간의 구분

8. 키보드 사용 보장

9. 초점 이동

10. 조작 가능

11. 응답 시간 조절

12. 정지 기능 제공

13. 깜빡임과 번쩍임 사용 제한

14. 반복 영역 건너뛰기

15. 제목 제공

16. 적절한 링크 텍스트

17. 기본 언어 표시

18. 사용자 요구에 따른 실행

19. 콘텐츠의 선형 구조

20. 표의 구성

21. 레이블 제공

22. 오류 정정

23. 마크업 오류 방지

24. 웹 애플리케이션 접근성 준수

정점찍는 블로그

Error

웹 접근성

접근성

웹 접근성

웹 접근성을 지켜야 하는 이유

장애인 차별 금지법(장차법)

1. 장애

2. 장애 환경

WCAG

KWCAG

1. 적절한 대체 텍스트 제공

2. 자막 제공

3. 색에 무관한 콘텐츠 인식

4. 명확한 지시사항 제공

5. 텍스트 콘텐츠의 명도 대비

6. 자동 재생 금지

7. 콘텐츠 간의 구분

8. 키보드 사용 보장

9. 초점 이동

10. 조작 가능

11. 응답 시간 조절

12. 정지 기능 제공

13. 깜빡임과 번쩍임 사용 제한

14. 반복 영역 건너뛰기

15. 제목 제공

16. 적절한 링크 텍스트

17. 기본 언어 표시

18. 사용자 요구에 따른 실행

19. 콘텐츠의 선형 구조

20. 표의 구성

21. 레이블 제공

22. 오류 정정

23. 마크업 오류 방지

24. 웹 애플리케이션 접근성 준수

Templates (for web app):

Error