웹접근성에 주의해야 할 부분

웹접근성 주의할 부분

1. label || title

form에서 label과 input이 들어갈 때 label에 input 의 아이디를 넣어 연결시켜준다. 하지만 label이 없을 경우 input에 title=""를 넣어 명시해준다.

 

2. aria-hidden

화면상 숨겨지거나 가려진 콘텐츠 ARIA를 적용하여 모바일 스크린리더기가 접근하지 않도록 구현.

• undefined(default)
• true 접근성 API 차단. (화면표시 여부와 무관 API 차단)
• false 접근성 API 사용. (화면에 표시한 경우 API 사용)

aria-hidden vs hidden

aria-hidden :: 화면에 표시되나 접근성API(보조기기 접근 가능성) 차단 상태 결정.

hidden :: 화면에 표시되지 않아 접근 불가능 상태(display: none)

**aria-hidden: "true" 접근성 API를 차단하지만 포인팅 기능(마우스 커서, 키보드 초점)을 차단하는 것은 아니므로 포인팅을 받지 않도록 처리해야 한다.

 

3. aria-pressed

aria-pressed속성은 토글버튼(button, role="button")

aria-checked로 하는 것이 좋다.

 

4. 드롭다운 메뉴

aria-expanded 속성은 제어 대상의 확장 또는 축소 상태를 나타낸다.

아코디언, 메뉴, 콤보박스, 트리와 같이 하위메뉴(또는 독립적인) 내용을 토글(열기/닫기)하는 경우에 사용하는데 적절하다.

 

5. 스크린리더 읽는 순서

TITLE0	TITLE3	TITLE6
content1	content4	content7
content2	content5	content8

0에서부터 8까지 순서대로 읽혀져야 된다.

MENU0	list1
MENU6	list2
	list3
	list4
	list5

MENU0, MENU6클릭 시 list가 나오는 메뉴는 0~6순서대로 리더기가 읽혀야 된다.

 

6. 새 창열기

<a href="#">새 창 열기</a> 일 때, title="새 창 열기"를 꼭 명시.

 

7. table

데이터 테이블일 경우 <caption> 요소, <summary> 속성, <th> 제목 셀은 반드시 제공해야 한다. (html5 경우 <caption>요소 내에 제목과 요약정보 함께 제공 가능)

 

8. 스크린리더기가 읽히지 않는 경우.

display: none, visibility: hidden은 스크린리더기가 읽히지 않으므로 쓸 때 주의해야 한다.

이 둘의 차이점.

display: none 은 영역이 잡히지 않고 visibility: hidden은 영역이 잡힌다.

 

 

---

Reference

레진 WAI-ARIA 가이드라인