웹 접근성
장애에 구애없이 모든 사람들이 손쉽게 정보를 공유할 수 있도록 합니다.
검사기
사이트 바로가기Chrome Lighthouse(F12)
SEO
| 항목 | 내용 |
|---|---|
| 링크 | - 같은 링크라면 되도록 하나의 영역으로 구성합니다. - focus값은 꼭 보이도록 설계합니다. |
| title 지정 | - 스크린리더의 경우 현재페이지를 title로 확인합니다. - 현재페이지 및 상위페이지까지 지정되어야합니다. 예) 인사말 < 신문사소개 < 홈 - 기사뷰/게시판뷰의 경우 게시물의 제목까지 노출해줍니다. 예) 123번글 웹접근성의 이해(읽기) < 필수요소 < 웹접근성 < 홈 |
| 배너/팝업 | - 배너/팝업관리툴은 제목을 alt값으로 이용합니다. - 제목기재시 배너의 상세내용 표기를 권장합니다. - 내용을 많을 경우 중요정보/일시/바로가기등의 내용을 기재합니다. 예) 2012 대한민국취업박람회, 고용노동부주최 일시 : 2012년 10월30일(화)~31일(수) 10시~17시, 장소: aT센터(서초구 양재동)제1전시장 사이트 방문 바로가기 |
| 이미지 | - img태그를 이용한 경우 이미지내용을 표현하는 내용이 기재되어야 합니다. 예) alt="백화점입장을 기다리는 손님들" - 디자인요소 사용되는 이미지에는 alt를 빈값으로 기재합니다. 단, alt는 필수기재입니다. 예) alt="" |
| 자동박스 | - 가능한 링크영역(a태그)는 컨텐츠 전체를 감싸는 형태로 구성합니다. - 이미지가 background형태라면 대체 텍스트는 지정하지 않습니다. 단, 각개의 링크일 경우는 .show-for-sr 또는 .sr-only 클래스를 이용하여 title내용을 지정해줍니다. - 이미지위에 텍스트가 덮는 형태라면 키보드제어시 :focus값이 정상지정 되는지 확인합니다. |
| table구성 | - summary / caption / thead / tbody등의 요소로 구성합니다. - caption은 table요소의 제목역할을 수행하기에 절대 display:none으로 지정하지 않고 .show-for-sr 또는 .sr-only 클래스를 이용하여 구성합니다. |
| 소개/이벤트 | - 가능하다면 텍스트기반으로 꾸며줍니다. - 만약 이미지로 제작된 경우라면 이미지의 alt값은 빈값으로 지정 후 이미지 다음으로 텍스트를 기재 후 .show-for-sr 또는 .sr-only 클래스를 이용하여 글을 보이지 않도록 설계합니다. 예)http://www.bokjitimes.com/event/event1.html |
| form구성 | - input요소와 label요소를 같이 구성합니다. 예) <input id="a" title="이름" /> <label for="a">이름</label> - input요소에는 title을 필수로 기재합니다. - tabindex를 이용하여 순서지정을 합니다. |
접근성
| 항목 | 내용 |
|---|---|
| 모바일 Meta tag |
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> 5배수까지 확대가 가능해야합니다. |
| 색상대비 |
Color Contrast는 4.5를 기준으로 설계합니다. https://webaim.org/resources/contrastchecker/ |
| Pagination |
최소 크기 24px를 권장합니다. 24px미만으로 설계시 <button> 태그는 <div>, <i>등 의미 없는 태그로 대체합니다. |
| iframe | title 속성을 필수 입력합니다. |
| 빈 이미지 | <img> 태그 없이 대체이미지를 사용할 경우 aria-label 속성으로 설명을 삽입합니다. |
| a태그 | href가 없는 <a>태그는 <button>으로 대체합니다. |
ARIA
참고 사이트
사이트 바로가기| 대표속성 | 제어 | 내용 |
|---|---|---|
| aria-label | TEXT | 설명 속성 |
| aria-labelledby | ID | 설명 연결 속성 |
| aria-disabled | boolean | 접근 금지 또는 의미 없는 속성 |
| aria-hidden | boolean |
감춤 속성 (자식 요소에 a태그는 display: none; 처리.) |
| aria-selected | boolean |
선택된 요소 속성 (슬라이드, 탭, 메뉴 등에서 주로 사용) |
| aria-orientation |
Horizontal: slider, tablist, toolbar, menubar Vertical: scrollbar, listbox, menu |
용도 구분 속성 |
| aria-readonly | boolean | 읽기 모드 속성 |
Role
참고 사이트
사이트 바로가기| 대표속성 | 자식요소 | 내용 |
|---|---|---|
| list | listitem | 리스트 |
| tab | tabpanel | 탭 |
| table | 테이블 | |
| slider | 슬라이드 | |
| alert | 알림 |