💛[부스트코스_웹 UI 개발] 9. 웹 접근성

웹 접근성 학습목표

• 웹페이지를 제작할때 어떻게 접근성을 준수해야 하는지 알아본다.
• 웹 접근성 지침에 따라 실무에서 접근성을 어떻게 준수해야 하는지 숙지한다.
• 장애환경
  : 웹 접근성을 준수해야 하는 이유를 알아본다.
• 웹 접근성 지침
  : KWCAG의 지침에 따른 24가지 항목들을 살펴보고, 항목별 사례들을 토대로 실무에 적용가능한 접근성 내용을 숙지한다.
• 진단도구
  : 접근성을 수월하게 진단할 수 있는 도구에 대해 살펴본다.

---

웹 접근성 이해

웹 접근성이란

접근성이란?

접근하는 정도.

사전적 의미 : 사용자가 어떤 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도

웹에서의 접근성이란?

웹에 잘 접근할 수 있는지 없는지의 정도를 의미.

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

즉 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것.
모든 사용자와 모든 기술환경을 고려해야 한다.

왜 접근성을 지켜야 하나?

1. 장애인 차별 금지법 (장차법)
   2013년 4월 11일부터 장애인들도 비장애인들과 동등하게 전자 정보 및 비전자 정보를 사용할 수 있도록 해야한다는 내용 포함됨.
   이를 어길경우 처벌

처벌
1)
장애를 이유로 차별받은 단체, 개인, 국가 인권위가 직접 수사기관에 고발, 고소가능하며 소송에서 질 경우 3년 이하의 징역 또는 3천만원 이하의 벌금 손해배상 책임을 부담해야 한다.

2)
또는 진정이 접수되고 절차에 따라 시정 명령에 불복하였을경우 행정 소송으로 이어지고 소송에서 질 경우 3천만원 이하의 과태료를 부가받게 된다.

즉 법으로 정해져 있기 때문에 웹 접근성을 지켜야 한다.

---

장애 환경

2. 웹 창시자, 즉 www를 만든 팀 버너스 리
   : 웹의 힘은 보편성에 있다.
   장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다.

여기서 모든 사람에 당연히 장애를 가진 사람도 속함.

장애의 사전적 의미
1) 어떤 사물의 진행을 가로막아 거치적거리게 하거나 충분한 기능을 하지 못하게함. 또는 그런 일.
2) 신체 기관이 본래의 제 기능을 하지 못하거나 정신 능력에 결함이 있는 상태.

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

이러한 장애환경에는 여러 장애들과 / 운정중일때, 소음이 심할때, 스피커가 없어서 소리를 듣지 못할때, 소프트웨어가 지원되지 않거나 네트워크가 접속되지 않는 경우들도 존재

---

장애 유형

1. 전맹 시각 장애
   시력이 전혀 또는 거의 없어 앞을 볼 수 없다.

이분들은 청각이나 촉각으로 웹을 이용한다.

• 청각으로는 스크린 리더가 웹에 존재하는 이미지 또는 글씨를 음성으로 읽어주어 이를 통해 정보를 파악할 수 있다.
  • 스크린 리더는 스크린을 읽어주는 프로그램
    이 프로그램을 실행하고 웹에 접근하면 웹 페이지를 읽어주게 됨.
• 청각으로 정보를 파악하는 분들이 존재하기 때문에 웹 사이트를 제작할때 시각이 아닌 청각으로도 정보를 파악할 수 있도록 구현해야 한다.

• 촉각적으로는 전자 정보 단말기를 통해서 전자를 손으로 읽으면서 내용을 인식한다.

실제 사용은 듣거나 손으로 인식함

2. 저시력 시각 장애
   보이기는 하지만 정확히 보이지 않아 일상생활이 어려움

좀 더 크게 또는 선명하게 볼 수 있는 기능을 이용한다.

• 시력 저하 / 시야 장애
  화면 확대 기능 이용
• 색약, 색맹
  색상을 분별하는데 어려움이 존재
  색이 다른 색으로 보이거나, 전색맹인 경우 웹페이지가 아예 흑백으로 보임
  더 선명하게 웹페이지를 볼 수 있도록 고대비를 사용함.

3. 중증 운동 장애
   손 또는 팔을 사용하지 못함

보조 기기를 이용하여 키보드를 조작.
보조 기기로는 헤드 포인터, 빅키 키보드, 키카드 등이 존재

• 손을 대신하여 타이핑 가능한 포인트 스틱을 머리에 고정하여 키보드를 조작하고
• 자판이 큼직한 빅키 키보드와 타이핑 스틱이 어긋나지 않도록 보조해주는 키카드로 보다 정확하게 타이핑 할 수 있음.

4. 손 운동 장애
   한 손만 사용가능하거나 손 떨림 현상이 있어서 정교한 조작이 어려움.

보조 기기를 이용하여 마우스와 키보드를 조작함.
보조 기기 : 한 손 사용자용 키보드, 트랙볼 마우스 등

• 큰 볼을 굴려서 마우스 포인터를 쉽게 이동할 수 있으며
• 별도로 제공되는 버튼을 한번만 클릭해 정교한 조작을 쉽게 할 수 있음.
• 한 손 사용자용 키보드는 한손으로만 사용하기 때문에 위치와 모양이 다름.
• 트랙볼 마우스는 손을 대고 볼을 굴려가면서 마우스 위치를 잡음.

5. 청각 장애
   들을 수 없기 떄문에 시각을 통하여 정보를 인식함.

6. 맥 사용자
   맥을 사용하는데 윈도우에서만 사용이 가능한 경우도 웹에 접근이 불가능하기 때문에 장애가 될 수 있음.

7. 느린 인터넷
   인터넷이 느린 경우 로딩이 잘 되지 않아 비장애인들이 오히려 웹 페이지를 인식하는데 불편함을 느낄 수 있음.

---

웹 접근성 지침

