웹 접근성

김서현·2022년 7월 4일

웹 접근성

프론트엔드 스터디

목록 보기

5/16

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.

📌 1. 웹 접근성의 이해

1) 웹 접근성이란

웹 접근성 : 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것

웹 접근성을 지켜야 하는 첫 번째 이유
-> 장애인 차별 금지법

2) 장애 환경

전맹 시각 장애
저시력 시각 장애
중증 운동 장애
손 운동 장애
청각 장애
맥 사용자
느린 인터넷

📌 2. 웹 접근성 지침

0) 웹 접근성 지침 소개

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

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

alt로 대체 텍스트 제공

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

마크업으로 대체 텍스트 제공

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

데이터 차트나 복잡한 콘텐츠

<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');
}

의미 없는 이미지

<img src="123456.jpg" 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>

썸네일 이미지

썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 이미지의 대체 텍스트와 링크 텍스트가 중복이 되기 때문에 스크린리더에서 동일한 내용을 2번 읽어줌. 따라서 다음과 같이 이미지와 텍스트를 하나의 링크로 묶어주고 대체 텍스트가 이미 존재하기 때문에 이미지에는 alt를 빈 값으로 제공해 주는 것이 좋음.

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

캡차 이미지

캡차 : 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법

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

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

사용자가 업로드하는 이미지의 경우 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 툴을 제공

2) 자막 제공

멀티미디어 대체 수단 제공

대체 수단 : 자막, 대본, 원고, 수화

사용자가 업로드하는 멀티미디어

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

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

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

4) 명확한 지시 사항 제공

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

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

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다. (확대 가능한 브라우저에서 최소 3:1 이상)

6) 자동 재생 금지

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

불가피하게 제공할 경우 해결 방안

3초 내에 정지

ESC 키 선택 시 정지

소스 상 가장 먼저 제공하여 정지 기능 실행 가능하도록 구현

7) 콘텐츠 간의 구분

이웃한 콘텐츠는 구별될 수 있어야 한다.
1. 테두리 이용
2. 구분선 삽입
3. 서로 다른 무늬
4. 배경색 간의 병도대비
5. 줄 간격 및 글자 간격 조절
6. 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분

8) 키보드 사용 보장

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

이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용
-> 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현
a링크 요소에 href속성이 없는 경우
-> 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href 속성을 반드시 제공
a링크에 href속성은 있지만가 적용이 되어 있는 경우
-> 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 제거하고 구현

9) 초점 이동

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

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

"hideFocus"적용하거나 CSS에서 "outline:none"처리를 하거나를 사용하면 전부 초점이 보이지 않게 되므로 주의

10) 조작 가능

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

컨트롤 대각선 길이 6mm 이상
컨트롤 테두리 안쪽으로 1픽셀 이상의 여백

11) 응답 시간 조절

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

시간 연장 가능
페이지 자동 전환 해제 기능

12) 정지 기능 제공

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

마우스 오버 시 정지 + 키보드 정지 시 정지 = 정지 기능
마우스 오버 시, 키보드 접근 시 모든 콘텐츠 노출

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

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

프로그램 : PEAT

14) 반복 영역 건너뛰기

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

마크업상 최 상단에 위치
링크가 페이지 내에 존재
키보드 접근 시 화면에 노출
하단 메뉴로 바로 가기와 같은 위치 정보 제공은 부적절

15) 제목 제공

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

페이지 제목 제공 : 해당 내용을 이해할 수 있도록 제일 하위분류로 적절하게 제공해야 한다.

16) 적절한 링크 텍스트

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

17) 기본 언어 표시

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

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

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

새 창 제공 방법

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

19) 콘텐츠의 선형 구조

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

20) 표의 구성

제목과 요약 정보 제공

제목 셀과 내용 셀 구분
제목 셀은 th로 내용 셀은 td로 마크업
제목 셀이 가로, 세로로 있는 경우 scope로 행 제목인지 열 제목인지 구분 가능하도록 제공
레이아웃 테이블에는 caption, summary, th를 제공하지 않아야 한다

21) 레이블 제공

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

<label for="user_id">아이디</label>
<input type="text" id="user_id">

22) 오류 정정

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

오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려주어야 함
오류가 발생한 입력 서식으로 초점이 이동

23) 마크업 오류 방지

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

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

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

📌 3. 웹 접근성 진단 도구

1) 웹 접근성 진단 도구

Colour Contrast Analyser (CCA) : 명도 대비를 체크해주는 프로그램
KWCAG a11y inspector : 컨트롤의 대각선 길이를 측정해주는 프로그램
OpenWAX : 접근성을 자동으로 진단해주는 프로그램

📌 4. 스크린리더

1) 스크린리더

윈도우

센스리더 베이직 6.5

NVDA Version 2018.4

MAC

VoiceOver

Android

Talkback

Voice Assistant

iOS

VoiceOverr

김서현

이전 포스트

프로젝트 A - HTML, CSS

다음 포스트

웹 접근성

프론트엔드 스터디

📌 1. 웹 접근성의 이해

1) 웹 접근성이란

2) 장애 환경

📌 2. 웹 접근성 지침

0) 웹 접근성 지침 소개

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

2) 자막 제공

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

4) 명확한 지시 사항 제공

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

6) 자동 재생 금지

7) 콘텐츠 간의 구분

8) 키보드 사용 보장

9) 초점 이동

10) 조작 가능

11) 응답 시간 조절

12) 정지 기능 제공

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

14) 반복 영역 건너뛰기

15) 제목 제공

16) 적절한 링크 텍스트

17) 기본 언어 표시

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

19) 콘텐츠의 선형 구조

20) 표의 구성

21) 레이블 제공

22) 오류 정정

23) 마크업 오류 방지

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

📌 3. 웹 접근성 진단 도구

1) 웹 접근성 진단 도구

📌 4. 스크린리더

1) 스크린리더

프로젝트 A - HTML, CSS

HTML, CSS 심화 (1)

0개의 댓글