Skip to content

Instantly share code, notes, and snippets.

@azusa-tomita

azusa-tomita/index.html

Created April 3, 2020 07:20
Show Gist options
  • Save azusa-tomita/b775eddeb63c74f1b8c89f65086e622c to your computer and use it in GitHub Desktop.
Save azusa-tomita/b775eddeb63c74f1b8c89f65086e622c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/nedikel
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>button</h2>
<div>
<h3>aria/roleなし</h3>
<div>
<button id="btn1" type="button">HOGE</button>
</div>
<h3>aria-pressed</h3>
<div>
<button id="btn2-0" type="button" aria-pressed="false" onclick="toggle(this.id);">HOGE(aria-pressed="false")</button><br>
<button id="btn2-1" type="button" aria-pressed="true" onclick="toggle(this.id);">HOGE(aria-pressed="true")</button>
</div>
<h3>role="switch" + aria-checked</h3>
<div>
<button id="btn3-0" type="button" role="switch" aria-checked="false" onclick="toggle(this.id);">HOGE(aria-checked="false")</button><br>
<button id="btn3-1" type="button" role="switch" aria-checked="true" onclick="toggle(this.id);">HOGE(aria-checked="true")</button>
</div>
</div>
<h2>input button</h2>
<div>
<h3>aria/roleなし</h3>
<div>
<input id="ibtn1" type="button" value="HOGE">
</div>
<h3>aria-pressed</h3>
<div>
<input id="ibtn2-0" type="button" aria-pressed="false" onclick="toggle(this.id);" value="HOGE(aria-pressed=false)"><br>
<input id="ibtn2-1" type="button" aria-pressed="true" onclick="toggle(this.id);" value="HOGE(aria-pressed=true)">
</div>
<h3>role="switch" + aria-checked</h3>
<div>
<input id="ibtn3-0" type="button" role="switch" aria-checked="false" onclick="toggle(this.id);" value="HOGE(aria-pressed=false)"><br>
<input id="ibtn3-1" type="button" role="switch" aria-checked="true" onclick="toggle(this.id);" value="HOGE(aria-pressed=true)">
</div>
</div>
<h2>checkbox + label</h2>
<div>
<h3>aria/roleなし</h3>
<div>
<input id="c1-1" type="checkbox">
<label for="c1-1">HOGE</label>
<br>
<input id="c1-2" type="checkbox" checked>
<label for="c1-2">HOGE(checked)</label><br>
</div>
<h3>aria-pressed (+ role="button")</h3>
<div>
<input id="c2-1" type="checkbox" role="button" aria-pressed="false" onclick="toggle(this.id);">
<label for="c2-1">HOGE</label>
<br>
<input id="c2-2" type="checkbox" checked role="button" aria-pressed="true" onclick="toggle(this.id);">
<label for="c2-2">HOGE(checked,aria-pressed="true")</label>
</div>
<h3>role="switch"</h3>
<div>
<input id="c3-1" type="checkbox" role="switch" onclick="toggle(this.id);">
<label for="c3-1">HOGE</label>
<br>
<input id="c3-2" type="checkbox" checked role="switch" onclick="toggle(this.id);">
<label for="c3-2">HOGE(checked)</label>
</div>
</div>
<h2>label > checkbox</h2>
<div>
<h3>aria/roleなし</h3>
<div>
<label><input id="cil1-1" type="checkbox">HOGE</label>
<br>
<label><input id="cil1-2" type="checkbox" checked>HOGE(checked)</label>
</div>
<h3>aria-pressed (+ role="button")</h3>
<div>
<label><input id="cil2-1" type="checkbox" role="button" aria-pressed="false" onclick="toggle(this.id);">HOGE</label>
<br>
<label><input id="cil2-2" type="checkbox" checked role="button" aria-pressed="true" onclick="toggle(this.id);">HOGE(checked,aria-pressed="true")</label>
</div>
<h3>role="switch"</h3>
<div>
<label><input id="cil3-1" type="checkbox" role="switch" onclick="toggle(this.id);">HOGE</label>
<br>
<label><input id="cil3-2" type="checkbox" checked role="switch" onclick="toggle(this.id);">HOGE(checked,aria-checked="true")</label>
</div>
</div>
<h2>特殊なケースの挙動確認</h2>
<h3>inputに複数のラベルからforしている場合</h3>
<label for="z1">ラベル1</label>
ダミー
<input id="z1" type="checkbox">
ダミー
<label for="z1">ラベル2</label>
<h3>button に aria-checked と aria-pressedを両方指定している場合</h3>
<div>
<button id="z2-0" type="button" aria-checked="false" aria-pressed="false" onclick="toggle(this.id);">HOGE(aria-checked,pressed="false")</button><br>
<button id="z2-1" type="button" aria-checked="true" aria-pressed="true" onclick="toggle(this.id);">HOGE(aria-checked,pressed="true")</button>
</div>
<h3>switch に aria-checked と aria-pressedを両方指定している場合</h3>
<div>
<button id="z3-0" type="button" role="switch" aria-checked="false" aria-pressed="false" onclick="toggle(this.id);">HOGE(aria-checked,pressed="false")</button><br>
<button id="z3-1" type="button" role="switch" aria-checked="true" aria-pressed="true" onclick="toggle(this.id);">HOGE(aria-checked,pressed="true")</button>
</div>
<h3>switch に chekced と aria-checkedを両方指定している場合</h3>
<div>
<input id="z4-1" type="checkbox" role="switch" aria-checked="false" onclick="toggle(this.id);">
<label for="z4-1">HOGE</label>
<br>
<input id="z4-2" type="checkbox" checked role="switch" aria-checked="true" onclick="toggle(this.id);">
<label for="z4-2">HOGE(checked,aria-checked="true")</label>
</div>
<h3>labelが空の場合</h3>
<input type="checkbox" id="empty"><label for="empty" style="display:inline-block;border:1px solid red;width:5em;height:1em;"></label>
<h2>読み上げ順の確認</h2>
<h3>label + checkboxの場合</h3>
<label for="y1">ラベル1</label><input id="y1" type="checkbox">
<h3>label +　要素 + checkboxの場合</h3>
<label for="y2">ラベル1</label><p>ラベルとチェックボックスの間</p><input id="y2" type="checkbox">
<h3>checkbox + 要素 + labelの場合</h3>
<input id="y3" type="checkbox"><p>ラベルとチェックボックスの間</p><label for="y3">ラベル1</label>
<script>
function toggle(btnID) {
var theButton = document.getElementById(btnID);
if (theButton.hasAttribute("aria-pressed")){
if (theButton.getAttribute("aria-pressed") == "false") {
theButton.setAttribute("aria-pressed", "true");
} else {
theButton.setAttribute("aria-pressed", "false");
}
}
if (theButton.hasAttribute("aria-checked")){
if (theButton.getAttribute("aria-checked") == "false") {
theButton.setAttribute("aria-checked", "true");
} else {
theButton.setAttribute("aria-checked", "false");
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment