[부스트코스] 웹 접근성 지침 정리 1

 

 

2. 웹 접근성 지침

0) 웹 접근성 지침 소개

• WCAG (Web Content Accessibility Guidelines)  - W3C
• KWCAG (Korea)
  • 해외 웹표준기술 동향을 토대로 국내 실정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침 
  • 원칙 4개, 지침 13개, 검사항목 24개
    1. 인식의 용이성
       • 대체텍스트
       • 멀티미디어 대체 수단
       • 명료성
    2. 운용의 용이성
       • 입력장치 접근성
       • 충분한 시간 제공
       • 광과민성 발작 예방
       • 쉬운 내비게이션
    3. 이해의 용이성
       • 가독성
       • 예측 가능성
       • 콘텐츠의 논리성
       • 입력 도움
    4. 견고성
       • 문법 준수
       • 웹 애플리케이션 접근성

 

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

• 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 함
• 텍스트 아닌 콘텐츠 = 이미지
• alt로 대체 텍스트 제공

<img src="main.jpg" alt="설명 블라 블라">

• input
  • image
  • button
• map
  • area

 

<img src="160314.png" alt="">
<p class="blind">
	텍스트 블라 블라
</p>

<style>
	.blind {
    	display: none;
    }
    .blind {
    	visibility: hidden
    }
</style>

• 대체 텍스트가 너무 긴 경우에는 이미지에는 alt="" 빈값으로 제공하고, 대체텍스트를 따로 마크업으로 제공함
• 해당 마크업을 보이지 않게 처리해야 함 (css)

 

• 차트나 표의 경우에도 대체 텍스트 제공해야 함

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

 

• 의미없는 이미지에도 alt 속성값이 아닌 alt 속성 자체는 무조건 제공해야 함
  • alt가 없으면 스크린리더는 의미없는 이미지 파일명을 읽어주게 됨
  • alt가 적용되어 있지만 alt=" " 속성값에 띄어쓰기가 한 칸이라도 되어 있으면 이미지 파일명을 읽음
  • alt="" <- 이런 식으로 공백 없이 제공해야 함
• 캡차 (회원 가입 시 보안문자 같은 거)
  • 시각적 캡차와 "음성으로 듣기"와 같은 청각적 캡차를 동시에 제공함

 

---

2) 자막 제공

• 멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 함
• 제 3자가 영상을 업로드하는 경우 대체 콘텐츠를 제공할 수 있도록 툴 제공
• 멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우, 대체 콘텐츠를 제공해야 함

 

---

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

• 콘텐츠는 색에 관계없이 인식될 수 있어야 함
  • 차트의 경우 색 대신 패턴이나 굵기로 구분
  • 슬라이드 버튼의 경우 색이 아닌 모양으로 구분
  • 페이지네이션의 경우 테두리나 굵기로 구분
  • 탭을 색으로만 구분하지 말고, 배경으로 구분

 

---

4) 명확한 지시 사항 제공 

• 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 함
  • *아이디(ID) <- 왼쪽과 같이 *(별표)로만 제공하면 안 됨
  • └ 텍스트로 '* 표시는 필수 입력 사항입니다'라고 안내해야 함

 

---

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

• 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 함 (
  • 툴: Colour Contrast Analyser
  • 의미 있는 이미지도 명도 대비 준수해야 함

 

---

6) 자동 재생 금지

• 자동으로 소리가 재생되지 않아야 함
  • 동영상, 오디오, 음성, 배경 음악 등
  • 스크린리더 음성과 겹치게 되면서 페이지 내용을 인식하기 어려움
  • 마우스 오버 또는 키보드 접근으로 재생되는 3초 이상의 배경음 콘텐츠도 오류임
    • 클릭이나 선택 시에 재생되도록 해야 함

 

 

 

부스트코스 '웹 접근성 이해' 강의 정리