웹 접근성, 검색엔진 최적화 기본 사항🎅

mini·2022년 12월 23일

오늘은 오전 일이 빨리 끝나 공부하고 싶었던 접근성에 대한 정보를
직접 하나 하나 옮기면서 이해하는 시간을 가져볼까 한다!
물런 머리에 잘 안들어오지만 한번 적고 난 뒤 다시 읽으면
괜찮지 않을까.. 하는.. 생각을 가져본다..

웹 접근성(web accessibility)이란?

시각, 청각, 지체 등 장애를 가지고 있는 분들이 스크린 리더와 같은 보조 기술로
웹서핑 시 원하는 컨텐츠를 자유롭게 이용 할 수 있도록 하는것이 웹 접근성이다.

한줄 정의 ) 장애, 비장애 모두가 웹사이트를 이용 할 수 있는걸 의미

웹 접근성 고려한 프로젝트를 진행 한다면, 웹 접근성의 가이드와 준수사항을 체크 해야한다.

실제로 웹접근성마크가 있으며 '웹와치', '한국 웹접근성평가센터', '한국웹접근성인증평가원' 3곳 중 하나를 선택 심사 후 인증마크를 획득 할 수 있다.

심사기준이 높고, 비용도 비싸기에 신경써서 작업을 해야한다.

꼭 마크 획득 목적이 아니라도 기본 코드 작성시 준수하여 나쁘지 않기에 작성하며 공부 해보려 한다!

웹 접근성 준수 체크리스트 Y,N로 가능

1. 인식의 용이

1) 대체 텍스트

이미지에 alt 속성 제공되고 있는가?
이미지에 제공된 텍스트의 내용과 대체텍스트에 제공된 내용이 동일한가?
(* 오타주의)
중복되는 이미지 또는 의미 없는 이미지에 대체텍스트를 제공하고 있지 않는가?
( alt=""에 대한 속성은 존재해야함)
이미지맵에서 대체텍스트 제공시 부모 이미지 alt에 주요정보를 제공하고 하위 area 속성내에서 세분화된 대체텍스트를 제공하고 있는가?
QR코드 제공시 대체텍스트에 이동 주소정보를 제공하고 있는가?

		<img src="map.gif" alt="대한민국 전국지도" usemap="#Map">
		<map id="Map" name="Map">
		<area shape="rect" coords="169.610.247.139" href="#" alt="서울">
		<area shape="rect" coords="169.630.207.119" href="#" alt="경기도">
		</map>

1-2) 멀티미디어대체수단

정보전달을 위한 영상 및 음성 정보에 텍스트(자막, 원고) 또는 수화를 제공하였는가?
제공된 자막의 위치는 동영상과 동일 선상 또는 한눈에 확인할 수 있는 곳에 위치하고 있는가?

1-3) 명료성

콘텐츠를 색에 관계없이(색약자 포함) 인식할 수 있는가?
비교차트, 파이차트, 2가지 이상의 범례를 비교하는 내용 등에는 배경패턴 또는 구분되는 이미지(블릿 등)을 적용
페이지 네비게이션, 메뉴, 현재 위치 등에 대한 명암 패턴 등의 변화를 제공하였는가?
[* 지침2.1 수정안] 이웃한 콘텐츠는 테두리, 구분선, 다른무늬, 명도대비, 줄 간격, 글자간격 등을 사용하여 구별할 수 있게 제공되었는가?
활성/비활성 된 내용의 구분이 뚜렷하도록 활성에 볼드 또는 언더라인 등으로 구분되어 있는가?
배경색 또는 폰트칼라의 차이만으로 활성/비활성을 구분하는 것은 올바르지 않음
텍스트 콘텐츠와 배경간의 명도대비는 4.5:1 이상인가?
[* 지침2.1 수정안] 화면의 확대가 가능한 콘텐츠는 3:1의 명도대비를 기준으로 함.(화면확대 불가시 4.5:1 준수)
보통크기(24px 미만 또는 굵은 19px 미만)의 텍스트는 4.5:1을 만족해야함
보통크기 이상의 텍스트 (24px 이상 또는 굵은 19px 이상)의 텍스트는 3:1을 만족해야함

