[부스트코스] 웹 접근성 수강기 (1) 웹 접근성의 이해, 준수해야 하는 이유, 웹 접근성 지침과 준수 방법

본 게시글은 부스트코스에서 이선주님의 "웹 접근성 이해" 강의를 수강하고 작성된 게시글입니다.

 

1. 웹 접근성의 이해

웹 접근성이란?

어떠한 사용자가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것, 따라서 모든 기기에서 불편함 없이 웹에 접근할 수 있도록 해야 한다.

 

웹 접근성을 준수해야 하는 이유?

1. 장애인 차별 금지법
법으로 정해져 있기 때문에

2. 웹의 지향성
www의 창시자 팀 버너스 리는 "웹의 힘은 보편성에 있으며, 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소"라고 하였음

 

2. 웹 접근성 지침

W3C가 WCAG(웹 콘텐츠 접근성 지침)을 발표

이를 국내 설정에 맞게 반영한 것이 KWCAG.
원칙 4개와 지침 13개, 항목 24개로 구성되어 있다

이를 잘 지킨 사이트들에 웹 접근성 품질 마크를 제공

출처 : http://www.wa.or.kr/m1/sub5.asp

2 - 1. 대체 텍스트 제공

"텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다"

이미지의 alt 속성

시각적인 어려움이 있을 경우에는 스크린 리더를 통해 음성 메세지를 받아야 하기 때문에 alt속성을 이용한다. 이 alt 속성에 보는 것과 듣는 것이 일치하도록 대체 텍스트를 넣어줄 수 있다.
대체 텍스트가 너무 길 경우에는 alt는 빈 칸으로 두고 아래에 따로 만들어서 제공할 수도 있다.

⚠ 따로 만들어 제공한 대체 텍스트의 CSS에 display : none 또는 visibility : hidden을 사용할 경우에는 스크린 리더가 읽어주지 않기 때문에, 보이지 않게 처리하려고 한다면 위의 두 방법 말고 다른 방법을 사용해야 함

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

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

버튼

어떤 버튼인지 알 수 있도록 대체 텍스트를 제공해 주기

의미 없는 이미지와 의미 있는 이미지

장식과 같은 의미 없는 이미지 같은 경우는 alt=""와 같이 alt값을 비워 주기. 아예 alt 속성이 존재하지 않을 경우에는 스크린 리더가 파일명이나 src를 읽게 됨 (공백으로 비워도 안됨)
의미 있는 이미지가 배경으로 제공될 경우에도 설명해주는 alt는 추가해 주어야 함

이모티콘

alt="이모티콘"이 아닌, alt="우는 무지"와 같이 의미를 같이 제공해주기

QR코드

alt에 QR코드의 주소를 제공하기

썸네일 이미지와 내용이 결합된 카드와 같은 구조

이미지와 텍스트를 하나의 링크로 묶어 주고, 대체 텍스트는 썸네일 이미지 아래의 내용으로 표현이 가능하기 때문에 썸네일 이미지의 alt는 비워 줌

캡챠

시각적 캡차와 음성으로 듣기 함께 제공. (캡차 이미지 자체에는 alt를 넣지 않기!)

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

사용자가 직접 대체 텍스트를 작성할 수 있도록 구현

 

2 - 2. 자막 제공

"멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다"

자막, 대본, 수화 중 한 가지를 제공하면 됨.
이미지와 마찬가지로 사용자가 업로드하는 영상은 사용자가 대체 콘텐츠를 작성하도록 제공

음성이 나오지 않는 영상

따로 원고를 제공하거나 해야 함

 

2 - 3. 색에 무관한 콘텐츠 인식

"콘텐츠는 색에 관계없이 인식될 수 있어야 한다"

차트와 같은 경우, 색으로만 구분하는 것이 아닌, 패턴이나 굵기, 모양이나 테두리 등으로 구분할 수 있게 해야 함
탭 또는 페이지에 적용됨

 