웹 접근성 지침 소개

접근성에도 지침 존재
1990년대부터 영국, 호주, 미국, 일본 등이 장애인 차별 금지 관련 법에 따라 모든 이의 웹 접근성을 높였다.

1997년 5월 World Wide Consortium (w3c)가 웹 콘텐츠 접근성 지침 Web Content Accessibility Guidelines WCAG를 내놓아 제도 확산의 속도를 더함.

한국도 2009년 5월 국가 정보와 기본법을 개정해 장애인, 고령자 등의 정보 접근 및 이용 보장을 명시했으며
2015년까지 한국 내 모든 인터넷 사이트가 웹 접근성을 보장하게 개정함.

WCAG에 있는 지침들을 한국화한것이 KWCAG(Korea)
KWCAG는 해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침

---

웹 접근성을 잘 지켰을때의 장점

• 모든 사람이 접근할 수 있다.
• 법적으로 명시되어 있어 당연한 부분이다
• 웹 접근성을 잘 지킨 사이트들에 한해서 웹 접근성 품질 마크를 부여.
  과학 기술 정보 통신부 품질 인증 기관에서 웹 접근성 가이드에 맞춰 준수도를 파악하고 인증해주는 마크.

KWCAG

원칙 4개, 지침 13개, 항목 24개로 구성되어 있음.

항목 24개를 하나씩 알아보자.

---

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

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

ex) 이미지 등의 요소

왜 대체 텍스트를 제공해야 할까?
시각적으로 정보를 습득하는데 어려움을 겪는 사용자들은 스크린 리더와 같은 보조기술을 사용하여 해당 콘텐츠를 음성으로 듣는다.
볼 수 없는 사용자는 웹페이지에 접속했을때 스크린 리더로 내용을 듣는다.

이때 페이지에 존재하는 텍스트들은 스크린 리더가 문제없이 읽지만,
이미지는 이미지에 대한 텍스트가 있어야 읽어줌.
그래서 대체 텍스트를 적용해야 한다.

• 텍스트가 있는 이미지를 요소로 마크업 할때

<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">

대체 텍스트는 이미지 요소의 alt에 적용해 주면 된다.
보이는것과 동등하게 대체 텍스트를 제공해서 청각적으로 내용을 인식할 수 있도록.

스크린 리더로 들으면 alt값을 읽어줌.

• 이미지 요소 뿐만 아니라 input type="image"이거나 "button"인 경우 또는 image map의 area에도 대체 텍스트가 존재한다면 alt로 제공하면 됨.
  
  
• 대체 텍스트가 너무 긴 경우에는
  이미지에는 alt를 빈 값으로 제공하고 대체 텍스트를 따로 마크업으로 제공하는 방법도 존재.

<img src="160314.png" alt="">
<p class="blind">
    주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외  
    2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대
</p> 

예시는 p태그 하나로 텍스트로만 되어 있지만 예를들어 이미지 내부 콘텐츠가 리스트로 되어있어서 ul, li로 마크업하게되면 스크린 리더에서 목록으로 알아서 읽어준다.

기본적으로 스크린 리더는 해당 요소에 따라 내용을 읽어주기 때문에 구조적 마크업이 가능한 콘텐츠는 이와 같이 제공해주는것이 좋다.

주의 ) 해당 마크업을 보이지 않게 처리해야함.
이때 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속성을 필수로 제공해야함.
  의미 없는 이미지에도 제공해야함.
  alt값이 아닌 alt속성 자체는 무조건 제공해야함

<img src="123456.jpg" alt="">

alt속성을 제공하지 않으면 스크린 리더는 123456.jpg라고 src에 있는 파일명을 읽어주게 됨.
또한 alt속성을 제공하긴 했지만 alt값에 띄어쓰기가 하나라도 적용되어 있는 경우도 alt=" " 마찬가지로 파일명을 읽어주게 됨.

따라서 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우는 대체 텍스트로 공백 문자, 즉 파일명을 읽는 일이 없이 아무것도 읽어주지 않도록 alt값을 빈 값으로 제공해야함.

• 이모티콘 이미지
  alt는 이모티콘이라고만 제공하는 경우가 많은데, 이렇게 제공하면 다른 이모티콘이 여러개가 있을 때 스크린 리더기는 똑같이 읽어주기 때문에 이모티콘의 의미가 다 다른만큼 시각적으로 인식하는것과 동일하게 대체 텍스트를 제공해야함.

<img src="brown_img_5.png" alt="미안해하는 브라운"> 

• 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="웨딩 사진을 모티브로 만든 도일리">
</a>
<a href="...">
  <span>웨딩 사진을 모티브로 만든 도일리</span>
</a>

-> '웨딩 사진을 모티브로 만든 도일리' 두번 중복해서 읽게됨

올바른 예시

<a href="…">
    <img src="thumb01.jpg" alt="">
    <span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a> 

• 캡차 이미지

캡차 : 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법
캡차 이미지에 대체 텍스트로 이미지에 있는 텍스트를 제공하면
alt="N483VY3"
스크린 리더를 사용하는 분들에게는 정답을 알려주는것이 됨.

따라서 캡차 이미지에는 대체 텍스트로 "캡차" 또는 "보안 문자"라고 제공을 한 뒤 따로 음성으로 들을 수 있도록 청각적 캡차를 제공해야함.
시각적으로도 알아보기 쉽지 않게 이미지가 제공되듯이 음성도 지지직 거리면서 알아듣기 쉽지 않게 제공이 된다.

 <img src="text.jpg" alt="보안 문자">

• 사용자가 업로드하는 이미지

관리자 측에서 일일이 대체 텍스트를 다 확인하고 적용하기에는 현실적으로 힘들기 때문에 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 틀을 제공해야 한다.

사용자가 입력한 내용이 대체 텍스트로 제공되도록 구현.

---

2. 자막 제공

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