1-4) 배경음 사용금지

3초이상 자동으로 배경음이 재생되고 있는가?
배경음에 대한 컨트롤러에 대한 내용이 마크업 순서상 먼저 배치되어 있는가?

2. 운용의 용이성

2-1) 키보드 접근성

모든 기능을 키보드만으로 사용할 수 있는가?
다음이동 : Tab, 이전이동 : Shift+Tab, 클릭대체 : Enter, 라디오버튼 : 키보드 방향키 등
동등하게 제공되는 키보드 이벤트 핸들러(onkeypress, onkeyup, onkeydown 등) 없이 마우스 이벤트 핸들러(onmouseover, onmouseout 등) 만 제공되어 지는 경우는 올바르지 않음.
키보드의 초점은 논리적으로 이동하는가?
자연스러운 논리적 이동을 위해 tabindex 사용을 지양한다.
약관 또는 스크롤을 표현하는 div의 경우 해당 영역으로 포커스가 진입되어 스크롤을 핸들링 할 수 있도록 tabindex="0" 의 값을 제공해야 한다.
키보드의 초점은 시각적으로 구별할 수 있는가?
onfocus="this.blur()" 또는 css내 outline="none" 등의 내용이 선언되어 있으면 안됨.
초점을 표시하는 방식은 초점을 받았을때 해당 모양이 반드시 점선의 사각형이 아니더라도 시각적으로 구분이 가능하다면 초점을 제공한 것으로 간주함
조작가능
컨트롤의 크기가 가로 대각선 방향으로 6.0mm 이상의 크기를 제공하고 있는가?

2-2) 충분한 시간제공

시간제한이 있는 콘텐츠일 경우 시간을 조절할 수 있는가?(경매, 온라인 시험, 실시간 게임 등 제외)
시간이 종료하기 전 경고가 발생하는가? (레이어 또는 알럿을 통한 화면 전환 및 소리 경고)
움직임이 있는 콘텐츠에 움직임을 제어할 수 있는 컨트롤러가 제공되었는가?
컨트롤러가 명시적으로 제공되지 않아도 키보드 진입시 콘텐츠를 제어할 수 있으면 제공한 걸로 인정(* 컨트롤러 명시를 권장)
컨트롤러의 위치가 움직이는 콘텐츠보다 마크업 순서상 먼저 배치되어 있는가?

2-3) 광과민성 발작 예방

초당 3 ~ 50회 주기로 깜빡이거나 반짝이는 콘텐츠가 포함되어 있는가?
[* 지침2.1 수정안] 10인치 이상의 화면에 표시된 번쩍이는 콘텐츠의 합이 화면 전체 면적의 10%를 초과하는가?

2-4) 쉬운 네비게이션

건너뛰기 링크를 제공하고 있는가?
[* 지침2.1 수정안] 화면내 명시적으로 제공하고 있는가?
건너뛰기 링크가 마크업 순서상 body 태그 바로 아래 위치하고 있는가? (문서상 가장 먼저 제공되고 있는가?)
[* 지침2.1 수정안] 여러 개의 건너뛰기 링크를 제공하고 있는 경우 핵심영역으로 이동하기 위한 건너뛰기 링크가 가장 먼저 제공되고 있는가?
건너뛰기 링크의 기능이 정상적으로 동작하고 있는가?
페이지, 프레임, 콘텐츠 블록에 적절한 제목을 제공하고 있는가?
팝업창은 팝업창임을 문서 타이틀에 명시해야 한다.(ex 팝업창 | 로그인)
신청 또는 작성하기 화면도 문서타이틀에 해당 내용을 명시할 것(한국웹접근성 인증평가원 권고사항)
페이지 제목이 콘텐츠의 내용을 나타내야 한다.
대표인사말 | 회사소개 | COMPANY
문서 타이틀 제공시 의미없는 특수문자의 반복이 있는가?(반복이 있으면 오류)
[오류ex] ::::::: COMPANY ::::::::::, ▩▩ COMPANY ▩▩... 등
콘텐츠의 구분은 h1 ~ h6 요소를 활용하여 재공하고 있는가?
콘텐츠의 제목은 논리적 순서에 맞게 제공되고 있어야 함.
링크텍스트는 용도나 목적을 이해할 수 있게 제공되었는가?
링크는 주변 맥락을 통하여 용도나 목적지를 명확하게 이해할 수 있는 링크텍스트를 제공하고 있는가?
문장의 일부분에 링크를 연결하는 경우 URL목적지, 용도 등을 표현한 링크를 연결하고 있는가?
[ 오류ex ] 주문내역에 대한 상세정보는 여기를 클릭하세요.
[ 올바른 ex ] 주문내역에 대한 상세정보는 [마이페이지 > 주문정보]에서 확인하실 수 있습니다.