2 - 4. 명확한 지시 사항 제공

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

지시 사항을 단일 감각으로만 인식할 수 있게 하면 안 됨
위치나 방향만으로 정보를 제공하면 안 됨
ex) 왼쪽의 버튼을 클릭하세요

 

2 - 5. 텍스트 콘텐츠의 명도 대비

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

텍스트 뿐만 아니라 이미지로 된 텍스트, 의미 있는 이미지 또한 명도 대비를 준수해야 함
하지만 확대가 가능한 브라우저에서는 최소 3:1이상이면 준수하는 것

 

2 - 6. 자동 재생 금지

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

콘텐츠가 재생하는 모든 소리가 자동으로 재생되면 안 됨.
페이지에 접속 시 바로 BGM이 재생된다던가 하는 것이 해당됨. 이와 같은 경우는 스크린 리더 음성과 겹치면서 방해받음

불가피하게 자동 재생을 해야 한다면?
3초 내에 멈추거나, ESC키를 누르면 멈추거나, 소스 상 가장 먼저 제공해서 정지 기능을 실행할 수 있도록 구현해주어야 함

⚠ 마우스 오버 또는 키보드 접근만으로 3초 이상 재생되는 소리도 안됨!

 

2 - 7. 콘텐츠 간의 구분

"이웃한 콘텐츠는 구별될 수 있어야 한다."

테두리, 구분선을 사용하거나 서로 다른 무늬를 사용할 수도 있음

 

2 - 8. 키보드 사용 보장

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

드롭다운 같은 경우는 키보드만으로 접근했을 때 드롭다운을 사용할 수 있게 해야 함
(마우스 오버 시와 키보드 포커싱 시 이벤트가 같도록 구현!)

이미지, 또는 테이블과 같이 초점을 받을 수 없는 요소에 마우스 이벤트가 적용된 경우는 오류

초점이 초기화되는 onfocus="this.blur();" 사용 지양

 

2 - 9. 초점 이동

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

초점은 일반적으로 좌->우, 상->하로 가야 함. 이 논리대로 이동을 할 수 있어야 함 (사용자가 예측하는 이동 순서와 일치하도록!)

tabindex를 사용해서 초점을 강제 이동하지 않도록 하기

⚠ hidefocus를 적용하거나, CSS에서 outline:none 처리를 하거나, onfocus="this.blur();"를 사용하면 초점이 보이지 않으므로 주의

 

2 - 10. 조작 가능

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

조작 가능 기준

컨트롤(버튼 등)의 대각선 길이는 6mm이상
컨트롤은 테두리 안쪽으로 1px이상의 여백을 두어야 함 (컨트롤이 연달아 있을 때 1px이상의 여백이 있지 않으면 컨트롤 구분도 힘들고 잘못 선택하게 됨)

 

2 - 11. 응답 시간 조절

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

(세션 시간이 20시간 이상인 컨텐츠는 예외로 간주)

자동 로그아웃 같은 경우에도 충분한 시간을 제공해야 하고, 종료 시간을 공지해야 하고, 반응 시간을 사용자가 조절할 수 있는 수단을 제공해야 함

 

2 - 12. 정지 기능 제공

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

가능하면 자동 갱신되는 콘텐츠는 사용하지 않는 것이 좋고, 만약 사용한다면 "정지" "다음" "이전" 이 구현되어야 함. (마우스 오버 또는 키보드 접근 시 정지되어도 됨)
또는 마우스 오버/키보드 접근 시 모든 내용이 보여져서 전부 볼 수 있으면 준수한 것

 

2 - 13. 깜빡임과 번쩍임 사용 제한

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

만약 불가피하게 제공해야 한다면
화면 전체 면적의 10% 미만으로 제한하거나
시간을 3초 미만으로 제한하거나
사전 경고 후 중단 가능한 방법 제공할 수 있음

 

