WAI-ARIAの考え方と使い方を整理しよう
•
12 gostaram•14,289 visualizações
（※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09） 2017-03-05（日）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a WAI-ARIAの考え方と使い方を整理しよう
Semelhante a WAI-ARIAの考え方と使い方を整理しよう (20)
Mais de Nozomi Sawada
Mais de Nozomi Sawada (15)
WAI-ARIAの考え方と使い方を整理しよう
- 1. 1
- 3. 自己紹介 3 1
- 4. 4 澤田 望
- 6. 6 岡山で独立（2014） Webアクセシビリティ検証／ イラスト制作／ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン （〜2013） サイトデザイン監修／ Webアクセシビリティ対応 WAIC （2011〜）（ウェブアクセシビリティ基盤委員会） WG2（実装）／WG4（翻訳）委員
- 7. 今日の目標 7 2
- 10. 10 Web Accessibility Initiative Accessible Rich Internet Applications の略 WAI-ARIAとは
- 19. 19 •UAが正しく解釈し、正しく振る舞うようになる •スクリーンリーダー利用者に正しく伝わる •CSSやJavaScriptを使った開発が楽になる＊ WAI-ARIAを使うと何が変わるのか？
- 20. WAI-ARIAの仕様 20 4
- 27. 27 •ランドマーク・ロール ： 8種 •文書構造ロール ：26種 •ウィジェット・ロール ：36種 •抽象ロール（使用禁止） ：12種 role属性の分類
- 32. 32 mainロールの実装例 <div>〜</div> <div role="main">〜</div> <main>〜</main> <!— 今後はこれでOK —> <main role="main">〜</main>
- 44. 44 menuロールの実装例 <ul> <li>〜</li> <li>〜</a></li> <li>〜</li> </ul> <ul role="menu"> <li role="menuitem">〜</li> <li role="menuitem">〜</li> <li role="menuitem">〜</li> </ul>
- 53. 53 •グローバル・ステート&プロパティ属性：21種 •関係属性 ：16種 •ウィジェット属性 ：24種 •ライブ領域属性 ： 4種 •ドラッグアンドドロップ属性（非推奨） ： 2種 aria-○○○属性の分類
- 60. 60 aria-labelledby属性を追加した実装例 <svg role="img" aria-labelledby="ttlOko dscOko" xmlns="〜"> <title id="ttlOko">タイトル</title> <desc id="dscOko">説明文</desc>
- 66. 66 aria-checked属性の実装例 <ul role="menu"> <li role="menuitem">〜</li> <li role="menuitem">〜</li> <li role="menuitem">〜</li> </ul> <ul role="menu"> <li role="menuitemcheckbox" aria-checked="false">〜</li> <li role="menuitemcheckbox" aria-checked="true">〜</li> <li role="menuitemcheckbox" aria-checked="false">〜</li> </ul>
- 67. 67 VoiceOverで聞いてみよう sawada-std-design.com/works/d2d-study/accessibility/wai-aria/aria-checked.html
- 81. •属性セレクタでrole属性やaria-○○○属性が 使用できる CSS／JSの開発が楽になる？ 81 CSSの属性セレクタについて li [ aria-checked="true" ] { 〜 ; } sawada-std-design.com/works/d2d-study/accessibility/wai-aria/aria-checked-css.html
- 90. 90 ただし...
- 91. サポート状況など 91 7
- 101. まとめ 101 8