3. 이해의 용이성

3-1) 가독성

HTML 코드에 주언어 관련 속성(lang)이 선언되어 있는가?
기본언어는 페이지 상단에태그에 lang속성을 이용하여 지정하고, lang 속성 값에는 ISO 639에서 지정한 두 글자로 언어코드 (한국:ko)를 사용하도록 한다.
ISO 639 참고 : http://www.mcanerin.com/en/articles/meta-language.asp

3-2) 예측가능성

사용자가 의도하지 않은 기능(새창, 초점변화 등)이 자동으로 실행되고 있지는 않는가?
[* 지침2.1 수정안] 사전 경고없이 열리는 팝업창의 수는 1개이다.
레이어팝업은 콘텐츠의 논리적 초점 이동 및 콘텐츠의 논리적 선형구조를 완료하고 있는가?

3-3) 콘텐츠의 논리성

콘텐츠는 논리적인 순서(선형구조)로 제공되는가?
데이터 table 속성에는 summary, caption 정보가 올바르게 제공되었는가?
데이터 테이블인 경우 thead, tbody, th 으로 그룹핑되어 있는가?
레이아웃용(배치용) table에 caption, summary, thead, th 의 요소가 제공될 경우 오류임.
표의 제목 속성인 th에 알맞은 scope를 제공했는가? 가로열 th는 col / 세로열 th는 row
제목과 내용이 연속되어 있는 구조의 경우 [제목+내용]의 순으로 선형구조를 이루고 있는가?
반드시 제목+내용의 구조가 아니더라도, 직관적으로 내용을 이해할 수 있는 상태로 이해가 용이하게 제공.
예시)

<ul>
			<li><a href="#menu01" class="on" title="현재메뉴">메뉴1</a></li>
			<li><a href="#menu02">메뉴2</a></li>
			<li><a href="#menu03">메뉴3</a></li>
		</ul>
		 
		<div id="menu01">
			<strong>메뉴1</strong>
			<div>메뉴1 컨텐츠</div>
		</div>
		<div id="menu02">
			<strong>메뉴2</strong>
			<div>메뉴2 컨텐츠</div>
		</div>
		<div id="menu03">
			<strong>메뉴3</strong>
			<div>메뉴3 컨텐츠</div>
		</div>

3-4) 입력도움

입력서식에 대웅하는 올바른 label 제공되고 있는가?
입력서식에 대응하는 레이블을 제공한 경우 준수한 것으로 인정
오류유형

  <input type="image | hidden | submit | button | reset">을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1 대응하는 <label> 요소 또는 title 속성을 제공하지 않은 경우

입력을 위한 도움 안내메세지가 입력양식보다 우선으로 제공되고 있는가?
오류유형

<input type="image | hidden | submit | button | reset">을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1 대응하는 <label> 요소 또는 title 속성을 제공하지 않은 경우
 <input>의 id 와 <label>의 for 가 다르거나, 페이지 안에 같은 id 가 있는 경우
 <select>요소의 첫 번째 <option>이 레이블 역할을 대신하는 경우
 입력을 위한 도움 안내메세지가 입력양식보다 우선으로 제공되고 있는가?