멀티미디어에 대한 대체 수단을 제공해야 한다는 뜻.
대체수단은 자막, 대본, 수화 중 하나를 제공하면 된다.

멀티미디어 콘텐츠에 포함된 음성 및 대사와 동등하게 대체 수단을 제공해야함.
대체수단은 자막, 대본이나 원고, 수화로 제공하면 된다.

제 3자가 영상을 업로드하는 경우 사용자가 대체 콘텐츠를 제공할 수 있도록 툴을 제공해야함.

멀티미디어 콘텐츠가 음성 없이 텍스트만 제공되는 경우 시각적으로만 인식이 가능하기 때문에 따로 원고를 제공하거나 하는 등의 방법으로 대체 콘텐츠를 제공해야함.

---

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

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

즉 색을 구분하지 못하더라도 콘텐츠를 인식하는데 문제가 없어야한다.
색으로만 구분하는것이 아니라 패턴이나 굵기 또는 모양이나 테두리 등으로 구분해야함.

• 슬라이드 버튼이 색으로만 구분되어 있는 경우가 많음
  선택된 버튼을 모양으로 구분하면 명확하게 인식할 수 있음.

• pagination을 색으로만 구분하면 색을 구분하기 힘든 사용자들은 몇페이지인지 인식하기 힘들다.
  따라서 테두리나 굵기 또는 다른 방법으로 구분이 가능하도록 구현해야함.

• 탭 역시 색으로만 구분하면 선택된 탭이 무엇인지 구분하기 힘듬.
  현재 선택된 탭을 배경등으로 구분해야함.

---

4. 명확한 지시 사항 제공

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

지시사항을 특정한 단위 감각에만 의존하는 방법으로 제공해서는 안된다.
즉 여러가지 다른 감각을 통해서도 지시사항을 인식하는데 문제가 없도록 콘텐츠를 제공해야함.

• 회원가입 시 필수 입력 항목들 앞에 * 문자 모양으로만 정보를 제공하고 있어 오류 사례.
  " * 표시는 필수 입력 사항입니다."라는 설명을 제공해야함.

• "왼쪽에 숫자를 입력하세요"의 경우 시각적으로 인식이 어려운 사용자는 왼쪽이 어디인지 알기 힘듦.
  이와같이 위치나 방향으로 정보를 제공하는경우도 오류.

• "작은 버튼을 클릭하세요." 크기로만 정보를 제공하고 있어 오류사례.
  대상이 되는 버튼이 "작은 버튼"이라는 대체 테스트를 포함하고 있지 않을 경우 시각적으로 인식이 어려운 사용자는 어떤 요소를 지칭하는지 알 수 없기 때문.

• "보라색 지역은 관할 지역입니다." 색으로만 정보를 제공하고 잇어 오류사례.
  -> "서울, 경기, 인천 지역은 관할 지역입니다."라고 명확하게 정보를 제공해야함.

• 음성이나 음향으로만 정보를 제공하는 경우도 마찬가지로 오류이므로 주의

---

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

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

명도 대비가 낮아도 가독성이 떨어져서 내용을 인식하기 어렵다.
노안, 저시력, 색약, 색맹 등의 사용자들도 불편함이 없도록 콘텐츠를 제공해야함.

비장애인들도 명도 대비가 높다면 더 잘 인식할 수 있다.
페이지에 존재하는 모든 텍스트에 대해 명도 대비를 준수해야 하는것은 물론 텍스트가 이미지로 된 경우에도 명도대비를 준수해야함.

명도대비를 측정하는 프로그램은 접근성 진단 부분에서 설명

• 텍스트뿐만 아니라 의미 있는 이미지의 경우에도 이미지를 인식할 수 있도록 명도 대비를 준수해야함.
• 의미 있는 버튼, 텍스트, 이미지에 있는 텍스트 등의 명도대비가 모두 준수되어야함.
• 다만 로고, 장식목적의 콘텐츠, 마우스나 키보드를 활용하여 초저믈 받았을때 명도 대비가 커지는 콘텐츠 등은 예외로 한다.

확대가 가능한 브라우저에서는 최소 3:1 이상이면 준수.

---

6. 자동 재생 금지

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

여기서 소리는 동영상, 오디오, 음성, 배경음악 등 콘텐츠가 제공하는 모든 소리를 말함.
이런 소리가 자동재생됨으로 인해 스크린 리더 사용자가 콘텐츠를 인식하고 사용하는데 방해받지 않아야함.

자동으로 배경음이나 동영상이 재생되면 스크린 리더 음성과 겹치게 되면서 페이지의 내용을 인식하기 어렵다.
즉, 스크린 리더가 웹 페이지를 읽어주는데 소리가 자동으로 재생되면 겹치게 되서 듣기가 힘듦.

따라서 콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공되어야 하고, 사용자가 요구할 경우에만 재생 가능하도록 제공해주면 된다.

음성이 나오지 않는 동영상은 자동 재생 오류가 아님

불가피하게 자동 재생을 하는 경우에는 1)3초내에 멈추거나 2)ESC 키를 누르면 멈추거나 3)소스상 가장 먼저 제공되어서 정지 기능을 실행할 수 있도록 구현해야한다.

마우스 오버 또는 키보드 초점만으로 3초 이상 배경음 콘텐츠가 재생되는 경우도 오류.
따라서 클릭이나 선택 후 재생되도록 구현해야함.

---

7. 콘텐츠 간의 구분

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

웹 페이지를 구성하는 모든 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야한다.

구분방법
1. 테두리를 이용
2. 구분선을 삽입
3. 서로 다른 무늬
4. 배경색 간의 명도 대비
5. 줄 간격 및 글자 간격
6. 기타

---

8. 키보드 사용 보장

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

웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야함.
다만 사용자의 반응 속도나 지속성이 중요한 붓질과 같은 키보드 접근이 불가능한 기능은 예외로 할 수 있다.

