combobox / grid / listbox / menu / menubar / radiogroup / tablist / tree / treegrid
"tablist"를 사용한 탭메뉴 예시
탭목록(tablist)과 본문(tabpanel)이 따로 나뉘어져 있는 마크업구조는 스크린리더 등 보조기기를 사용하는 사용자에게는 정보 접근이 어려울 수 있다. 이 때 Tab 관련 Widget Role을 사용하면 보조기기를 사용하는 사용자에게 보다 정확한 정보를 제공할 수 있다.
ㄴ [이미지설명] 탭메뉴 UI구조 (Role속성 위치)
탭메뉴1
탭메뉴2
탭메뉴3
탭메뉴1의 본문탭메뉴2의 본문탭메뉴3의 본문
사용된 WAI-ARIA
role="tablist" : role="tab"과 함께 사용되는 복합형 Role속성이며 요소에 탭목록 역할을 부여한다.
role="tab" : role="tablist"의 자식속성으로 사용되며 탭 역할을 부여한다.
role="tabpanel" : 탭의 본문 역할을 부여한다.
aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
"aria-aria-controls", "aria-labelledby" 을 사용한 탭메뉴 예시
탭메뉴1
탭메뉴2
탭메뉴3
탭메뉴1의 본문탭메뉴2의 본문탭메뉴3의 본문
사용된 WAI-ARIA
aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
유의사항
W3C에서는 HTML5 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되거나 충돌이 발생할 수 있으므로 중복해서 사용하지 않도록 주의를 당부하고 있다. ex) <header role="banner"></header></span></li>(X)
원래의 HTML 요소의 의미를 변경하면 안된다. ex) <h1 role="button"></h1>(X)
모든 RIA 컨텐츠는 키보드를 사용하여 접근할 수 있어야 한다.
모든 브라우저와 보조기기가 WAI-ARIA를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야한다.
'맑은커뮤니케이션 마크업' 개발팀에서는 iOS 10의 첫 번째 베타 버전이 출시되었을 때 일부 웹 퍼블리셔들은 viewport 메타태그의 user-scalable=no 가 사이트에서 작동 않는다는 사실을 발견하기까지는 오래 걸리지 않았습니다.
곧 Stack Overflow에서 이슈화 되기 시작했고, 이미 일부 퍼블리셔들은 JS 플러그인을 사용하여 이 문제를 해결하였습니다.
그러나 iOS 10의 첫 번째 베타 릴리스 노트에서 알 수 있듯이 버그가 아니며, Apple은 실제로 user-scalable=no 를 의도적으로 사용 중지했습니다. user-scalable=no의 기능을 중지한 이유는 휴대 전화의 가장 분명하고 유용한 제스처 중 하나 인 핀치 투 줌(pinch-to-zoom)을 자유롭게 사용할 수 있게 함으로서
시각 장애가 있는 사용자에게 웹의 접근성을 확보 할 수 있는 희망적인 이유이기 때문이다.
iOS 10 릴리즈 노트
Safari의 웹 사이트에 대한 접근성을 향상시키기 위해 웹 사이트에서 뷰어에 user-scalable=no 를 설정 한 경우에도 사용자가 손가락으로 확대/축소 할 수 있습니다.
iOS 10 릴리즈 노트 Apple의 올바른 생각
user-scalable=no은 다양한 호환성과 UX 문제가 많이 있습니다.
iOS 10 릴리즈 노트의 변화는 사용자가 페이지와 크기를 제어 할 수 있기 때문에 Apple 좋은 움직임이라고 생각합니다. "사용자 컨트롤 제공"은 항상 모든 UX 사용자를 위한 최상위의 조건이라고 생각합니다.
예를 들어, 눈이 너무 나쁘거나 시각장애인 의 경우 텍스트를 읽을 수 없는 경우 확대/축소를 할 수 있어야 합니다.
다양한 사용자에 대해 고려를 해야 하며, 우리는 개인적인 관점을 생각하지 말아야 합니다.
그래도 user-scalable=no 사용해야 한다면?
고객사를 설득하여 사용을 자제하도록 해야 하지만, 현실적으로 설득이 힘들다고 한다면 아래와 같이 사용하시면 됩니다.
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
테이블의 내용을 이해할 수 있도록 summary 속성, caption 태그를 제공해야 한다.
<table class="tbl_view" summary="1월부터 12월까지의 평균 강수량을 나타낸 표, 장마 기간이 있는 6~7월에 강수량이 가장 많고, 11월~2월 사이의 강수량이 가장 낮다.">
<caption>한국의 월별 강수량</caption><!-- 생략 -->
테이블을 제공할 경우, 머리글<thead>, 바닥글<tfoot>, 본문<tbody>을 구분하여야 한다.
서식을 제공할 경우 <label>을 제공해야 한다. * <label> 태그의 for와 <input />의 id가 동일하여야 합니다. * <label>이 <input>, <select> 등의 입력창과 제목을 연결시켜 문서 파악을 용이하게 합니다. * checkbox와 radio 경우 <label>을 이용하여 텍스트를 클릭해도 선택되게 작업할 수 있으며, 사용자들은 클릭영역이 넓어져 사용이 편리해집니다.
ㄴ [이미지설명] Landmark Role 속성 관련 영역
