웹접근성 공부중 메모

🐢나도다만들고싶다·2021년 1월 11일

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

<img alt="다음 콘텐츠 보기">
<input type="image" alt="대체 텍스트">
<input type="button" alt="대체 텍스트">
<map><area alt="대체 텍스트"></area></map>

대체 텍스트가 너무 긴 경우

img의 alt는 빈 값으로 제공하고 대체 텍스트는 따로 마크업 제공하여도 됨.

ex) img 내부콘텐츠가 리스트로 되어있는 경우
ul>li로 마크업하면 스크린리더에서 목록이라고 알아서 읽어 줌.
따라서 구조적 마크업이 가능한 경우 이와같이 제공해 주는 것이 좋음.

ex) 데이터 차트나 복잡한 컨텐츠의 경우
table 마크업으로 대체 텍스트를 제공하는 방법도 있음

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

대체 텍스트를 따로 제공하는 경우 .blind와 같은 ir기법으로 해당 마크업이 보이지 않게 처리
display: none, visibility: hidden - 스크린리더에서 읽어주지 않음

배경 이미지로 처리된 아이콘의 경우(예: 이전, 다음버튼...)에도 대체 텍스트 필요함.

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

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

의미없는 이미지의 경우(예: bar라인...)

alt 속성 자체는 무조건 제공해야하므로 이 경우 빈 값을 전달

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

alt 속성을 제공하지 않으면 src의 파일명을 읽어주기 때문

썸네일 이미지

케이스1) 이미지와 텍스트를 각각의 링크로 구현하는 경우
img에도 대체 텍스트를 중복으로 제공하여야하는데 그럼 2번 읽기때문에 case2의 방법을 권유

<a href="...">
	<img src="..." alt="대체 텍스트1">
</a>
<a href="...">
	<span>대체 텍스트1</span>
</a>

케이스2) 이미지와 텍스트를 함께 링크로 묶는 경우
img의 alt값은 빈 값으로 제공

<a href="...">
	<img src="..." alt="">
    <span>대체 텍스트2</span>
</a>

2) 자막 제공

멀티미디어 콘텐츠에는 이에 대한 대체 수단을 제공해야 함.
자막, 대본, 수화 등이 있으며 이 중 하나를 제공하면 됨

음성이 나오지 않는 영상

멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우는 시각적으로만 인식이 가능하므로 따로 원고를 제공하는 등의 방법을 통해 대체 콘텐츠를 제공해야 합니다.

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

색으로만 구분하는 것이 아니라 패턴, 굵기, 모양, 테두리 등으로 구분을 해줘야 함

주의!

슬라이드 버튼(색만 달리하는게 아니라 모양도 달리)
페이지네이션(테두리나 굵기 등을 추가)
탭(배경반전 추가)

4) 명확한 지시 사항 제공

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

주의! 회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류입니다.

따로 "*표시는 필수 입력 사항입니다."라는 설명을 제공해하거나,
'*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나,
'*'영역에 "필수"라는 정보를 숨김 텍스트로 제공하면 됩니다.

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

텍스트 : 배경 명도 = 4.5 : 1 이상

예외 : 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠
확대가능한 브라우저는 3 : 1 이상

6) 소리 자동 재생 금지

7) 콘텐츠 간의 구분🌟

이웃한 콘텐츠 구분 방법

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

8) 키보드 사용 보장🌟

마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능이 동일하도록 구현해야 합니다.

사례에 따른 해결 방안

마우스 오버 시 드롭 다운 메뉴가 노출:
키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현

자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출

    >> 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현

특정 버튼에 마우스 오버 시 레이어(말풍선) 노출

    >> 키보드 접근 시에도 레이어가 노출되도록 구현

이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용

    >> 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현

a링크 요소에 href속성이 없는 경우

    >> 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href 속성을 반드시 제공

a링크에 href속성은 있지만가 적용이 되어 있는 경우

    >> 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 제거하고 구현

키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우

    >> 키보드가 함정에 빠지지 않고 마우스 사용시와 동일하게 접근 가능하도록 구현

9) 초점 이동🌟

레이어 팝업

초점 이동 순서 : 레이어 팝업 노출시키는 컨트롤 > 레이어 팝업 내부 > 레이어 팝업 닫기 > 레이어 팝업 노출시키는 컨트롤

10) 조작 가능🌟

컨트롤 대각선 길이 6mm 이상
컨트롤이 연달아 있을 때 컨트롤과 컨트롤 사이에 1픽셀 이상의 여백

11) 응답 시간 조절

페이지 진입 시 바로 리프래시되는 것이 아니라 Meta 요소의 refresh 속성 등을 사용하여 일정 시간이 지난 뒤 페이지가 자동 전환되는 경우도 마찬가지로 오류입니다.

페이지 자동 전환

연장 가능 수단 제공
해제 가능 수단 제공

12) 정지 기능 제공🌟

자동 변경 슬라이드

이전, 다음, 정지 기능을 제공해야 함
정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정됩니다.

자동 변경 콘텐츠

이전, 다음, 정지 기능을 제공하거나 전체 콘텐츠를 제공해야 합니다.

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

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

14) 반복 영역 건너뛰기🌟

반복 영역: 모든 웹페이지에 공통적으로 들어있는 부분(nav...)

반복 영역 건너뛰기 제공 방법

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

"본문 바로가기" 우선 제공

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

15) 제목 제공🌟🌟🌟

페이지 제목 제공

웹 페이지의 제목은 유일하고 서로 다르게 제공해야 합니다.
제일 하위분류로 적절하게 제공.