• 드롭 다운 메뉴등은 메뉴에 마우스 오버시 서브 메뉴가 노출되는 형태.
  키보드로 접근했을때 서브 메뉴가 노출되지 않으면 마우스를 사용하지 못하는 키보드 사용자는 주 메뉴만 탐색가능하고 서브 메뉴에 접근 자체가 불가능함.
  따라서 마우스 오버 시 기능과 키보드 접근 시 기능이 동일하도록 구현해야함.

• 버튼에 마우스를 올렸을때 말풍선처럼 레이어가 뜨는 경우도 버튼에 키보드 접근헀을시에도 레이어가 노출되도록 구현해야함.

• 이미지, 또는 초점을 받을 수 없는 요소에 마우스 클릭과 같은 마우스 이벤트가 적용된 경우, 초점을 받을 수 없는 요소는 키보드 접근 자체가 불가능하여 오류이다.
  이런 경우는 9. 초점 이동 항목에도 영향을 미침
  마우스로 조작 가능한 컨트롤의 경우 되도록 a 링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현해야함.

<img onclick="click_event();"/>
<td onmouseover="pop();"/>

<a id="ad" class="ad_sub" onclick="ad_event();">
  <img src="160314.png" alt="...">
</a>

-> a 링크 요소에 href 속성이 없고 onclick이벤트가 적용되어 있음.
이런 경우 마우스로는 조작이 가능하지만 키보드 접근을 불가능함.
따라서 a 링크에는 href 속성을 꼭 제공해야함.
이는 9번 항목에도 영향을 미침

<a href="..." onfocus="this.blur();">
  <img src="160314.png" alt="...">
</a>

-> a 링크에 href속성은 있지만가 적용되어 있음.
이는 초점을 초기화시켜서 이후 콘텐츠로 키보드 접근이 불가능함.
9번, 18번 항목에도 영향을 미치므로 초점이 초기화되는는 사용하지 않도록 해야함.

이외에 키보드가 함정에 빠져서 더 이상 키보드 접근이 되지 않는 경우도 오류이다.

---

9. 초점 이동

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

초점은 일반적으로 좌에서 우, 상에서 하로 이동할것이라고 예측.

스크린 리더 사용자는 보이지 않는 상태로 들으면서 탐색하고 있는데 맨 마지막에 주메뉴로 초점이 가능 등 중구난방으로 초점이 이동한다면 내용을 인식하는게 매우 힘들다.
마찬가지로 키보드 사용자의 경우 보면서 탐색을 하고 있으나 초점이 여기갔다, 저기갔다 하면 어디에 위치하는지 확인하기 힘듦.

따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야한다.

초점이동이 id입력, 비밀번호 입력, 로그인 버튼, id저장 순서이면 로그인 버튼을 먼저 클릭하기 때문에 id 저장을 못할 가능성이 존재
따라서 id, 비밀번호 입력 후 id저장에 먼저 초점이 이동했다가 로그인 버튼으로 논리적으로 초점이 이동해야함.

• 추가적으로 tabindex 속성을 이용하여 초점 이동을 강제로 변경하는 경우도 오류.
  기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex를 사용할 이유는 없다.
  tabindex 참고

• 특정 컨트롤 클릭 시 레이어 팝업이 노출되는 경우는 초점이 레이어 팝업 내부로 이동해야 하고 레이어 팝업을 닫은 후에는 다시 레이어를 노출시켰던 컨트롤로 이동해야함.
  오류 사례) 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태로 다음 컨트롤로 이동하기 때문에 초점이 레이어 뒤로 가서 가려지는 경우가 존재. 초점이 보이지 않으면 키보드 사용자는 페이지를 잘 이용할 수 없다.

• 마우스가 아닌 키보드로 웹을 사용하는 사용자는 초점이 어디에 위치하는지 알 수 있어야함.
  초점이 가긴 가는데 시각적으로 보이지 않으면 어디에 초점이 있는지 알 수가 없어서 컨트롤을 선택할 수도 없다.
  따라서 키보드 접근 시 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야함.
  hidefocus 적용, css에서 outline:none 처리,를 사용하면 전부 초점이 보이지 않게 되어 주의해야 한다.

---

10. 조작 가능

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

여기서 얘기하는 조작 가능 기준

1. 컨트롤의 대각선 길이는 6mm이상으로 구현되어야 한다.
   버튼에 가로, 세로가 있으면 대각선의 길이가 6mm이상

2. 컨트롤은 테두리 안쪽으로 1px이상의 여백을 두어야한다.
   컨트롤이 연달아 있을때 1px 이상의 여백이 있지 않으면 컨트롤 구분도 힘들고 잘못 선택할 확률도 높다.

---

11. 응답 시간 조절

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

시간제한이 있더라고 실시간 게임등과 같이 반응시간의 조절이 원칙적으로 허용되지 않는 경우에는 이 검사 항목이 적용되지 않는다.
다만 이 경우에도 사용자에게 시간제한이 있다는것을 미리 알려주고 종료되었을때도 알려주어야 한다.

• 세션 시간이 20시간 이상인 콘텐츠는 예외로 간주한다.

• 웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는것이 바람직하며
  보안등의 사유로 시간제한이 반드시 필요한 경우에는 이를 회피할 수 있는 수단을 제공해야함.

• 은행 사이트에서 보안을 위해 로그인 시간에 제한이 있는 경우가 많음.
  이때 아무런 공지 없이 자동으로 로그아웃 되는 경우도 오류
  종료시간을 공지하고 있어도 수단을 제공하지 않으면 오류.

반응시간이 정해진 웹 콘텐츠를 사용자가 이용할 수 있도록 하기 위해서는 반응시간이 완료되기 전에 이를 조절할 수 있는 수단을 제공해야한다.
또한 반응시간 조절 기능은 최소 20초 이상의 충분한 시간을 두고 사전에 알려주어야 한다.