2 - 14. 반복 영역 건너뛰기

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

페이지 상단의 nav부분같은 경우가 모든 페이지에서 다 있으니까 이런 부분을 반복 영역이라고 함
따라서 이 부분을 건너뛰고, 본문으로 넘어갈 수 있도록 페이지 최상단에 링크를 제공해야 함

 

2 - 15. 제목 제공

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

페이지의 title은 지금 보고 있는 본문의 가장 하위 분류로 적절하게 제공하기
각 페이지의 핵심 내용을 제목으로 제공해야함

iframe에도 title 지정해주기
(내용이 없는 frame의 경우에도 "빈 프레임", "내용 없음"과 같이 제공해주기)

제목의 특수 기호는 하나만

 

2 - 16. 적절한 링크 텍스트

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

의미 없는 빈 링크는 있으면 안 됨

더 자세한 사항을 보려면 "여기"를 클릭하세요 같은 경우는 오류. 명확한 방향 지시가 안 되어 있음
URL로 링크만 제공하는 것이 아닌 해당 주소의 목적도 함께 제공하기

 

2 - 17. 기본 언어 표시

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

웹 페이지의 기본 언어는 html의 lang속성을 사용해 지정해줄 수 있음

만약 중간에 다른 언어가 나오는 곳이 있다면, 해당 태그에 lang속성으로 지정해 줄 수 있음

 

2 - 18. 사용자 요구에 따른 실행

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

화면을 가리는 레이어 팝업을 제공하는 것도 오류
반복 영역 건너뛰기보다 먼저 팝업 제어를 구현하거나, 화면 가림 없이 맨 윗부분에 레이어 팝업을 제공해야 함

링크를 눌렀을 때 새 창이 뜨는 경우에는 <span class="blind">새 창</span>, target="_blank", title="새 창"등으로 새 창이 열린다고 알려줘야 함

체크박스를 선택하자마자 팝업이 닫히면 오류, 이렇게 닫지 말고 닫기 버튼이 따로 있어야 함
=> 포커스를 옮기는 것 만으로 동작이 실행되면 안된다!

 

2 - 19. 콘텐츠의 선형 구조

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

탭/내용이 있을 경우, 지금 보고 있는 내용이 무슨 탭의 내용인지 알 수 있게 탭 제목을 내용에 적어주던가, 탭과 내용을 묶어서 구성해야 함

마크업의 순서를 유의하기. 논리적으로 짜도록

 

2 - 20. 표의 구성

"표는 이해하기 쉽게 구성해야 한다."

스크린 리더는 마크업에 따라 표를 읽어줌. 따라서 th, td구별해서 쓰기
또한 가로/세로 모두 제목이 있을 경우 scope="col"을 통해 행 제목인지, 열 제목인지 구분할 수 있도록 제공해야 함

표 제목, 요약 정보(summary속성) caption에 두개 다 제공해야 함. 두개가 동일해도 안됨

복잡한 셀은 제목 셀에 id값 부여하고, headers에 관련된 id값을 넣어주면 됨

 

2 - 21. 레이블 제공

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

모든 사용자 입력에 대한 설명 제공하기
label을 제공하고, label의 for값과 해당하는 input의 id값 연결하기
(label을 이 때문에 쓰는구나 싶음)

생년월일 같이 해당 목록에 입력 칸이 여러개일 때는, 각 입력 서식에 타이틀로 정보를 줘야 함
로그인 같은 경우도 마찬가지, 타이틀로 입력에 대한 설명 제공하기

 

2 - 22. 오류 정정

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

오류 발생시 모든 입력 칸 비우기 X

오류 발생 원인을 알려주고, 발생한 곳으로 초점 옮기기

 

2 - 23. 마크업 오류 방지

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

마크업 오류 내지 않기
속성 중복 사용 X

 

2 - 24. 웹 애플리케이션 접근성 준수

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

플래시 같은 것이 웹 애플리케이션