반응형
웹 접근성
웹은 모든 사람들이 평등히 이용할 수 있어야 한다. 장애인이나 노약자 등 일반적인 웹 이용에 불편을 겪는 사람들이 있는데, 이 들이 이용하는 스크린 리더기나 마우스 스틱등 보조 기기가 읽을 수 있도록 마크업을 하는 것이 웹 접근성을 좋게 하는 것이다.
웹 표준 vs. 호환성 vs. 웹 접근성
| 구분 | 목적 | 준수 내용 | 차이 |
| 웹 표준 (Web Standards) |
웹의 사용성 및 접근성 보장 | HTML, CSS 등에 대한 W3C 규격(문법) 준수 등 - HTML, CSS, JavaScript 등 구조와 표현, 동작 분리 권고 |
웹의 내용, 표현, 행동에 관련된 기술 표준 |
| 웹 호환성 (Cross Browsing) |
웹 브라우저 버전, 종류와 관계 없는 웹 사이트 접근 | 웹 표준 준수를 통한 브라우저 호환성 확보 - HTML, CSS 문법 준수 - 동작, 레이아웃, 플러그인 호환성 |
웹 표준을 공통으로 포함 |
| 웹 접근성 (Web Accessibility) |
인적, 환경적 요인에 제약 없는 웹 정보 접근 | W3C 웹 접근성 이니셔티브(WAI) 한국형 웹 콘텐츠 접근성 지침 2.0 - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성 |
웹 접근성 개선 가이드
1. 대체 텍스트
- img 태그 내의 alt에 대체 텍스트를 입력하여 스크린 리더기가 읽을 수 있게 하기 (이미지에 글이 있다면 똑같이 적기)
- 의미 없는 디자인용 이미지는 alt를 빈 칸으로 두기
- QR코드와 같은 이미지는 어떤 QR 코드인지 명시하기
- 버튼도 기능 명시하기
- img 태그가 아닌 background-image 속성을 이용하는 경우, 해당 이미지에 글씨를 넣고 화면에서 글씨를 숨기는 IR 기법 사용하기
2. 자동 재생 배경음 적용 금지
- 화면 낭독 프로그램을 이용하는 사용자에게 방해가 될 수 있으므로, 이용자가 소리의 재생을 선택할 수 있도록 하기
3. tab 키를 이용해 콘텐츠 선택 가능
- tab의 이동 순서를 고려하여 tab 키를 이용해 콘텐츠를 자유롭게 이용할 수 있게 하기
<p tabindex='0'>0번 탭 키</p>
<p tabindex='-1'>탭 키로 이용할 수 없음</p>
<p tabindex='1'>0번 탭 키</p>
<p tabindex='2'>0번 탭 키</p>
<p tabindex='3'>0번 탭 키</p>4. 페이지 언어 지정
<html lang="ko"> <!-- 전체 언어 지정 -->
<p> HTML 태그에 <span lang="en"> 특정 언어 </span> 지정하기 </p>5. 기타 참고 자료
https://news.seoul.go.kr/gov/archives/47485
웹 접근성 및 웹 표준 준수 가이드 안내
웹 접근성 및 웹 표준 준수 가이드 안내
news.seoul.go.kr
https://accessibility.naver.com/accessibility
네이버 접근성 페이지 : 접근성 가이드
Accessibility Guide 정보 접근성이란? 모든 사용자를 위한 더 편리한 서비스 정보 접근성은 모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는모든 정보
accessibility.naver.com
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
| CSS - 기초 배우기 (0) | 2021.12.23 |
|---|---|
| HTML - 기본 SEO (0) | 2021.12.22 |
| HTML - 컨벤션과 모범 사례 (Conventions and Best Practices) (0) | 2021.12.16 |
| HTML - 폼과 유효성 검사 (0) | 2021.12.15 |
| HTML - Semantic한 HTML 작성 (0) | 2021.12.13 |