• 페이지 진입 시 바로 refresh되는것이 아니라 meta 요소의 refresh 속성 등을 사용하여 일정 시간이 지난 뒤 페이지가 자동 전환되는 경우도 오류.
  따라서 연장할 수 있는 수단을 제공하거나 해제할 수 있는 수단을 제공해야함.
  스크린 리더 사용자와 키보드 사용자도 이를 인지하고 수단까지 가는데 시간이 부족하지 않아야한다.

응답시간 조절에 대한 접근성을 준수하면 문서를 읽고 이해하는데 더 많은 시간이 필요한 지적장애인 또는 학습장애가 있는 사용자도 시간제한이 있는 콘텐츠를 시간에 관계없이 이용할 수 있게 된다.

---

12. 정지 기능 제공

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

웹 콘텐츠는 스크롤 및 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 한다.

스크롤 및 자동 갱신되는 콘텐츠는 사용하지 않는것이 좋으며 사용시에는 정지, 이전, 다음기능을 제공해야 한다.

정지버튼이 없더라도 마우스 오버시와 키보드 접근 시 정지되도록 구현하면 정지기능을 제공한것으로 인정됨

실시간 검색어처럼 자동 변경되는 콘텐츠에 다음, 이전, 정지기능이 제공되지는 않아도 마우스 오버시와 키보드 접근시 모든 콘텐츠가 보여지고 탐색 가능하면 준수.

따라서 다음, 이전, 정지기능을 제공하거나 전체 콘텐츠를 제공해야함.

자동으로 변경되는 콘텐츠를 제어 가능하도록 구현하면 이를 이용하기 어려운 지체장애인, 노인, 뇌 병변장애인들도 이용할 수 있다.

---

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

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

즉 너무 깜빡거리는 콘텐츠는 제공하지 않아야한다.
1997년 일본에서 포켓몬스터 전뇌 전사 폴리곤 편이 반영되었을때 이 영상으로 인해 750명 정도의 어린 아이들이 구토, 어지럼증 증세를 호소하였으며 심한 경우에는 경련, 의식상실, 호흡 장애등을 겪음.
원인은 밝은 빛의 화면 점멸이 연속적으로 나오는 장면을 보고 일어난 광과민성 발작.
광과민성 발작은 오랜시간 불규칙적으로 깜빡거리는 강과에 자극받아 생기는 간질, 발작.

번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10%미만 또는 시간을 3초 미만으로 제한하여 발작을 예방해야 한다.

이런 콘텐츠를 제공하지 않는것이 가장 좋은 방법이며
꼭 제공해야 하는 경우 사전에 경고하고 이를 중단할 수 있는 수단을 제공해야한다.

콘텐츠가 초당 3~50회 깜빡이는지 확인할 수 있는 프로그램 : PEAT
PEAT

---

14. 반복 영역 건너뛰기

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

특정 사이트에서 페이지마다 이렇게 반복되는 구간이 있을때 스크린 리더 사용자는 페이지가 로드되거나 갱신될때마다 모든 웹 페이지에 공통적으로 들어 있는 부분을 다시 듣게된다.
이런 부분을 반복영역이라고 함.

키보드 사용자도 탭을 여러번 반복해서 접근해야 하는 불편을 방지하기 위해 반복되는 영역을 건너뛸 수 있는 기능을 제공해야한다.

건너뛰기 링크는 웹 페이지에 가장 앞에 제공해야 하고 키보드 사용자가 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로 키보드 접근 시에 화면에 보이게 구현해야한다.
키보드 접근이 불가능하면 8번에도 영향을 미침

페이지마다 반복되는 영역이 여러개가 있어서 여러개의 건너뛰기 링크를 제공하는 경우에는 핵심영역, 즉 본문으로 이동하기 위한 건너뛰기 링크를 가장 먼저 나타내도록 한다.
가장 중요한 부분으로 먼저 건너뛸 수 있게 제공해야함.

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

• 반복 영역 건너뛰기는 마크업 상 최상단에 위치
• 건너뛰기 링크가 페이지 내에 존재해야함
  즉 본문바로가기를 선택하면 content를 id로 가진 영역애 페이지 내에 있어야함.
• 키보드 접근 시 화면에 보이도록 구현해야하며 반복 영역 건너뛰기 링크에 "하단 메뉴로 바로가기"와 같이 위치 정보를 제공하게 되면 하단이 어디인지 인식하기 힘들기 때문에 부적절함. 이는 4번에도 영향을 미침

---

15. 제목 제공

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

<title>로그인</title>

웹페이지의 제목은 유일하고 서로 다르게 제공해야 한다.
그래야 여러 페이지가 열러 있는 경우 비장애인들도 제목만 보고 구분하여 빨리 선택할 수 있다.

제목을 금융, 국내증시로 하면 더 상세하게 분류가 가능함에도 불구하고 상주 범위로 제목을 제공했기 때문에 현재 페이지의 내용을 명확하게 이해하기 어려움.
따라서 "신규 상장 종목"이라고 페이지 제목을 제공해야함.
즉 페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위 분류로 적절하게 제공해야한다.

• 뉴스 상세 페이지 제목 -> 해당 뉴스에 대한 타이틀을 제목으로 제공해야함.
• 게시판의 경우에도 글 읽기, 글 보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공해야함.

각 페이지의 핵심 내용을 제목으로 제공하면 된다.

• 프레임이나 아이프레임에도 각 프레임을 설명하는 간단 명료한 제목을 제공해야한다.

<iframe src="https://nv.veta.naver.com/fxshow?su=SU10079&amp;nrefreshx=0"  title="광고"></iframe>

광고를 아이프레임으로 제공하고 있기 때문에 iframe의 title을 "광고"라고 제공함

웹 페이지를 구성하는 모든 프레임의 제목을 제공하면 시각장애인, 지적 장애인, 중증 지체 장애인등의 사용자가 프레임 제목을 통해 프레임 간을 매우 편리하게 이동할 수 있다.

