모두를 위한 접근성, 결코 어렵지 않습니다.
모두가 함께 누릴 수 있도록 기획서에, 디자인에, 코드에 배려의 발자취를 남겨주세요.
WAI-ARIA UI
자주 사용하는 UI에 실무자들이 WAI-ARIA로 접근성을 준수할 수 있도록 라이브러리를 제작하였습니다.
wai-aria js 다운로드
자동완성 편집 창
1) 직렬 완성형
입력 서식에 글자 입력 시 단어가 자동완성 됩니다. 자동완성된 텍스트는 선택된 상태로 삽입되어야 합니다.
키보드 사용
구성 요소
직렬 완성형 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
aria-autocomplete
inline : 직렬형 자동완성
마크업
<input type="text" title="검색어" placeholder="'n'을 입력해보세요." id="autoComplete1" aria-owns="acl_li1" auto-complete="inline" />
<ul id="acl_li1" role="listbox">
<li role="option">NAVER</li>
<li role="option">NAVER Webtoon</li>
<li role="option">NAVER Mail</li>
<li role="option">NAVER Map</li>
</ul>
<script>
NuliComplete("autoComplete1");
</script>
2) 목록 선택형
키보드 사용
위쪽 화살표 : 이전 목록 탐색, 텍스트는 기존 입력된 값 유지, 첫 번째 항목에서 위쪽 화살표 선택 시 마지막 항목으로 이동
아래쪽 화살표 : 다음 목록 탐색, 텍스트는 기존 입력된 값 유지, 마지막 항목에서 아래쪽 화살표 선택 시 첫 번째 항목으로 이동
Enter : 텍스트 값을 선택한 옵션 내용으로 설정
Esc : 목록 상자 닫기 및 텍스트 삭제
Tabindex="-1" : li > a 구조로 자동완성 리스트가 표시되는 경우 a 요소에 적용
구성 요소
목록 선택형 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="combobox"
확장/축소 가능 요소임을 알림
필수
aria-haspopup
false : 기본값, 연결된 팝업 없음
true : 연결된 팝업 있음
aria-autocomplete
list : 목록형 자동완성
aria-owns
DOM 구조와 달리 기능적으로 상, 하위 관계인 경우 사용, 자동완성 리스트 컨테이너의 id 값 부여
필수
aria-activedescendant
스크립트로 선택된 자동완성 키워드 id 연결, 미선택시 빈 값
필수
role="listbox"
선택 목록
aria-controls
input 요소와 자동완성 리스트 를 연결
필수
role="option"
선택 목록에서 선택 가능한 항목
필수
role="none"
li > a 구조인 경우 li 요소에 사용
aria-selected
자동완성 리스트에서 선택된 요소에 적용
true : 선택됨
false : 선택 안됨
마크업
<input type="text" title="검색어" placeholder="'n'을 입력해보세요." id="autoComplete2" role="combobox" aria-expanded="false" aria-haspopup="true" auto-complete="list" aria-owns="acl_li2" />
<ul id="acl_li2" role="listbox">
<li role="option">NAVER</li>
<li role="option">NAVER Webtoon</li>
<li role="option">NAVER Mail</li>
<li role="option">NAVER Map</li>
</ul>
<script>
NuliComplete("autoComplete2");
</script>
3) 복합형
입력 서식에 글자 입력 시 자동완성 목록도 노출되고 단어도 자동완성 됩니다.
키보드 사용
위쪽 화살표 : 이전 목록 탐색, 텍스트 값을 해당 옵션 내용으로 변경
아래쪽 화살표 : 다음 목록 탐색, 텍스트 값을 해당 옵션 내용으로 변경
Enter : 텍스트 값을 선택한 옵션 내용으로 설정
Esc : 텍스트 제거, 목록 상자 닫기
Tabindex="-1" : li > a 구조로 자동완성 리스트가 표시되는 경우 a 요소에 적용
구성 요소
복합형 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="combobox"
확장/축소 가능 요소임을 알림
필수
aria-haspopup
false : 기본값, 연결된 팝업 없음
true : 연결된 팝업 있음
aria-autocomplete
both : 목록형과 직렬형을 포함한 복합형 자동완성
aria-owns
DOM 구조와 달리 기능적으로 상, 하위 관계인 경우 사용, 자동완성 리스트 컨테이너의 id 값 부여
필수
aria-activedescendant
스크립트로 선택된 자동완성 키워드 id 연결, 미선택시 빈 값
필수
role="listbox"
선택 목록
aria-controls
input 요소와 자동완성 리스트 를 연결
필수
role="option"
선택 목록에서 선택 가능한 항목
필수
role="none"
li > a 구조인 경우 li 요소에 사용
aria-selected
자동완성 리스트에서 선택된 요소에 적용
true : 선택됨
false : 선택 안됨
마크업
<input type="text" title="검색어" placeholder="'n'을 입력해보세요." id="autoComplete3" role="combobox" aria-expanded="false" aria-haspopup="true" auto-complete="both" aria-owns="acl_li3"/>
<ul id="acl_li3" role="listbox">
<li role="option">NAVER</li>
<li role="option">NAVER Webtoon</li>
<li role="option">NAVER Mail</li>
<li role="option">NAVER Map</li>
</ul>
<script>
NuliComplete("autoComplete3");
</script>
메뉴
1) 콘텍스트형
키보드 사용
설정 버튼을 선택한 경우
해상도 팝업으로 초점 이동
Tab : 레이어 닫고 설정 버튼으로 초점 보내기
Esc : 설정 메뉴 닫고 설정 버튼으로 초점 이동
왼쪽, 오른쪽 화살표 : 해상도, 재생속도조절 상위 메뉴 순환
아래쪽, 위쪽 화살표 : 초점을 위치한 메뉴 열고 처음, 마지막 요소로 초점 이동
Enter : 초점을 받은 요소 하위 메뉴 열고 첫 번째 메뉴에 초점 이동
하위 메뉴가 노출된 경우
하위 첫 번째 요소로 초점 이동
Tab : 뒤로, 다시 누르면 레이어 닫고 설정 버튼으로 초점 이동
오른쪽, 왼쪽 화살표 : 하위 메뉴 닫고 다음 또는 이전 항목으로 초점 이동
Enter : 선택한 메뉴 요소 실행
Esc: 하위메뉴 닫고 이전 상위 메뉴에 초점 보내기
뒤로 버튼 선택 시 : 하위 메뉴 닫고 이전 상위 메뉴로 초점 이동
구성 요소
콘텍스트형 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="menu"
메뉴 선택 목록
필수
role="menuitem"
메뉴에서의 선택 항목
role="none"
역할 없음
aria-label
각 메뉴 그룹에 들어갈 레이블
필수
aria-expanded
필수
aria-haspopup
true : 메뉴 있음
false : 기본값, 메뉴 없음
필수
aria-current
선택된 메뉴가 있는 경우 적용
false : 기본값, 해당 항목이 현재 맥락과 불일치
true : 해당 항목이 현재 맥락과 일치
마크업
<button aria-haspopup="true" aria-controls="video-menu" aria-expanded="false">설정</button>
<div id="video-menu" role="menu" aria-label="설정">
<button role="menuitem" aria-haspopup="true" aria-controls="resolution-menu" aria-expanded="false" tabindex="-1">해상도 자동(480p)</button>
<div id="resolution-menu">
<ul role="menu" aria-label="해상도">
<li role="none"><a href="#" role="menuitem">자동(480p)</a></li>
<li role="none"><a href="#" role="menuitem">1080p HD</a></li>
<li role="none"><a href="#" role="menuitem">720p HD</a></li>
<li role="none"><a href="#" role="menuitem">480p</a></li>
<li role="none"><a href="#" role="menuitem">360p</a></li>
<li role="none"><a href="#" role="menuitem">270p</a></li>
</ul>
</div>
<button role="menuitem" aria-haspopup="true" aria-controls="speed-menu" aria-expanded="false" tabindex="-1">재생속도 1.0x(기본)</button>
<div id="speed-menu">
<ul role="menu" aria-label="재생 속도">
<li role="none"><a href="#" role="menuitem">0.25x</a></li>
<li role="none"><a href="#" role="menuitem">0.5x</a></li>
<li role="none"><a href="#" role="menuitem">0.75x</a></li>
<li role="none"><a href="#" role="menuitem">1.0x(기본)</a></li>
<li role="none"><a href="#" role="menuitem">1.25x</a></li>
<li role="none"><a href="#" role="menuitem">1.5x</a></li>
</ul>
</div>
</div>
2) 데스크톱형
문서나 에디터에서 사용하는 데스크톱 형태의 메뉴입니다.
키보드 사용
Alt + f10: 편집창에 있을 경우 메뉴바 첫 요소로 초점 이동
초점이 편집창에 있을 때는 메뉴바에 키보드 접근이 불가능하도록 모든 요소에 tabindex="-1" 적용
'Alt + f10'을 누르거나 마우스 클릭 등으로 메뉴바 이동 시 파일, 편집과 같은 상위 메뉴에 키보드 접근이 가능하도록 tabindex="0" 적용
Tab, Shift Tab : 메뉴바에 있을 경우 상위 메뉴 내에서 순환
메뉴 바
Enter, Space bar : 하위 메뉴 열고 하위 메뉴의 첫 번째 항목으로 초점 이동
왼쪽 화살표 : 메뉴 바의 이전 항목으로 초점 이동, 첫 번째 항목이면 마지막 항목으로 초점 이동
오른쪽 화살표 : 메뉴 바의 다음 항목으로 초점 이동, 마지막 항목이면 첫 번째 항목으로 초점 이동
위쪽 화살표 : 하위 메뉴를 여고 하위 메뉴의 마지막 항목으로 초점 이동
아래쪽 화살표 : 하위 메뉴를 열고 하위 메뉴의 첫 번째 항목으로 초점 이동
Home : 메뉴 바의 첫 번째 항목으로 초점 이동
End : 메뉴 바의 마지막 항목으로 초점 이동
Esc : 하위 메뉴가 열려 있으면 닫기, 한 번 더 누르면 편집창으로 초점 보내고 메뉴바에 키보드 접근이 불가능하도록 모든 요소에 tabindex="-1" 적용
하위 메뉴
Enter, Space bar : 메뉴 항목 활성화
왼쪽 화살표 : 하위 메뉴 닫기, 메뉴 바의 이전 항목으로 초점 이동
오른쪽 화살표 : 하위 메뉴 닫기, 메뉴 바의 다음 항목으로 초점 이동
위쪽 화살표 : 이전 항목으로 초점 이동, 첫 번째 항목이면 마지막 항목으로 초점 이동
아래쪽 화살표 : 다음 항목으로 초점 이동, 마지막 항목이면 첫 번째 항목으로 초점 이동
Home : 메뉴 목록의 첫 번째 항목으로 초점 이동
End : 메뉴 목록의 마지막 항목으로 초점 이동
Escape : 하위 메뉴 닫기, 상위 메뉴 항목으로 초점 이동
구성 요소
데스크톱형 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="menubar"
메뉴 표시 줄
필수
role="menu"
메뉴 선택 목록
필수
role="menuitem"
메뉴에서의 선택 항목
role="none"
역할 없음
aria-label
각 메뉴 그룹에 들어갈 레이블
필수
aria-expanded
필수
aria-haspopup
true : 메뉴 있음
false : 기본값, 메뉴 없음
필수
aria-current
선택된 메뉴가 있는 경우 적용
false : 기본값, 해당 항목이 현재 맥락과 불일치
true : 해당 항목이 현재 맥락과 일치
마크업
<ul role="menubar">
<li role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-controls="editor_filemenu">파일</a>
<ul id="editor_filemenu" role="menu" aria-label="파일">
<li role="none"><a href="#" role="menuitem">열기</a></li>
<li role="none"><a href="#" role="menuitem">저장</a></li>
<li role="none"><a href="#" role="menuitem">다른 이름으로 저장</a></li>
</ul>
</li>
<li role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-controls="editor_eidtmenu" aria-expanded="false">편집</a>
<ul id="editor_eidtmenu" role="menu" aria-label="편집">
<li role="none"><a href="#" role="menuitem">잘라내기</a></li>
<li role="none"><a href="#" role="menuitem">복사</a></li>
<li role="none"><a href="#" role="menuitem">붙여넣기</a></li>
</ul>
</li>
<li>
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-controls="editor_fontmenu">서식</a>
<ul id="editor_fontmenu" role="menu" aria-label="서식">
<li role="none"><a href="#" role="menuitem">자동 줄 바꿈</a></li>
<li role="none"><a href="#" role="menuitem">글꼴</a></li>
</ul>
</li>
<li>
<ul role="menu" aria-label="정렬">
<li role="none"><a href="#" role="menuitem" aria-current="true" aria-label="왼쪽 정렬"> </a></li>
<li role="none"><a href="#" role="menuitem" aria-current="false" aria-label="가운데 정렬"> </a></li>
<li role="none"><a href="#" role="menuitem" aria-current="false" aria-label="오른쪽 정렬"> </a></li>
</ul>
</li>
</ul>
탭
1) 가로형
탭 메뉴 선택 시 해당 탭 내용이 노출됩니다.
키보드 사용
Tab : 선택한 탭을 제외한 탭 메뉴 이동 불가능
왼쪽 화살표 : 이전 탭 메뉴로 이동하고 활성화
오른쪽 화살표 : 다음 탭 메뉴로 이동하고 활성화
Home : 초점을 첫 번째 탭으로 이동하고 활성화
End : 초점을 마지막 탭으로 이동하고 활성화
구성 요소
가로형 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="tablist"
탭 메뉴 리스트
필수
role="tab"
탭 메뉴
필수
role="tabpanel"
탭 내용
aria-orientation
horizontal : 기본값, 가로 형태로 배치
vertical : 세로 형태로 배치
필수
aria-selected
aria-controls
탭 요소와 탭 내용을 id 로 연결
aria-labelledby 혹은 aria-label
탭 컨트롤 혹은 탭 본문의영역정보 제공
role="none"
ul > li 구조에서 해당 역할을 하지 않는 경우 필수
마크업
<ul role="tablist">
<li role="none"><a href="#" role="tab" aria-selected="true" aria-controls="tab_ui">탭1</a></li>
<li role="none"><a href="#" role="tab" aria-selected="false" aria-controls="tab_ac">탭2</a></li>
<li role="none"><a href="#" role="tab" aria-selected="false" aria-controls="tab_se">탭3</a></li>
</ul>
<div id="tab_ui" role="tabpanel" aria-labelledby="ui" tabindex="0">
첫번째 탭 내용
</div>
<div id="tab_ac" role="tabpanel" aria-labelledby="ac" tabindex="0" style="display:none">
두번째 탭 내용
</div>
<div id="tab_se" role="tabpanel" aria-labelledby="se" tabindex="0" style="display:none">
세번째 탭 내용
</div>
버튼
1) 기본 버튼
키보드 사용
Enter, Space bar : 버튼 활성화
Tabindex="0": 초점을 받지 않는 요소에 적용 시 키보드 접근 가능
구성 요소
기본 버튼 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="button"
버튼 역할
마크업
<div style="cursor:pointer" role="button" tabindex="0">버튼</div>
2) 토글 버튼
키보드 사용
Enter, Space bar : 버튼 활성화
구성 요소
토글 버튼 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
aria-pressed
마크업
<button aria-pressed="false">음소거</button>
3) 확장/축소 버튼
Q. 스크린리더를 테스트하려면 어떻게 해야 하나요?
A. 전달드린 주소와 계정으로 원격 접속하여 테스트 가능합니다.
키보드 사용
Enter, Space bar : 버튼 활성화
구성 요소
확장/축소 버튼 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
aria-expanded
필수
aria-controls
탭 요소와 탭 내용을 id 로 연결
마크업
<button aria-expanded="false" aria-controls="expanded-example">Q. 스크린리더를 테스트하려면 어떻게 해야 하나요?</button>
<div id="expanded-example" style="display:none">A. 전달드린 주소와 계정으로 원격 접속하여 테스트 가능합니다.</div>
체크박스
1) 기본 체크박스
키보드 사용
Tab : 다음 체크박스로 초점 이동
Space bar : 체크박스 활성화
Tabindex="0" : 초점을 받지 않는 요소에 적용 시 키보드 접근 가능
구성 요소
기본 체크박스 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
role="group"
동일 속성의 집합
필수
role="checkbox"
체크박스 역할
필수
aria-checked
true : 체크됨
false : 체크되지 않음
aria-labelledby
role=“group” 사용시 레이블 제공
role="none"
ul > li 구조에서 해당 역할을 하지 않는 경우 필수
마크업
<strong id="group_chk_lb01">관심 서비스</strong>
<ul role="group" aria-labelledby="group_chk_lb01">
<li role="none"><span role="checkbox" aria-checked="true">날씨</span></li>
<li role="none"><span role="checkbox" aria-checked="false">영화</span></li>
<li role="none"><span role="checkbox" aria-checked="false">밴드</span></li>
<li role="none"><span role="checkbox" aria-checked="false">오피스</span></li>
</ul>
2) 전체 선택 가능한 체크박스
키보드 사용
Tab : 다음 체크박스로 초점 이동
Space bar : 체크박스 활성화
구성 요소
전체 선택 가능한 체크박스 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
role="group"
동일 속성의 집합
role="checkbox"
체크박스 역할
필수
aria-checked
true : 체크됨
false : 체크되지 않음
aria-labelledby
role=“group” 사용시 레이블 제공
aria-controls
속성값과 일치하는 id를 참조
role="none"
ul > li 구조에서 해당 역할을 하지 않는 경우 필수
마크업
<strong id="group_chk_lb02">관심 서비스</strong>
<div role="group" aria-labelledby="group_chk_lb02">
<span role="checkbox" aria-checked="false" aria-controls="chk2_1 chk2_2 chk2_3 chk2_4" tabindex="0">전체 선택</span>
<ul role="none">
<li role="none"><span id="chk2_1" role="checkbox" aria-checked="true" tabindex="0">날씨</span></li>
<li role="none"><span id="chk2_2" role="checkbox" aria-checked="false" tabindex="0">영화</span></li>
<li role="none"><span id="chk2_3" role="checkbox" aria-checked="false" tabindex="0">밴드</span></li>
<li role="none"><span id="chk2_4" role="checkbox" aria-checked="false" tabindex="0">오피스</span></li>
</ul>
</div>
3) 하위 콘텐츠가 있는 체크박스
키보드 사용
Tab : 다음 체크박스로 초점 이동
Space bar : 체크박스 활성화
구성 요소
하위 콘텐츠가 있는 체크박스 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
role="group"
동일 속성의 집합
role="checkbox"
체크박스 역할
필수
aria-checked
true : 체크됨
false : 체크되지 않음
aria-labelledby
role=“group” 사용시 레이블 제공
aria-controls
속성값과 일치하는 id를 참조
필수
aria-expanded
role="none"
ul > li 구조에서 해당 역할을 하지 않는 경우 필수
마크업
<strong id="group_chk_lb03">가능날짜</strong>
<div role="group" aria-labelledby="group_chk_lb03">
<span id="show-checkdate" role="checkbox" aria-expanded="false" aria-checked="false" aria-controls="chk3_1_1 chk3_1_2 chk3_1_3" tabindex="0">날짜<span>전체</span></span>
<ul id="checkdate-lists" role="none">
<li role="none"><span id="chk3_1_1" role="checkbox" aria-checked="false" tabindex="0">1월 1일</span></li>
<li role="none"><span id="chk3_1_2" role="checkbox" aria-checked="false" tabindex="0">1월 2일</span></li>
<li role="none"><span id="chk3_1_3" role="checkbox" aria-checked="false" tabindex="0">1월 3일</span></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$("#show-checkdate").on("click keydown", function(e){
if(e.type === "keydown" && e.keyCode == 32 || e.type === "click") {
$(this).attr("aria-expanded", true);
$("#checkdate-lists").show();
}
});
</script>
라디오버튼
1) 기본 라디오버튼
키보드 사용
왼쪽, 위쪽 화살표 : 이전 라디오 버튼으로 초점 이동 및 활성화
오른쪽, 아래쪽 화살표 : 다음 라디오 버튼으로 초점 이동 및 활성화
Space bar : 라디오 버튼 활성화, 선택된 라디오버튼만 초점 받음, 모두 선택 안 된 경우 첫 번째 요소만 초점 받음
Tabindex="0" : 초점을 받지 않는 요소에 적용 시 키보드 접근 가능
구성 요소
기본 라디오버튼 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
role="radiogroup"
라디오버튼 집합
aria-labelledby
role= “radiogroup” 사용 시 레이블 제공
필수
role="radio"
라디오버튼 역할
필수
aria-checked
true : 체크됨
false : 체크되지 않음
role="none"
ul > li 구조에서 해당 역할을 하지 않는 경우 필수
마크업
<strong id="group_radio_lb01">보안등급</strong>
<ul role="radiogroup" aria-labelledby="group_radio_lb01">
<li role="none"><span role="radio" aria-checked="false" tabindex="0">일반</span></li>
<li role="none"><span role="radio" aria-checked="false" tabindex="0">대외비</span></li>
<li role="none"><span role="radio" aria-checked="false" tabindex="0">기밀</span></li>
</ul>
선택목록
1) 단일 선택목록
정렬 방법 선택
네이버 랭킹순
네이버 랭킹순
낮은 가격순
높은 가격순
등록일순
리뷰 많은순
키보드 사용
위쪽 화살표 : 목록을 확장하고 목록 마지막 항목으로 초점 이동 및 값 변경. 목록이 확장된 경우 이전 목록으로 이동
아래쪽 화살표 : 목록을 확장하고 목록 첫 번째 항목으로 초점 이동 및 값 변경. 목록 안에 있을 경우 다음 목록으로 이동
Enter : 목록 확장 또는 선택된 항목 활성화
Space bar : 목록이 축소된 경우 확장하고 첫 번째 목록에 포커스
Esc : 목록 상자 닫고 목록 열기 버튼으로 위치
Tab, Shift Tab : 목록을 닫고 해당 목록 버튼으로 초점 위치
구성 요소
단일 선택목록 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="listbox"
선택 목록
필수
role="option"
선택 목록에서 선택 가능한 항목
필수
aria-haspopup
false : 기본값, 연결된 팝업 없음
listbox : 선택 목록 팝업 있음
필수
aria-expanded
필수
aria-selected
aria-labelledby
어떤 리스트박스인지에 대한 레이블 제공
필수
role="none"
li > a 구조인 경우 li 요소에 사용
마크업
<button aria-haspopup="listbox" aria-controls="li_sort" aria-expanded="false">네이버 랭킹순</button>
<ul id="li_sort" role="listbox" aria-labelledby="select_lb" style="display:none">
<li id="li_sort01" role="option" aria-selected="false" tabindex="0">네이버 랭킹순</li>
<li id="li_sort02" role="option" aria-selected="false" tabindex="0">낮은 가격순</li>
<li id="li_sort03" role="option" aria-selected="false" tabindex="0">높은 가격순</li>
<li id="li_sort04" role="option" aria-selected="true" tabindex="0">등록일순</li>
<li id="li_sort05" role="option" aria-selected="false" tabindex="0">리뷰 많은순</li>
</ul>
입력 서식 오류
1) 기본 입력 서식 오류
구성 요소
기본 입력 서식 오류 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="alert"
알림
aria-describedby
편집창과 입력 가이드 및 에러 메시지를 연결
필수
aria-invalid
true: 입력 값이 유효하지 않음
false : 기본값, 오류 없음
마크업
<label for="input_email">이메일</label>
<input type="text" aria-describedby="error_msg" aria-invalid="true" />
<div role="alert" id="error_msg" style="display:none">이메일 형식이 아닙니다.</div>
슬라이더
1) 싱글 슬라이더
키보드 사용
Home : 슬라이더 값을 최소값으로 설정
End : 슬라이더 값을 최대값으로 설정
가로 슬라이더의 경우
왼쪽 화살표 : 슬라이더 값 한 단계 감소
오른쪽 화살표 : 슬라이더 값 한 단계 증가
세로 슬라이더의 경우
위쪽 화살표 : 슬라이더 값 한 단계 증가
아래쪽 화살표 : 슬라이더 값 한 단계 감소
구성 요소
싱글 슬라이더 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="slider"
슬라이더
필수
aria-labelledby
role="silder" 사용 시 레이블 제공
필수
aria-valuemin
슬라이더 최소값
필수
aria-valuemax
슬라이더 최대값
필수
aria-valuenow
슬라이더 현재값
aria-valuetext
현재 상태를 텍스트로 포현
aria-orientation
horizontal : 기본값, 가로 형태로 배치
vertical : 세로 형태로 배치
마크업
<div draggable="true" role="slider" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" aria-valuetext="0" aria-orientation="horizontal" aria-label="점수" tabindex="0"></div>
배너 슬라이드
1) 배너 슬라이드
구성 요소
배너 슬라이드 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
aria-controls
속성값과 일치하는 id를 참조
aria-live
off : 라이브 영역이 꺼져있는 상태
polite : 보조 기술이 하던 일을 마치면 변경 사항을 읽어줌
assertive : 보조 기술이 하던 일을 중지시키고 변경 사항을 읽어줌
필수
aria-current
현재 선택된 배너 버튼에 적용
false : 기본값, 해당 항목이 현재 맥락과 불일치
true : 해당 항목이 현재 맥락과 일치
트리뷰
1) 폴더/파일형
키보드 사용
Enter: 트리뷰 활성화
위쪽 화살표 : 첫 번째 항목이 아니면 이전 항목으로 초점 이동
아래쪽 화살표 : 마지막 항목이 아니면 다음 항목으로 초점 이동
왼쪽 화살표 : 트리가 열려 있으면 트리 닫기, 상위 트리로 초점이동
오른쪽 화살표 : 트리가 닫혀 있으면 트리 열기
Home : 트리를 열거나 닫지 않고 첫 번째 항목으로 초점 이동
End : 트리를 확장하지 않고 초점을 맞출 수 있는 마지막 항목으로 초점 이동
a-z, A-Z : 입력된 문자로 시작하는 이름을 가진 항목으로 초점 이동, 일치하는 이름이 없으면 첫 번째 항목으로 초점 이동
구성 요소
폴더/파일형 트리뷰 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
필수
role="tree"
트리 전체
필수
role="treeitem"
트리 요소
role="none"
역할 없음
role="group"
동일 속성의 집합
필수
aria-expanded
aria-current
선택된 treeitem에 적용
false : 기본값, 해당 항목이 현재 맥락과 불일치
true : 해당 항목이 현재 맥락과 일치
랜드마크
1) 랜드마크
구성 요소
랜드마크 wai-aria 구성요소
필수유무, role, property, state, 설명 정보 제공
필수유무
role
property
state
설명
role="banner"
페이지 상단의 로고, 검색 도구 등을 포함하는 영역
role="navigation"
메뉴
role="main"
페이지 본문
role="complementary"
주요 콘텐츠의 보조적인 정보
role="contentinfo"
페이지 하단에 제공되는 정보
role="form"
서식 영역
role="region"
사이트 제작자가 중요하다고 판단하는 콘텐츠
role="search"
검색 영역
aria-label
한 페이지에 같은 종류의 랜드마크가 두 번 이상 마크업되거나 role="region" 적용 시 영역 정보 제공
마크업
<div role="banner">
<h1><a href="/" aria-label="널리" role="image"></a></h1>
<div aria-label="메인 메뉴">
<ul>
<li><a href="#">체험</a></li>
<li><a href="#">지침</a></li>
<li><a href="#">교육</a></li>
<li><a href="#">세미나</a></li>
<li><a href="#" aria-current="true">커뮤니티</a></li>
<li><a href="#">개발도구</a></li>
</ul>
</div>
</div>
<div role="navigation" aria-label="커뮤니티">
<h2>커뮤니티</h2>
<ul>
<li><a href="#" aria-current="true">아티클</a></li>
<li><a href="#">포럼</a></li>
</ul>
</div>
<div role="main">
<h3>아티클</h3>
<ul>
<li>
<a href="#">
<strong>WAI-ARIA 바르게 사용하기 10부 - TreeView</strong>
</a>
</li>
<li>
<a href="#">
<strong>WCAG 3.0 첫번째 초안 문서를 기준으로 살펴보는 WCAG 변경된 사항</strong>
</a>
</li>
</ul>
</div>
WAI-ARIA 바르게 사용하기 10부 - TreeView
WCAG 3.0 첫번째 초안 문서를 기준으로 살펴보는 WCAG 변경된 사항
사람을 돕는 직업을 가진 도우미. 안내견들의 이야기
최악의 사례들로 배우는 캐러셀 접근성
[세미나 2차 공지] 누구나 접근할 수 있는! 2020 널리 웨비나
[세미나 1차 공지] 누구나 접근할 수 있는! 2020 널리 웨비나
