오늘은 조금 긴 글이 될 것 같다,,,!
웹 개발을 위한 웹 접근성에 대해 제대로 알아보자. 🤔
접근성 ?
접근성이라는 말 되게 자주 듣고 산다. 사전적으로 정의하기를
사용자가 어떤 제품이나 서비스 등에 편리하게 접근, 이용할 수 있는 정도를 의미한다.
웹 접근성 ?
그렇다면 웹 접근성이란 정확히 뭘까?
'어떠한 사용자가
어떠한 기술 환경에서도 전문적인 능력 없이
웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것'으로
즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 의미한다.
예를 들어 시각 장애를 가지신 분들은 청각, 촉각과 같은 다른 감각을 통해서 정보를 파악하게 되는데
이때 '스크린 리더 '라는 보조기기를 사용하여 웹에 보이는 이미지, 글씨를 음성으로 듣고 정보를 파악하거나
'점자 정보 단말기'를 통해 정보를 파악하게 된다.
이때 이러한 보조기기를 통해 정보를 파악하는데 어려움이 있어서는 안 된다는 것이다.
접근성 지침 ?
접근성에도 세계적인 가이드라인이 존재하는데
바로 W3C에서 발표한 WCAG(Web Content Accessibility Guidelines)이다.
해당 지침을 한국에 맞춰 제작한 것이 '한국형 웹 콘텐츠 접근성 지침(KWCAG)'인데
KWCAG의 경우 원칙 4개, 지침 13개, 검사항목 24개로 구성되어있다.
웹 접근성 가이드의 4대 원칙
인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성
4가지로 구성되며 아래와 같이 각각 세부적인 지침이 존재한다!
너무 많으니 2번으로 나누어서 포스팅을 할 예정이다,, 그래도 12 * 2
인식의 용의성 ?
- 대체 텍스트
- 멀티미디어 대체 수단
- 명료성
- 적절한 대체 텍스트 제공
<img src="" alt="대체 텍스트">
텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
하지만 만약에 alt에 들어갈 대체 텍스트가 너무 긴 경우 아래와 같이 사용할 수 있다.
<!-- 대체 텍스트가 너무 긴 경우 -->
<img src="" alt="">
<p class="blind">
대체 텍스트가 너무 긴 경우,
img의 alt를 비워두고 대체 텍스트를 따로 마크업으로 제공
✳︎ 보이지 않게 처리할 때 display: none 이나 visibility: hidden으로 처리하지 않도록 주의 ✳︎
</p>
의미가 없는 이미지의 경우 ?
alt="" 빈 값으로 제공하더라도 속성 자체는 제공해야 한다.
즉, 스크린 리더가 아무것도 읽어주지 않도록 해야 한다.
- 자막 제공
멀티미디어 콘텐츠에는 자막, 대본 또는 수화와 같은 대체 수단을 제공해야 한다.
- 색에 무관한 콘텐츠 인식
콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
색 구분하지 못하더라고 콘텐츠를 인식하는데 문제가 없어야 한다.
색으로만 구분하지 않도록 패턴, 굴기, 모양이나 테두리 등으로 구분!
- 명확한 지시 사항 제공
지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
특정한 단일 감각에만 의존하는 방향으로 제공해서는 안됨!
예시)
* 표시만 두고 아무런 설명이 없는 경우
'* 표시는 필수 입력 사항입니다.'라고 명확하게 설명을 제공해야 한다.
'왼쪽의 숫자를 입력하세요' → 위치/방향으로만 정보를 제공하는 경우
'작은 버튼을 클릭하세요' → 크기로만 정보를 제공하는 경우 등...
- 텍스트 콘텐츠의 명도 대비
텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 : 1 이상이어야 한다.
확대 가능한 브라우저 경우에는 최소 3 : 1 이상 이어야 한다.
(Color Contrast Analyser : 명도 대비 측정 프로그램)
- 콘텐츠 간의 구분
웹 페이지를 구성하는 모든 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다.
(테두리 이용, 구분선 삽입, 서로 다른 무늬, 콘텐츠 배경색 간의 명도/채도 대비, 줄 간격 및 글자 간격 조절)
운용의 용의성 ?
- 입력장치 접근성
- 충분한 시간 제공
- 광과민성 발작 예방
- 쉬운 네비게이션
- 자동 재생 금지
이건 왜 ? 싶지만 이 경우 청각에 의지하는 사용자에게 불편함을 줄 수 있다!
스크린 리더가 웹 페이지를 읽어주는 경우 자동 재생되는 소리가 함께 겹쳐 파악이 어렵기 때문이다.
꼭 정지 상태로 제공하여 사용자가 요구할 경우에만 재생되도록 해야 한다.
자동 재생이 된다 하더라도 3초 내에 멈추거나 ESC키로 정지가 가능하도록 소스 상 가장 먼저 제공해야 한다.
- 키보드 사용 보장
예외가 존재하지만 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
예시)
드롭다운 메뉴 → 'mouse over' 시에만 노출되는 콘텐츠
키보드 접근 시에도 동일하게 동작되어야 한다. <img>, <td>와 같이 초점을 받을 수 없는 요소 + 마우스 이벤트 접근 자체가 불가능함!
그러기 위해 <a>, <button>과 같이 초점을 받을 수 있는 요소에 추가!
- 조작 가능
사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
여기에서 얘기하는 조작 가능의 기준은 일반인 조차 클릭이 어려운 너무 작은 컨트롤 버튼은
정교한 마우스 조작이 어려운 분들의 경우 더욱 어려울 수밖에 없다.
▶️ 컨트롤 박스의 대각선 길이가 6mm 이상이 되어야 한다.
▶️ 컨트롤 테두리 안쪽으로 1px이상의 여백이 필요하다.
- 응답 시간 조절
시간제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다.
예외의 경우에도 시간제한이 있다는 것을 사전에 알려주고 종료되었을 경우에도 알려주어야 한다.
- 정지 기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
정지 버튼이 없다면 마우스 오버 시, 키보드 접근 시 정지되도록 하거나 모든 콘텐츠가 노출되도록 해야 한다.
- 깜박임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
하더라도 사전에 경고와 중단할 수 있는 수단을 제공해야 한다.
(1997년 일본에서는 포켓몬 관람 중 광과민성 발작 사건이 있었다고 한다,,, 추억의 포켓몬 )
- 반복 영역 건너뛰기
페이지마다 반복되는 네비게이션 바의 경우
스크린 리더 사용자에게는 페이지가 갱신될 때마다 반복하게 됨!
그럴 때 건너뛰기 링크를 마크업 최상단에 제공해야 한다. 👇🏻
<body>
<div id="skip_nav">
<a href="#content">본문 바로가기</a>
<a href="#menu">주메뉴 바로가기</a>
...
<div id="content">
...
<div id="menu">
...
</body>
이해의 용의성과 견고성은 다음 포스팅에서 알아보자,,,,
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'etc.' 카테고리의 다른 글
| [VSCode] 너무 귀찮은 console.log 단축키. shortcut 등록 (0) | 2022.04.02 |
|---|---|
| [Javascript] 자바스크립트 : 미니 게임 만들기! (typing-master) (0) | 2021.09.09 |
| [Adobe Color] 어도비 컬러 : 트랜디한 컬러들을 간편하게 pick!!!! (0) | 2021.08.24 |
| [JS] 버튼 클릭 ! CSS 애니메이션 (0) | 2021.08.03 |
| [git] Git 브랜치 변경 (0) | 2021.08.02 |