• 내용이 없는 아이프레임을 사용하는 경우
  내용이 없는 빈 프레임의 경우에도 title을 "빈 프레임" 또는 "내용 없음" 등으로 제공해야한다.

<iframe data-veta-preview="main_frame" title="빈 프레임" width="0" height="0" >

• 콘텐츠 블록에도 제목을 제공해야 한다.

<h3 class="an_tit">
    <a href="http://newsstand.naver.com" class="an_ta" target="_blank">뉴스스탠드</a>
</h3>

뉴스 스탠드 콘텐츠이므로 <h> 태그로 뉴스 스탠드라고 제목을 제공함.

주의) 뉴스 스탠드랑 동일한 depth에 있는 콘텐츠는 하위, 상위 콘텐츠가 아니기 때문에 동일한 <h> 태그로 일관성 있게 제목을 제공해야함.
여기서 h3로 제목을 제공하고 있기 때문에 동일한 depth의 콘텐츠는 모두 h3으로 제공하면 된다.
이때 제목을 숨김처리하는 경우 1번에서 보았듯이 display:none; 이나 visibility:hidden; 속성은 스크린 리더에서 읽어주지 않기 때문에 사용하지 않아야 한다.

• 제목의 특수 기호
  하나까지만 사용 제한을 두고 있다.
  연속된 특수 기호를 사용하게 되면 스크린 리더에서 불필요한 음성을 반복해서 출력하게 됨.

<title>★★★★★회원가입★★★★★</title>

따라서 시각적인 장식을 위해 반복되는 특수문자는 제공하지 않아야 한다.
페이지, 프레임, 콘텐츠 제목 모두 마찬가지임.

---

16. 적절한 링크 텍스트

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

링크의 용도나 목적지를 링크 텍스트만으로 또는 주변의 맥락으로부터 충분히 이해할 수 있도록 링크 텍스트를 제공해야 한다.

<a href="..." title=""></a>

링크 텍스트를 제공하지 않아 이렇게 빈 링크가 존재하는 경우 스크린 리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 사용자는 어디에 초점이 갔는지 알 수 없다.

따라서 의미없는 빈 링크는 제거해야함.

<a href="#">
    <img src="btn_next.png" alt="다음 콘텐츠 보기">
</a> 

이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류.
따라서 alt="다음 콘텐츠 보기"와 같이 적절한 링크 텍스트를 제공해야한다.

<a href="#" class="link_next">다음 콘텐츠 보기</a>

 .link_next{
    background-image: url('./img/icon_next.png');
}

1번에서 언급했던 경우
링크에 의미 있는 배경 이미지를 적용한 경우에도 이미지의 대체 텍스트이자 링크 텍스트를 적절하게 제공해야한다.

<a href="…">
    <img src="thumb01.jpg" alt="">
    <span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a> 

1번에서 언급한 부분
섬네일 이미지와 텍스트를 각각 링크로 구현하는 경우 링크 텍스트를 각각 제공해야 하기 때문에 내용이 중복됨.
따라서 이와같이 이미지와 텍스트를 하나의 링크로 묶어주고 중복되지 않도록 이미지에는 alt를 빈 값으로 제공하고 링크 텍스트를 제공해주는것이 좋다.

<p>
    더 자세한 사항을 보려면
    <a href="#">여기</a>를 클릭하세요.
</p>

스크린 리더 사용자의 경우 키보드로 링크를 접근하게 되면 "여기 링크"라고 읽어주게 되어 이 링크를 클릭하면 어떻게 되는지 알 수가 없다.
따라서 이와 같이 방향 지시로 링크 목적을 안내한 경우는 오류로 진단됨.
4번에도 영향을 미침

이외에 url로만 링크를 제공하는 것 보다는 해당 주소의 목적을 함께 제공하는것이 좋다.

"더보기"나 "자세히보기"와 같은 링크의 경우에도 문맥 상 알 수 있으나 어떤 콘텐츠의 더 보기인지 명확히 링크 텍스트를 제공해주는것이 더 좋다.
ex) "공지사항 더보기"라고 공지사항 텍스트를 숨김 처리로 제공해주는것이 좋다.
즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야한다.

---

17. 기본 언어 표시

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

웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어정보를 바탕으로 텍스트 콘텐츠를 화면에 표시하거나 보조기술로 전달한다.

언어를 명시하면 자동 언어 전환을 지원하는 스크린 리더의 경우 선언된 언어로 전환하여 읽어준다.
따라서 웹 페이지의 기본 언어는 정확히 정의해야 한다.

기본 언어 표시는 <html>태그의 lang 속성을 사용하여 ISO639-1에서 지정한 두 글자로 된 언어코드로 제공하면 됨.
한국어는 언어코드가 KO

<html lang="ko">

각 문서타입에 맞게 언어를 제공하면 된다.

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">

기본 언어 설정을 해둔 상태에서 중간에 다른 언어가 존재한다면 해당 태그의 lang 속성으로 제공하면 된다.

<p class="last" lang="fr">

---

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

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

즉 원하지 않고 의도하지 않았는데 새 창이 뜨거나 페이지 새로고침 되는 등의 기능이 실행되지 않아야 한다.

사용자가 예측할 수 없는 상황에서 페이지 진입시 새 창이 열리는 경우(팝업) 오류이므로 이와 같이 제공하지 않아야 한다.

• 요즘에는 새 창 팝업이 많이 없어지고 레이어 팝업으로 변경되고 있는데, 화면을 가리는 레이어 팝업을 제공한 경우도 오류.
  이를 준수하기 위해서는 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나 화면을 가리지 않고 맨 윗부분에 레이어 팝업을 제공해야 한다.

