웹 접근성이란?
각기 다른 브라우저, 사용 기기, 장애, 성별, 나이, 등의 다양한 환경에서 웹에 접근할 수 있다.
이렇게 다양한 환경에 동등한 정보를 제공하기 위해서는 앞서 설명드렸던 협의된 시맨틱 요소들이 필요하다.
웹 접근성을 갖추게 된다면 다음과 같은 효과를 얻을 수 있다.
웹 접근성을 갖추면 얻을 수 있는 효과
- 타겟층 확대 (사용자층)
- 더 많은 환경 지원
소외 계층외에도 정보에 접근하기 어려운 상황이 있을 수 있다. 운전중이라던지 , 마우스의 부재라던지.. 이러한 문제를 해결한다면 자연스레 제품 이용자 수 증가를 얻을 수 있다. - 사회적 이미지 향상
기업의 사회적 역할이 점점 강조되고 있는 상황으로 , 넓은 웹 접근성 확보를 통해 사회 공헌을 실현한다면 기업의 이미지가 향상되고, 충성고객을 확보할 수 있는 가능성이 높아진다!
한국형 웹 콘텐츠 접근성 지침 2.1
W3C이 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 수정한 지침
인식의 용이(Perceivable)
모든 콘텐츠를 사용자가 분별할 수 있어야 한다.
1.적절한 대체 텍스트
alt 속성을 사용한 이미지 대체 텍스트 제공해야함
2.자막 제공
멀티미디어 콘텐츠는 자막, 수화 또는 원고를 제공해야함
비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기
<video ... >
<track src="자막.vtt" kind="captions" />
</video>
WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용3.색에 무관한 콘텐츠 인식
색맹, 색약 등의 사용자를 고려해 콘텐츠 제작 ( 테두리 설정하기, 콘텐츠 레이블 달기 , 명도로 구분 짓기 )
4. 명확한 지시사항 제공하기
모양, 크기, 위치, 방향, 색, 소리 등에 무관하게 지시사항이 인식될 수 있어야 함.
5. 텍스트 콘텐츠 명도 대비
- 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
- 텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화 된 콘텐츠인 경우, 장식 목적 의 콘텐츠 - 콘텐츠와 배경 간의 명도 대비가 3 대 1 까지 허용
6. 자동 재생 금지
자동으로 소리가 재생되지 않아야 한다. 스크린 리더와 소리가 겹칠 수 있기 때문
7. 콘텐츠가 서로 시각적으로 구별될 수 있어야 함.
운용의 용이성(Operable)
사용자가 인터페이스를 조작하고 네비게이션 할 수 있어야 함
8. 모든 기능을 키보드 만으로 사용할 수 있어야 한다.
키보드에 의해 초점이동이 논리적으로 가능해야한다. (시각적 구별도 가능해야함)
10. 응답 시간 조절 가능 ( 자동로그아웃 같은 경우 )
제한을 두지 않는 것이 좋지만 , 필요하다면 사용자가 직접 응답시간을 조절할 수 있는 수단을 제공해야 함.
11. 자동으로 변하는 콘텐츠는 사용자가 직접 제어할 수 있어야 한다.
12. 사용자에게 피로감을 줄 수 있는 콘텐츠는 지양해야한다.
13. 반복되는 콘텐츠는 건너뛸 수 있게 제작한다. (네비게이션 바의 활용)
14.적절한 제목과 링크, 텍스트 제공하기.
이해의 용이성(Understandable)
콘텐츠는 이해할 수 있어야 함
15. 주로 사용하는 기본 언어를 표시.
<html lang="ko">
다른 언어를 사용할 경우 해당 요소에 맞는 lang 표기16. 사용자가 요구하는 것 만 실행되기. ( 의도치 않은 기능 실행 X )
17. 콘텐츠 선형구조 . ( 논리적으로 콘텐츠를 진행하기 )
스크린 리더 마크업 생각하며 구성하기 (콘텐츠의 순서대로 읽어줌)
18. 표 - 이해하기 쉽게 구성하기
- 시각장애가 있는 경우를 고려해 caption 요소를 사용해 제목을 제공해야한다.
- 표의 셀은 제목 셀과 데이터 셀이 구분되도록, 제목 셀은 <th>, 데이터 셀은 <td> 를 사용
- 표의 구조가 복잡할 경우, 최대한 간소화하거나 scope 혹은 id와 headers 속성을 사용하여 작성
19. 사용자 입력에 도움을 주는 레이블 제공
<input> 요소에 value 나 placeholder 속성만 설정하는 것은 적합하지 않음
(X) <input type="text" placeholder="아이디" /><input> 요소에 id 를 설정하고 <label> 요소의 for 속성으로 연결
(O) <label for="user_id">아이디</label>
<input id="user_id" type="text" placeholder="아이디" />title 속성
(O) <input type="text" title="아이디" placeholder="아이디" />WAI-ARIA의 aria-label 속성
//필요한 경우에만 사용하기
(O) <input type="text" aria-label="아이디" placeholder="아이디" />20. 입력 중 발생할 수 있는 오류를 정정할 방법 제공
견고성(Robust)
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
21. 마크업 오류 없어야 함
열고닫음의 오류
(X) <div><span></div></span>
(O) <div><span></span></div>
속성중복 오류
(X) <div class="중복" class="사용"></div>
(O) <div class="안 돼요"></div>
id 중복 오류
(X) <div id="아이디"><span id="아이디"></span></div>
22. 웹 애플리케이션은 접근성이 있어야함.
(접근성이 없는 경우 대체 텍스트나 대체수단이 있어야 함)
'프론트엔드 개발 > html,css' 카테고리의 다른 글
| div 태그와 span 태그의 차이 (0) | 2023.02.05 |
|---|---|
| CSS flex box정리 (0) | 2023.02.05 |
| 웹 표준, 시멘틱 요소의 중요성 (0) | 2023.01.02 |
| SEO(Search Engine Optimization, 검색 엔진 최적화) (0) | 2023.01.02 |
| dom (0) | 2022.11.10 |