웹 접근성 지침 적용방법 (IR 기법)

웹 접근성이란??

사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는

모든 정보에 동등하게 접근하고 이용할 수 있도록 보장해 주는 것

 

1. 이미지(<img>)

---

alt 속성을 사용하여 이미지에 대한 설명을 적습니다.

태그	예시	설명
<img>	<img src="160314.png" alt="모두를 위한 정보 접근성">	이미지가 의미가 있을 때 사용한다. 모두 alt 속성 값을 넣는다. 💡 장식이나 배경 등의 의미가 없는 이미지에는 alt="" 삽입 또는 css-background 속성으로 표현한다.(이미지 스프라이트 기법)
<input>	<input type="image" src="next.gif" alt= "메뉴 더보기">	"메뉴 더보기", "다음 메뉴", "항목 열기" 등등 버튼의 기능을 명확히 이해할 수 있는 대체 텍스트를 제공한다.

 

💡 alt
alternative의 약자로 ‘이미지의 대안, 이미지에 대한 설명’ 입니다.
( <img> <input> <area> 태그에서만 사용 가능 )

 

alt 속성 사용 이유

1. 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 ‘이미지 출력 안 함’으로 한 사용자에게 이미지에 대한 간략한 설명을 붙일 수 있습니다.
2. 시각장애인의 웹 서핑시 사용하는 리더 프로그램(ex 스크린리더)이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줍니다.
3. 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때 이미지 설명을 보여줍니다.

 

 

 

2. 모달 팝업 버튼

---

모달 팝업 버튼 클릭시 본문 위에 레이어 형태로 겹쳐지기 때문에 스크린리더에서 모달창으로 접근하지 못할 수도 있습니다.

 

해결방법

1. role 속성을 이용해서 dialog영역임을 알려주는것이 필요
2. 모달창의 제목의 역할을 담당하는 영역에 id값 부여
3. 모달창에 aria-label 또는 aria-labelldby 속성 이용해서 id값 연결
4. aria-modal 속성의 값을 true로 지정하여 dialog 영역 이외에 본문이 선택되지 않도록 처리

Example

<!-- 모달 창 -->
<div class="cart_option" role="dialog" aria-labelledby="productChoice" aria-modal="true">
	<strong class="layer_name" id="productChoice">상품 선택</strong>
  ....
<!-- 출처 : 마켓컬리 -->

 

 

 

3. 콤보박스<select>

---

<input> <select> <textarea> 에 대응하는 <label> 태그 또는 title 속성 등 설명이 없는 경우 오류가 발생합니다.

 

💡 <select>의 경우 요소의 첫 번째 이 레이블 역할을 대신하는 경우라도 <label>또는 title 속성을 통해 레이블을 제공해야 준수한 것으로 인정합니다.

 

 

 

4. disabled, hidden

---

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있습니다.

 

💡css clip 속성을 이용하여 문제 해결합니다.

 

 

 

그 외 버튼 및 태그

---

aria-label 속성을 이용하여 이미지나 아이콘 버튼 등을 부연설명 합니다.

속성	설명
aria-label	이미지 버튼 등의 정보를 스크린리더에서 읽어들임 ❗aria-label 속성을 사용하게 되면 접근성 API에서 aria-label 속성으로 선언된 텍스트만 표시하므로 화면에 보이는 텍스트와 스크린리더용 텍스트를 함께 작성
aria-labelledby	aria-label과 동일한 기능을 수행하지만 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용 💡숨겨져 있는 요소도 참조할 수 있다.(display:none, visibility:hidden) 💡aria-label 이랑 같이 쓰이면 aria-labelledby가 우선순위가 더 높음
aria-hidden	불필요한 값을 스크린리더에서 읽어들이지 않음

 

 

❗aria-lable 대신 title속성을 사용하면 안됩니다. (title 속성은 꼭 필요한 경우에만 사용)

 

스크린 리더 대부분이 폼 요소를 제외한 링크 등의 컨트롤에 적용된 title 속성을 무시하기 때문입니다.

 

⇒모든 사용자를 고려하는 마크업을 하기 위해서는 대체 텍스트(alt 속성)나 숨김 텍스트를 우선으로 사용하는 것이 바람직합니다.

 

 

 

💡title
마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 나타납니다.(요소에 대한 부가적인 정보를 나타냄)
이미지뿐 아니라, <a>, <span>, <td> 등 거의 대부분의 태그에 사용가능 합니다.

 

title이 필요한 경우

1. <a> 태그 사용시 target=”_black” 등의 속성을 사용하는 경우 title로 “새창” 또는 “go to new window”로 명시 2. UI상 form 요소에 label 요소가 들어가기 어려울 경우
3. iframe 요소에 제목을 제공해야 할 때 <frame> <iframe> <frameset>

 

 

웹 접근성 검사 사이트 모음

도구	url
Open-WAX ⭐	chrome.google.com/webstore
AChecker	http://achecker.ca/checker/
Colour Contrast Analyser	https://www.tpgi.com/color-contrast-checker/
W3C	https://www.w3.org/WAI/ER/tools/
kwcag a11y inspector	https://chrome.google.com/webstore/detail/kwcag-a11y-inspector/ngcmkfaolkgkjbddhjnhgoekgaamjibo?hl=ko
wave	https://wave.webaim.org/

 

웹 접근성 지침 종류

지침	url
W3C에서 발표한 웹 콘텐츠 접근성 지침(WCAG)	https://www.w3.org/WAI/standards-guidelines/ko
한국형 웹 콘텐츠 접근성 지침(KWCAG)	http://www.kwacc.or.kr/WAI/wcag21/
네이버형 웹 콘텐츠 접근성 지침(NWCAG)	https://accessibility.naver.com/acc/guide_01
NHN컨벤션 지침	https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf

 

참고자료

제목	url
title 속성 사용을 지양해야 하는 이유	https://nuli.navercorp.com/community/article/1132934
스크린리더 사용자를 위한 IR(Image Replacement)기법	https://nuli.navercorp.com/community/article/1132804
aria-lable 사용방법	https://abcdqbbq.tistory.com/77
각 지침별 title 속성의 바람직한 사용방법	http://blog.hivelab.co.kr/공유-title-속성의-바람직한-사용방법/