• 이용약관 클릭시 새 창이 뜨는 경우 스크린 리더 사용자는 새 창이 뜬 것을 인지하기 힘듦으로 이전 창인줄 알고 계속 탐색할 수 도 있다.
  키보드 사용자도 다시 해당 창으로 돌아와서 키보드 접근을 해야하는 불편함 존재.

사용자가 예측하지 못한 팝업은 시각 장애인, 지체 장애인, 인지 능력이 떨어지는 사람등이 웹을 탐색하는데 방해 요인이 되기 때문에
링크 요소 내부에 블라인드로 "새 창"이라는 텍스트를 넣어주거나
타이틀로 "새 창"이라고 제공하거나
target="_blank"라고 적용하여 새 창이 열릴것이라고 사전에 알려주어야한다.

<a href="…">이용약관<span class="blind">새 창</span></a>

<a href="…" title="새 창">이용약관</a>

<a href="…" target="_blank">이용약관</a>

window.open을 사용하여 새 창을 띄우는 경우가 많은데, 이 경우 새 창이 뜬다는 것을 인지할 수 없기 때문에 이를 인지할 수 있도록 위와 같은 방법으로 제공해야 한다.

다만 title과 target으로 제공하는 방법은 센스리더 외 다른 스크린 리더에서는 새 창이라고 읽어주지 않음으로 blind로 "새 창"이라는 텍스트를 넣어주는 방법이 가장 확실한 해결방안이다.

• 사용자가 콤보 상자, 라디오 버튼, 체크 상자 등의 컨트롤을 선택했을 때 기능이 실행되거나 서식 제출이 일어나지 않아야 한다.

즉, "오늘 하루 이 창을 열지 않음" 체크 박스를 선택하자마자 팝업이 닫이는 경우 오류이며
이를 준수하기 위해서는 닫기 버튼을 따로 제공하여 체크 후 닫기 버튼 클릭 시 팝업이 닫히도록 구현해야한다.

<select title="관련 사이트" onchange="myFunction(this.index)">
  <option value="http://www.intro.com">회사소개</option>
</select>

<select>에 onchange 이벤트가 적용되어 옵션을 선택하자마자 페이지가 이동된 경우 오류이다.
이는 키보드로 접근하자마자 페이지가 변경되기 때문에 이후 콘텐츠에 키보드 접근이 불가능하여 8번에도 영향을 미친다.

onfocus나 onkeypress등의 이벤트에 의해 포커스를 옮기는 동작만으로 초점을 받는 것만으로 새창이나 레이어가 뜨거나 페이지가 바뀌는 경우 모두 사용자가 원하지 않는 기능이 실행되는 것임으로 오류.

---

19. 콘텐츠의 선형 구조

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

즉, 웹페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다.

• 탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우
  시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있음.
  스크린 리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없다.
  따라서 메뉴, 내용, 메뉴, 내용 이렇게 마크업하거나

<a href="…">상품</a>
<div>상품 내용</div>
<a href="…">쇼핑몰</a>
<div>쇼핑몰 내용</div>
…

내용끼리, 메뉴끼리 마크업을 하게 내용에 해당 메뉴 제목을 제공해주어야 한다.

<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. 표의 구성

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

비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으면서 인식한다.

스크린 리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목셀과 데이터셀이 구분되도록 구성해야 한다.
제목셀은 <th>로 내용셀은 <td>로 마크업하면 된다.

모든 셀이 가로, 세로로 있는 경우 scope로 행 제목인지, 열 제목인지 구분 가능하도록 제공해야한다.

• 표의 제목과 요약정보도 제공해야 한다.

제목이나 요약정보가 없으면 오류
제목과 요약정보가 동일하지 않도록 제공해야 한다.
요약정보를 제공하기 어려운 경우는 제목 셀을 나열하는 방식으로 제공하면 된다.
xhtml, html4는 <caption>으로 제목을 제공하고 <table>의 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> 

<caption> 내부에 있는 태그는 시각적으로 제목과 요약정보를 구분하기 위한 태그로 필수는 아님

• 복잡한 표의 경우

id와 headers 속성을 이용하여 제목셀과 내용셀을 보다 정확하게 연결해야한다.
제목셀마다 각각 다른 id값을 부여하고 내용셀과 관련이 있는 제목셀의 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>

스크린 리더에서는 headers에 나열된 id값 순서대로 제목셀을 읽어준다.
즉 "902"를 그냥 902로 읽는것이 아니라
"기준일, 2018년 10월 20일 경기도 매매가, 면적단가, 902"라고 읽어주게 된다.
제목들을 연결시켜서 읽어주는것
따라서 복잡한 표의 경우 id와 headers를 제공하면 표의 내용을 잘 인식할 수 있다.

데이터 테이블은 <table>태그로 마크업.
데이터 테이블이 아닌 레이아웃 테이블은 테이블별로 마크업을 하지 않고 구조적으로 마크업하는것이 좋음.
만약 <table>로 마크업할 경우 데이터 테이블로 착각하여 혼란을 줄 수 있기 때문에 <caption>, summary, th를 제공하지 않아야한다.

---

21. 레이블 제공

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

레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말한다.

옷에도 라벨이 있듯이 입력 서식에도 라벨, 즉 레이블을 제공해야 한다.
청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을때 스크린 리더가 "편집창"이라고만 읽어준다.
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로 매칭되어 있는 경우에는 레이블을 제공하고 레이블의 for값과 input의 id값을 동일하게 제공해야함.
  이렇게 제공하면 입력 서식 선택 시 초점이 가는것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게된다.

• 레이블과 선택 서식이 1:1로 매칭되어 있는 경우에도 레이블의 for값과 select의 id값을 동일하게 제공하면 된다.

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

• 라디오 버튼과 체크박스는 컨트롤 크기가 매우 작음.
  레이블을 매칭시켜주면 레이블만 선택하더라도 컨트롤이 선택되기 때문에 편리하다.

<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:n 매칭의 경우 각 입력서식의 타이틀을 제공해야한다.

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

