| 요소 | 속성/상태 | 설명 | |
| <button> | 버튼. 엔터키나 스페이스바로 선택 | ||
| aria-disabled="true | false" | 사용할 수 없는 버튼 상태는 true, 사용할 수 있으면 false | ||
| aria-pressed="true | false" | 버튼이 선택된 상태면 true, 해제되어 있으면 false | ||
| aria-labelledby="" | 그룹의 제목을 제공하기 위한 것으로 제목 요소의 id값과 연결 | ||
role=“button”은 해당 요소의 역할을 버튼으로 정의하고, 선택적으로 aria-describedby 속성을 사용하여 버튼에 추가 설명을 삽입할 수 있다. 버튼이 비 활성화 되었거나 더 이상 사용할 수 없을 때 aria-disabled 속성을 사용하여 현재의 상태 정보를 스크린리더에게 알려줄 수 있다.
토글 버튼은 눌려져 있거나 눌려져 있지 않은 두 가지 경우 중 하나이므로, 현재 버튼의 상태 정보를 aria-pressed 속성을 사용하여 알려줄 수 있다. 또한 2개 이상의 토글 버튼을 그룹화하여 제공하면 스 크린리더가 사용자의 쉬운 이해를 도울 수 있다.
단, 토글 버튼은 눌려지거나 눌려지지 않는 상태이므로 aria-disabled 속성을 사용하지 않으며 눌려지 는 상태 변화에 따라 버튼 텍스트도 변경되어서는 안 된다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> button </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$( '#div-btn' ).click(function(){
alert( '이것은 버튼입니다.' );
});
$( '#div-btn' ).keyup(function(e){
if( e.keyCode == 32 ){
alert( '스페이스바' );
}
if( e.keyCode == 13 ){
alert( '엔터키' );
}
});
});
</script>
</head>
<body>
<!--div버튼의 경우 : tabindex 속성을 사용하여 탭키로 이동이 가능하게 하고, WAI-ARIA의 role=“button”을 삽입하여 스크린리더에서 버튼임을 인식하게 한다. 이때 스크린리더로 듣게 되면, “button, print page”로 읽어주기
때문에 페이지를 인쇄하기 위한 버튼임을 인지할 수 있다 -->
<div class="button" id="div-btn" role="button" tabindex="0">DIV 버튼</div>
<!-- 토글 버튼 : WAI-ARIA의 aria-pressed 속성을 사용하여 현재 상태를 스크린리더에게 알려주어
야 하는데 눌려졌을 때는 true, 눌려지지 않았을 때는 false로 동적으로 변경되어야 한다 -->
<div class="button" id="language" tabindex="0" role="button" aria-pressed="true">Korean</div>
<!-- 토글버튼 그룹화 -->
<h2 id="language">언어선택</h2>
<div role="group" aria-labelledby="language">
<div class="tgbutton" id="div-btn1" role="button" tabindex="0" aria-pressed="true">Korean</div>
<div class="tgbutton" id="div-btn2" role="button" tabindex="0" aria-pressed="false">English</div>
</div>
</body>
</html>728x90
반응형
'WWWEB > Accessibility' 카테고리의 다른 글
| [WAI-ARIA] radio button (0) | 2020.07.21 |
|---|---|
| [WAI-ARIA] multi form (0) | 2020.07.20 |
| [WAI-ARIA] id/password input (0) | 2020.07.17 |
| [WAI-ARIA] auto complete 예제 (0) | 2020.07.17 |
| [WAI-ARIA] 탭 예제 (0) | 2020.07.17 |
댓글