奥础滨-础搁滨础珍プレー好プレー
?
11 likes?5,794 views
2016年9月3日開催の「HTML5 Conference 2016」において、アクセシビリティ部 アクセシビリティ?エンジニアの黒澤 剛志が講演「奥础滨-础搁滨础珍プレー好プレー」で使用したスライドです。
奥础滨-础搁滨础珍プレー好プレー
- 6. 奥别产アクセシビリティ
- 12. WAI-ARIA
- 13. WAI-ARIAとは WAI：Web Accessibility Initiative ARIA：Accessible Rich Internet Applications ? Webアプリケーションをよりアクセシブルに
- 17. 例：メニューボタン
- 21. 例：メニューボタン（ARIAなし） <div> <button type="button" id="button"> ファイル</button> <ul id="menu"> <li>開く…</li> </ul> </div>
- 22. 例：メニューボタン（ARIAあり） <div> <button type="button" id="button" aria-haspopup="true" aria-controls="menu"> ファイル</button> <ul id="menu" role="menu" aria-labelledby="button"> <li role="menuitem">開く…</li> </ul> </div>
- 23. 珍プレー好プレー
- 29. clickイベントの挙動 ● button要素やa要素（href属性あり） – マウスによるクリックで発生 – キーボードでEnterキーなどを押したときに発生 ● それ以外 – マウスによるクリックのみ発生 – キーボード操作は別途実装
- 32. clickイベントの挙動（再掲） ● button要素やa要素（href属性あり） – マウスによるクリックで発生 – キーボードでEnterキーを押したときに発生 ● それ以外 – マウスによるクリックのみ発生 – キーボード操作は別途実装
- 35. 2. 不思議な入れ子構造
- 36. 珍プレー <div role="button"> <span onclick="">ファイル</span> <ul role="menu"> <li role="menuitem">開く…</li> </ul> </div> ※ わかりやすさのため、一部の属性を省略しています
- 39. 珍プレーはこうみなされていた <div role="button"> <span onclick="">ファイル</span> <div> <div>開く…</div> </div> </div>
- 40. 好プレー <div> <span role="button" onclick="">ファイル</span> <ul role="menu"> <li role="menuitem">開く</li> </ul> </div> ※ わかりやすさのため、一部の属性を省略しています
- 42. 好プレー #2 <div> <button type="button" onclick="">ファイル</button> <ul role="menu"> <li role="menuitem">開く</li> </ul> </div> ※ わかりやすさのため、一部の属性を省略しています
- 46. まとめ