• 시각적으로 레이블이 노출되지 않아 1:1 매칭이 아닌 경우에도 타이틀로 입력 서식에 대한 설명을 제공하면 된다.

<input type="text" title="아이디" />
<input type="text" title="비밀번호" />

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

---

22. 오류 정정

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

입력 서식 작성 시 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다.

입력 서식 작성 시 오류가 발생하여 입력 내용이 모두 사라지는 경우 오류.
ex) 입력 서식을 잘못 입력하고 입력 서식의 전송버튼을 누른 후 입력 내용이 모두 사라진 경우
작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 한다.

오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려주어야 하며
ex)12자 이하만 가능합니다.
오류가 발생한 입력 서식으로 초점이 이동해야한다.

---

23. 마크업 오류 방지

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

오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며 콘텐츠의 일부 기능이 누락되는것을 방지할 수 있다.

마크업 오류의 종류

• 요소의 열고 닫힘이 일치해야 한다.

<ol>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>

<ul>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ul>

ol 태그가 열려만 있고 닫혀 있지는 않아 오류.
마크업 하나로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시작 요소와 끝나는 요소가 정의되어야 한다.
이미지 요소와 같이 단일 태그가 아닌, 열고 닫힘이 존재하는 태그의 경우 열고 닫힘이 일치해야 한다.

<ol>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ol>
<ul>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ul>

ol 태그를 닫아줘야 한다.

• 요소가 중첩된 경우

<a href="…"><span>바로가기</a></span>

a 태그가 열리고 span태그가 열리면 spna태그를 먼저 닫고 a 태그를 닫아야 함.

<a href="…"><span>바로가기</span></a>

시작 요소와 끝나는 요소의 나열 순서는 포함관계가 어긋나지 않아야 한다.

• 이미지 요소의 class 속성 사용이 중복된 경우 오류.
  하나의 요소 안에서 속성을 중복 사용하여 선언하지 않아야 한다.

<img src="apple.jpg" alt="" class="img_box" class="img_01">

<img src="apple.jpg" alt="" class="img_box img_01" >

• 하나의 마크업 문서에 같은 id값을 중복하여 선언하면 오류.

페이지 내에 id값이 중복 선언되지 않도록 제공해야 한다.
레이블과 매칭된 서식의 id가 중복되는 경우에는 21번에도 영향을 미친다.

<div id="main_menu" class="lnb">
…
</div>

<ul id="main_menu" class="menu">
    <li>로그인</li>
    <li>회원가입</li>
</ul>

<div id="main_menu_left" class="lnb">
…
</div>

<ul id="main_menu" class="menu">
    <li>로그인</li>
    <li>회원가입</li>
</ul>

---

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

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

웹 애플리케이션
: 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종.
리치 인터넷 애플리케이션 RIA라고도 한다. ex) 플래시

즉, 웹 애플리케이션을 사용할 수 있도록 접근 가능하도록 구현해야 한다.
따라서 이에 대한 접근성 프로그래밍 인터페이스 사용을 지원하거나
대체 수단을 제공하거나 보조기술을 지원해야 한다.

접근성이 어려운 플래시의 경우 html 버전을 선택할 수 있는 대체 수단이나 대체 텍스트를 제공해야 한다.

여기까지 KWCAG 2.1의 24가지 항목

---

웹 접근성 진단 도구

웹 접근성 지침들을 기준으로 접근성을 지켰는지 진단하는 방법
대부분 수동으로 진단하지만 접근성 진단 시 많이 사용하는 몇가지 진단도구 살펴보기

• Colour Contrast Analyser (CCA)

명도대비를 체크해주는 프로그램
https://developer.paciellogroup.com/resources/contrastanalyser/에 들어가서 설치
텍스트와 텍스트의 배경색을 스포이드로 선택해서 명도대비를 측정할 수 있다.
5번 ) 확대 가능 브라우저에서 명도대비는 최소 3:1 이상이 되도록 구현해야 한다.

• KWCAG a11y inspector

컨트롤의 대각선 길이를 측정해주는 프로그램
크롬 웹 스토어에서 검색하여 추가
10번) 웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현해야 한다

• OpenWAX

접근성을 자동으로 진단가능한 부분까지 진단해주는 프로그램
크롬 웹 스토어에서 추가
자동진단이 가능한 항목들의 결과를 확인할 수 있음.
정확하지는 않아서 수동진단을 병행해야 한다.

• W3C Validation

웹 표준을 검사하는 사이트
웹 표준 오류들을 확인할 수 있다.

---

스크린리더

스크린리더란

스크린을 읽어주는 프로그램
PC와 모바일에서 사용하는 스크린 리더가 모두 다르다.

• 윈도우
  스크린 리더를 설치해서 사용해야함.
  센스리더(유료), NVDA(무료)를 가장 많이 사용. 이외의 다른 스크린 리더도 존재

• 맥
  스크린 리더를 시스템에서 제공.
  컴퓨터에서 설정하고 사용하면 됨

• 안드로이드
  시스템 제공
  Talkback이나 Voice Assistant 사용

• 아이폰
  시스템 제공
  VoiceOver 사용

---

• 가상커서

대부분의 스크린 리더가 지원하고 있는 기능
웹페이지를 마치 워드같은 문서처럼 보여주는 형태를 가상커서라고 함.
스크린리더에서는 가상커서가 기본적으로 활성화가 되어있음
폼 요소에 접근해서 문자를 입력하거나 selectable area에 접근했을때 어떤 요소를 선택해야 한다던가 등에서는 가상커서가 해제가 됨.
그럼 화살표 키를 이용해서 하위요소를 선택할 수 있다

• 빠른 탐색키

스크린리더 사용자는 빠른탐색키 기능을 많이 사용하게됨
웹페이지의 링크 단위 요소로 이동한다던가 폼 요소 단위로 이동한다던가 또는 버튼, 편집창 등의 요소로 이동할 수 있다.