뉴스 상세 페이지: 해당 뉴스에 대한 타이틀을 제목으로 제공
게시판: 글 읽기, 글 보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공

각 페이지의 핵심 내용을 제목으로 제공해주시면 됩니다.

프레임 제목 제공

title 속성 사용하여 프레임을 설명하는 간단 명료한 제목을 제공.
빈 프레임의 경우 title="빈 프레임", title="내용 없음"으로 제공

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

콘텐츠 제목 제공

콘텐츠 블록에도 제목을 제공해야 합니다.

주의! 동일한 depth에 있는 콘텐츠는 하위나 상위 콘텐츠가 아니기 때문에 동일한 헤딩 태그로 일관성 있게 제목을 제공해야 합니다

특수 기호 사용 제한

특수 기호는 1개까지만 사용 제한

16) 적절한 링크 텍스트🌟🌟

빈 링크

의미없는 빈 링크는 제거해야 합니다.

(X)

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

독립적 이미지 링크

이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류

(O)

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

독립적 배경 이미지 링크

(O)

<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만 링크로 제공하는 것보다는 해당 주소의 목적을 함께 제공하는 것이 좋음

!!!!!
"더 보기"나 "자세히 보기" 같은 링크의 경우에도 문맥상 알 수 있으나 어떤 콘텐츠의 더 보기인지 명확히 링크 텍스트를 제공해주는 것이 더 좋기 때문에 예를 들면 "공지사항 더 보기"라고 공지사항 텍스트를 숨김 처리로 제공해주는 것이 좋습니다.

즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 합니다.

17) 기본 언어 표시

<html lang="ko">

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

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

페이지 진입 시 뜨는 새 창(팝업) --> 오류

화면을 가리는 레이어 팝업 --> 오류

이를 준수하기 위해서는 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나 화면을 가리지 않고 가장 상단에 레이어 팝업을 제공해야 합니다.

사전에 인식할 수 없는 새 창 --> 오류

Window.open을 사용하여 새 창을 띄우는 경우, 새 창이 뜬다는 것을 인지할 수 없기 때문에 비추.

링크 요소 내부에 blind로 새 창이라는 텍스트를 넣어주거나

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

또는 title로 새 창이라고 제공


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

또는 target="blank"로 적용하여 새 창이 열릴 것이라고 사전에 알려 주어야 합니다.


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

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

컨트롤 선택 시 기능 실행

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

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

select에 onchange 이벤트 적용

select에 onchange 이벤트가 적용되어 option을 선택하자마자 페이지가 이동된 경우 오류
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) 표의 구성🌟🌟

제목 셀이 가로, 세로로 있는 경우 scope로 행 제목인지 열 제목인지 구분 가능하도록 제공

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

caption에 제목과 요약 정보를 모두 제공

요약정보를 제공하기 어려운 경우 제목셀 나열

예시)

<table>
	<caption>
		<strong>직원 관리 현황 표</strong>
		<span>부서별 직원 수, 합계 정보</span>
	</caption>
	<thead>
    ...

복잡한 표

id와 header

<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에 나열해주시면 됩니다.

스크린리더에서는 headers에 나열된 id 값 순서대로 제목 셀을 읽어줍니다.

즉, 이 "902"를 그냥 "902"라고 읽어주는 것이 아니라, "기준일 2018년 10월 20일 경기도 매매가 면적단가 902"라고 읽어주게 됩니다. 제목들을 연결해서 읽어주는 것입니다.

21) 레이블 제공🌟

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

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

<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:多 매칭인 경우

<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) 마크업 오류 방지

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

접근성 진단

Colour Contrast Analyser(CCA) 색 명암 분석기
윈도우프로그램
https://developer.paciellogroup.com/resources/contrastanalyser/
CCA-Setup-3.1.2.exe 설치

kwcag a11y inspector 컨트롤 대각선 길이
chrome 확장 프로그램
https://chrome.google.com/webstore/detail/kwcag-a11y-inspector/ngcmkfaolkgkjbddhjnhgoekgaamjibo?hl=ko

W3C Validation 웹표준, 마크업 검사
사이트
https://validator.w3.org/

OpenWAX 웹접근성 진단
chrome 확장 프로그램
https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe/related?hl=ko

5.기타

접근성 컴포넌트 대각선도구 컨트롤 대각선 길이
https://chrome.google.com/webstore/detail/%EC%A0%91%EA%B7%BC%EC%84%B1-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%8C%80%EA%B0%81%EC%84%A0%EB%8F%84%EA%B5%AC/chogmnfcfckihakaealpjfjdkbjmkpok?hl=ko

headingsMap 헤딩트리
https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ko

WAVE Evaluation Tool 웹접근성 진단
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=ko

참고자료

https://www.edwith.org/web-accessibility/lecture/46012/
https://nuli.navercorp.com/guideline/s01/g01
https://nuli.navercorp.com/education

https://web-for-all.tistory.com/3
https://seulbinim.github.io/WSA/structure.html#section-요소
https://seulbinim.github.io/WSA/html-basic.html#html4-01-xhtml1-0과-html5의-차이점

🐢나도다만들고싶다

자기계발일지. 디자인+퍼블짬밥 1년4개월된 초보자입니다.. 여긴 개발자분들만 계시넹

이전 포스트

Swiper 응용 :: 여러 개 노출 및 미리보기

1개의 댓글

dev.tinkerbell

2021년 1월 19일

a요소의 blind에 대한 내용은 처음 알았어요! 좋은 정보 얻고 가요! 감사합니다 :) 👍

답글 달기