[ 오류ex ] <input type="text"><span>아이디는 영문과 숫자를 혼용으로 입력하셔야 됩니다.</span>
[ 올바른ex ] <span>아이디는 영문과 숫자를 혼용으로 입력하셔야 됩니다.</span><input type="text">

주의사항
레이블로 연결할 텍스트가 있는 경우 title 속성보다 label 요소를 제공하는 것을 권장

id, for 속성을 사용하지 않고 label 요소로 레이블 텍스트와 서식 콘트롤을 한꺼번에 묶는 암묵적인 방법을 사용한 경우도 인정하지만 권장하지 않음.

예시) 암묵적방법 ```

오류 : <label><input type="checkbox"> 암묵적</label>
올바른 : <label for="see"> 명시적</label><input type="checkbox" id="see">

입력오류를 정정할 수 있는 방법이 제공되는가?
입력 오류를 정정할 수 있는 방법을 제공한 경우 준수한 것으로 인정(입력오류 정정에 대한 내용은 구체적으로 제공해야 함)
오류유형
1) 입력 서식을 잘못 작성한 경우 해당 서식 필드로 초점을 이동할 수 있는 수단을 제공 하지 않거나
2) 해당 서식의 전송버튼을 눌렀을 때, 입력 내용이 모두 사라지는 경우
3) 오류 발생시, 정정할 수 있는 수단을 제공하지 않는 경우
4) 입력 정정방식 또는 내용을 잘못 제공한 경우
[ 오류ex ] 서식의 내용을 입력해주세요. | 입력서식의 내용이 올바르지 않습니다. | 날짜를 선택해 주세요.
[ 올바른 ex ] 이름을 입력해주세요. | 비밀번호 입력이 잘못되었습니다. | 년도(or 년월일)을 선택해주세요.
입력 오류로 정정 메세지 확인후에는 오류가 난 입력서식으로 초점이 이동되어야 함.(키보드 접근성을 함께 확인)

주의사항
오류가 있는 곳에만 오류 표시를 하면 전맹이나 저시력자는 오류가 난 곳에 도달 하기 전까지는 어디에 오류가 있는지 알기 어려우므로 오류의 내용을 먼저 텍스트로 설명해주거나, 프로그램을 통해 오류가 난 위치에 도달하도록 하고, 오류의 내용을 설명해 주어야 함

4. 견고성

4-1) 문법준수

태그의 열고 닫음이 올바르게 되어 있는가?
오류 예제

<p><span>태그 여닫음에 대한 오류<span></p>

태그의 속성이 중첩되어 적용되고 있지 않는가?
오류 예제

<a href="#"><span>태그 속성 중첩 대한 오류</a></span>

한 요소에 중복된 속성 선언이 있는가?
오류 예제

<p class="test" class="tit">클래스중첩오류</p>
<input type="text" name="testGroup" name="testGroup">

한 페이지에 중복된 id 속성값 선언 여부를 체크한다.
오류 예제

<input type="text" id="testGroup">
<input type="password" id="testGroup">

4-2) 웹 어플리케이션 접근성

웹 어플리케이션(javascript, 애플릿, ActiveX, Flash, 실버라이트 등)이 자체적인 접근성을 준수하고 있는가?
웹 어플리케이션에 대한 자체 접근성 준수는 사용자 심사에서 진행됨
지도 api 및 SNS api 서비스에 들어있는 이미지 및 링크 등에 대한 내용이 KWACG의 모든 내용을 준수하고 있는가?
ex. 이미지 대체텍스트, 링크 새창알림, 타이틀 등
Ajax 사용으로 인한 데이터의 갱신은 수동 또는 사용자 선택으로 이루어지고 있는가?
새로고침, 더보기 버튼 등을 통한 데이터 업데이트 제공
실시간 데이터 갱신일 경우, 멈춤 기능 제공

출처 http://210.116.77.11/pbGuide/guide/html/wah/wahChecklst.html WAH 가이드라인

쓰고 보니 너무 복잡하고 지루한 느낌이 있어서 다른날에
좀 더 간락하게 정리 해봐야겠다!