[HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기

공공기관이나 규모가 큰 사이트는 웹접근성 인증을 받는 경우가 많다.

이번에 처음으로 웹접근성 심사가 필요한 프로젝트(PC 웹)를 하였는데 웹접근성 받는 것이 생각보다 많이 까다롭더라.

 

다음에 또 웹접근성 인증이 필요한 프로젝트를 진행할 경우 같은 혼란을 반복하지 않기 위해 기록용으로 자료를 남겨두려한다.

 

웹접근성이란?
웹접근성 인증 홈페이지 참고
웹접근성 심사 항목
웹접근성 작업 Tip

👀 정보통신접근성(웹접근성) 인증이란?

장애인, 고령자 등 정보접근약자가 웹 사이트 이용에 불편이 없도록 「지능정보화기본법」 제47조 및 동법 시행규칙 제5조에 의거 ‘국가표준 한국형 웹 콘텐츠 접근성 지침 2.1’을 준수한 웹사이트에 대해 정보통신접근성(웹접근성) 수준을 인정하고 이를 상징하는 정보통신접근성(웹접근성) 품질 마크를 부여하는 인증 제도
[출처: http://www.kwacc.or.kr/Accessibility/Certification]

 

📌 정보통신접근성(웹접근성) 인증 홈페이지 참고하기

http://www.kwacc.or.kr/CertificationSite/WA/List

한국웹접근성평가센터

 

📋 웹접근성 심사 항목

• 적절한 대체 텍스트 제공
• 자막 제공
• 색에 무관한 콘텐츠 인식
• 명확한 지시사항 제공
• 텍스트 콘텐츠의 명도 대비
• 자동재생 금지
• 콘텐츠 간의 구분
• 키보드 사용 보장(PC웹)
• 누르기 동작 지원(모바일 웹)
• 초점 이동
• 조작 가능
• 응답시간 조절
• 정지 기능 제공
• 깜빡임과 번쩍임 사용 제한
• 반복영역 건너뛰기
• 제목 제공
• 적절한 링크 텍스트
• 기본 언어표시
• 사용자 요구에 따른 실행
• 콘텐츠의 선형화
• 표의 구성
• 레이블 제공
• 오류 정정
• 마크업 오류 방지
• 웹 애플리케이션 접근성 준수

지켜야 할 것이 상당히 많다.

이 중에 내가 1차 심사에서 까인 부분들을 위주로 살펴보겠다.

 

📂 웹접근성 심사 Tip

동영상 콘텐츠
텍스트와 배경색 명도 대비
키보드에 의한 초점 이동
h 태그 사용
title="새창열림"
논리적인 마크업
label 제공
alt 그리고 IR기법
html lang="ko"
TABLE 캡션
본문 바로가기
Footer의 셀렉트박스

 

1. 웹페이지에서 동영상 컨텐츠를 임베드하거나, 파일로 제공할 경우 영상 내의 자막이 음성과 일치해야하며, 영상 내에 텍스트 정보가 완전하지 않은 경우에는 텍스트를 원고로 제공하여야한다. (자막, 원고 또는 수화를 제공해야 함) / 동영상 자동재생 금지

원고 예시)

원고를 추가할게 아니라면 애초에 동영상의 자막이 완벽할 것.

 

 

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

이 명도 대비를 확인하기 위해서는 명도 대비 프로그램을 설치하거나, 명도 대비 체크 사이트를 이용하면 된다.

참고로 여기서 말하는 "화면 확대가 가능하도록 구현한 콘텐츠"는 크롬 브라우저 기준으로 텍스트 크기가 확대 가능한 경우가 해당한다. 보통 PC 웹에서는 가능한 부분이므로 콘텐츠의 명도대비는 3:1을 준수하면 된다.

이 명도를 지키면 색상이 쨍해져서 역시 심미성을 유지하기가 조금 어렵다.

내가 참여한 이번 프로젝트의 경우에는 root에 선언한 컬러를 전체적으로 바꿔야했다.

애초에 디자인 단계에서 연한 색상을 사용하지 않도록 하자.

그리고 게시판이 있는 경우, 게시판 내 이미지의 명도까지 확인하니 컨텐츠 디자인에서도 명도 기준을 준수해야 한다.

 

3. 모든 기능은 키보드만으로도 사용 할 수 있어야 한다. / 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. 

* 참고로 페이지 내에서 탭 키로 다음 요소로 이동, shift + tab 키로 이전요소로 이동한다.

 

모달창의 클로즈 버튼이 키보드로 포커스가 불가능했는데 이 부분을 지적받았다. 이 부분은 tabindex나 focus 함수를 이용하여 해결을 했다. (나말고 개발자님이 ㅎㅎ..)

모든 메뉴에 키보드로 접근이 가능해야하는데, 키보드 탭 순서가 마크업 순서에 따라서 이동하기때문에 보이는 화면과 다를 수 있다. 그렇기때문에 웬만하면 메뉴는 ul>li>a 구조를 사용하여 마크업 순서를 잘 지키도록 하자.

그리고 초점을 받은 요소가 시각적으로 구별이 가능해야한다.

이게 무슨 말이냐면 탭으로 포커스가 된 요소는

이렇게 outline/border나 배경색상으로 확실하게 나타나야한다는 것이다.

 

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

헤더에 들어가는 메인 로고의 경우 h태그로 감싸야한다.

또한 페이지 내의 타이틀 항목은 h태그로 제공해야 한다.

예를 들어, 제목을 <div class="sub_title">제목</div> 이렇게 하면 안되고 <h2 class="sub_title">제목</h2> 이렇게 적절한 타이틀 태그를 사용해야 한다는 것이다.

 

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

a태그가 target="_blank" 또는 자바스크립트로 새 창으로 열리는 경우,

<a class="" href="" target="_blank" title="새창열림"> 이렇게 title="새창열림"을 추가해야한다.

단, 파일 다운로드를 위한 a 태그에는 새창열림 타이틀이 불필요하다.

 

6. (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.

이게 정말 애매하다. "마크업의 순서를 논리적으로 제공"이라니!

이 프로젝트의 경우에는 풀스크린 인덱스 화면에 좌,우 영역이 나눠지고 헤더, 배경이미지슬라이더, 배너 슬라이더, 동영상 컨텐츠. 메뉴링크들 등 콘텐츠가 많았고 마크업 순서가 화면과 일치하지는 않았다. position 속성과 z-index 속성을 많이 사용하여 레이아웃을 맞췄기때문인데, 애초에 코딩 단계에서 최대한 시멘틱 마크업을 하도록 하자.........

이건 수정이 어려우므로 정말 기초 작업을 잘 해놔야한다.

 

7. (레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다. 

<input>, <textarea>, <select> 요소에 1:1 대응하는 <label>요소 또는 title 속성을 제공하지 않거나 설명이 적절하지 않은 경우

즉 위의 요소들에는 label을 꼭 달아야한다는 것.

 

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

의미있는 버튼이나 이미지 등 요소에 img태그를 이용하지않고, CSS의 background 속성으로 이미지를 표시한 경우, 대체 텍스트를 제공해야한다.

찾아오시는 길, 뉴스, 사진과 같은 본문 이미지에 대하여 대체텍스트(alt)를 빈값으로 제공하고, 본문에 설명을 제공하면 준수한 것으로 인정
대체 텍스트 제공을 위해 IR(Image Replacement)기법을 사용하고 그 내용이 적널한 경우 준수한 것으로 인정

이 경우 IR기법이란 alt에 넣기에는 대체 텍스트가 너무 긴 경우 이미지의 alt는 비워놓고 다른 요소에서 이미지 설명 텍스트를 제공하는 것이다.

보통은 이 텍스트를 감추는데, display:none이나 visibility:hidden을 사용하면 스크린리더가 읽지못하기때문에

.hide {

position:absolute;

left:-9999px;

width:0;

height:0;

line-height:0;

text-indent:-9999px;

font-size:0;

overflow:hidden;

}

위와 같이 CSS를 사용하는 경우가 많은 듯 하다.

 

그리고 정확한 대체 텍스트를 제공해야하는데, 정말 정확해야 한다. 이미지에 나타난 정보를 전부 제공해야한다.

일정이 들어간 이미지같은 경우 특히 정보를 다 담아야한다.

예시)

서울시 일자리 포털 배너 이미지 alt

인물이 포함된 이미지도 alt="행사 이미지" 이런식으로 하기보다는 최대한 자세히 서술해야 한다.

예시2)

예시) 연암대학교 게시판 내 이미지 alt

 

