웹 접근성이란?
'장애에 구애 없이 모든 사람들이 쉽게 정보를 공유할 수 있는 인터넷 공간을 만드는 것'으로 World Wide Web(월드 와이드 웹) 창시자, 팀 버너스 리가 정의했습니다. 하지만, 장애인에 국한된 문제가 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만들어야 합니다. 예를 들면 장애인이나 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품이 널리 보급됨을 알 수 있습니다.
웹 접근성의 법, 제도와 이용에 대한 이해는 웹 접근성 연구소(링크)에서 자세히 확인할 수 있습니다.
웹 접근성 품질인증이란?
웹 접근성 표준지침을 준수한 사이트에 대해 인정하고 이를 상징하는 품질 마크를 부여하는 인증제도. 인증대상으로는 웹 사이트를 운영하는 정부 및 공공기관, 민간 사업장 등 범위가 넓습니다. 인증기관으로는 1) 한국 웹 접근성 인증평가원(사단법인 한국장애인단체총연합회), 2) WebWatch(웹와치), 3) 사단법인 한국 시각 장애인 연합회(한국 웹 접근성 평가센터)로 총 3개 기가관이 있습니다.
대체 텍스트 alt = 속성 값 넣기
웹 접근성의 대표적인 예시로는 <img> 태그입니다. 시각 장애인은 이미지를 볼 수 없습니다. img태그의 alt속성에 이미지설명을 넣어서, 이미지가 나오지 않을 경우 그 용도로 인식할 수 있는 대체 택스트를 제공해야 합니다. 다음과 같이 대체 텍스트를 빈값으로 넣어서 스크린리더에서 읽히지 않게 해야 합니다.
<img src="160314.png" alt="">
버튼의 기능 설명
<input>태그를 버튼으로 사용할 경우도 대체 택스트를 제공하여 기능을 명확히 이해하도록 해야 합니다. 동일한 버튼이미지를 사용해도, 대체 텍스트도 동일하게 제공해야 합니다. 아래 코드는 같은 모양 버튼의 대체 텍스트를 모두 다르게 입력한 경우 입니다.
<alt="메뉴 더보기">, <alt="다음 메뉴">, <alt="항목 열기">
출처 : 네이버 접근성
'HTML | CSS' 카테고리의 다른 글
| form과 브라우저 (0) | 2023.11.15 |
|---|---|
| 어도비 XD 그리드 설정시 자동 입력 값 오류 해결 (0) | 2022.05.31 |
| <a>태그로 간단하게 문서 내로 이동하기 (0) | 2021.12.21 |
| CSS 인라인 블록 요소 레이아웃 스타일 (0) | 2021.11.03 |
| CSS 우선순위, 순서대로 간단하게 알아보자 (0) | 2021.10.31 |