그런데 과유불급이다. 불필요한 정보까지 alt로 제공할 필요는 없다.

나는 그냥 아이콘 이미지들에도 다 alt값을 썼더니 오히려 불필요하다고 지적 받았다.

9. (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다. 

너무 기본적인 부분이지만 놓치지말것

그 외에

표(table) 콘텐츠에 <caption></caption> 요소로 표에 대한 설명 달 것.

예시)

 

본문으로 바로 가는 건너뛰기 링크를 최상단에 제공할 것

이건 웹 페이지가 로드되었을때 탭을 누르면 상단에 본문으로 건너뛸 수 있는 링크를 보여주는 것을 뜻한다.

예시)

탭 예시 - 탭을 누르면 콘텐츠로 바로 갈 수 있는 링크가 나와야한다. 메뉴 바로가기도 있으면 좋다.

아래 움짤처럼 탭을 누르고 콘텐츠 바로가기가 포커스 되었을때 엔터를 누르면 헤더를 제외한 본문 위치로 스크롤이 이동해야한다. (서브페이지에서도)

 

나같은 경우에는 바디의 최상단에 top_nav라는 태그 안에 a 태그를 넣고 본문 섹션으로 가도록 하이퍼링크를 걸었다.

.top_nav{position:fixed; margin:0 auto; z-index:99999; top:0; left:0; right:0;}
.top_nav a {position:fixed; width:25vw; font-size:0; top:-50px; left:50%;transform:translateX(-50%);}
.top_nav a:active, .top_nav a:focus{display:inline-block; font-size:12px; padding:10px; top:0; text-align:center; color:#fff; background:#000;outline: 4px blue dotted;}

위와 같은 CSS를 적용하여 

이렇게 포커스가 되도록 구현하였다. 상당히 야매..

 

 

footer에 흔히 들어가는 유관기관 링크 셀렉트 박스도 이동도 키보드만으로 접근이 가능해야하므로, select + 버튼 태그로 구성하거나 div내에 a 태그로 넣는 경우에는 모든 링크에 접근이 가능하도록 마크업을 해야한다.

 

그 외에도 많은 세세한 항목들이 있지만 상기 항목들이 메인이라고 생각한다.

 

내가 참여한 프로젝트는 2차 심사를 거쳐 승인을 받았다.

2차 심사를 위한 시간은 일주일밖에 부여되지 않으므로, 심사 신청 전에 최대한 완성도를 높여두는 것이 좋다.

 

웹 접근성 작업을 하면 심미성은 상대적으로 떨어질 수 있지만 모든 사람이 정보에 접근할 수 있게 보장하는 것이 옳은 방향이므로 꼼꼼히 하도록 하자.

앞으로는 웹접근성이 필요한 홈페이지가 아니여도 최대한 대체 텍스트 제공 및 키보드 이동 등을 적용하려고 한다.