【勉強会】D2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～
2017年3月5日（日）、サイボウズにて行われた「D2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～」に参加してきました。
サイボウズ大阪が10周年だそうで。
入り口。
会場の様子。
WAI-ARIA
- ウェイアリアと読む
- 要素と属性を追加する仕様
- ミキティこと、大藤幹さんの本が参考になる（http://amzn.to/2lK9ePL）
なぜ仕様を追加する必要があるか？
- HTMLの要素や属性だけで表現しきれない
例えば
- role属性
- aria-◯◯◯属性
- tabindex属性
UAが解釈する
何が変わるのか
- UAが正しく解釈し、正しく振る舞う
- スクリーンリーダーに正しく伝わる
- CSSやJSの開発が楽になる
WAI-ARIAの仕様について
- 2014年3月に勧告（1.0）
- 3年前の仕様となる
- もんどさんの訳が参考になる
- 1.1がほぼ勧告候補となっている
- これからは、1.1を見ながら作るのが良い
- https://momdo.github.io/wai-aria-1.1/
定義されている仕様
- role属性
- aria-◯◯◯属性
- tabindex属性
主な変更点
- 属性がかなり増えている
role属性
- 要素や意味の役割を定義するための属性
- 既存の要素の役割も上書きして変更できる
ランドマーク属性：8種
文書構造ロール：26
ウィジットロール
の3つを覚える
ランドマーク属性
- ナビゲーションの重要な目印
- HTML5の場合は同じロールの要素が既に存在するため、そのまま使うのが◯（regionとsearchを除く）
- 重複して書く必要はない
- banner / main / contentinfoはdocumentoロールまたは、applocationロールの内部にひとつしか配置できない
例
<div></div>
<div role="main"></div>
<main></main> ← 今後はこれでOK
<main role="main"></main>
VoiceOverにて実践
文書構造ロール
- 文書構造を示すためのロール
- セマンティックを定義
- あくまでも定義だけ
- 見た目の変更はCSSで行う
- presentationロールはセマンティクスを削除する
ウィジェットロール
- ユーザーインターフェース部品として機能する各種ウィジェットを示すためのロール
- あくまでも示すためのもの
- 動かすには、Javascriptが必要
注意点
- tabとtabpanelの関連付けには、tab側にaria-controle属性を指定するか、または、tabpanel側にaria-labelledby属性を指定
- 参照先に移動する場合：link
- 移動しない場合：button
- dialogロールのダイアログにはラベルが必須
- アラートを閉じない場合（読ませるだけ場合、フォームのエラー表示の時）：alert
- アラートを閉じる場合（処理を促す場合）：alertdialog
menuロールの実装例
メニューであることを明示している
<ul role="menu">
<li role=menuitem""></li>
</ul>
まとめ
HTMLにもともとある要素は役割を変えずに使うのが原則
aria-◯◯◯属性
- オブジェクトの状態（state）や性質、特性（propaty）を示す属性
- ロールとの組み合わせでユーザーに「何が、いつ、どう」変化したのかを通知できる
分類
- （グローバルステート＆プロパティ属性）
- 関係属性
- ウィジェット属性
- ライブ領域属性
- ドラッグアンドドロップ属性
関係属性
- 要素と要素の関係
- 文書構造からだけでは解釈しにくい関係性を定義（マークアップ順ではない読み上げ順）
- aria-labelldby属性は複数指定可能、半角スペース区切り
- ラベルを画面に表示できる場合：aria-labelledby
- ラベルを画面に表示できない場合：aria-label
- 短いラベルの場合：aria-labelledby
- 文章で説明する場合；aria-describedby
ウィジェット属性
- ウィジェット・ロールの要素で使用される各種属性
- ユーザーからの入力やアクションを受け取るインターフェース
- Javascriptが必要
- aria-hidden属性の使用は、見えているコンテンツを支援技術（スクリーンリーダーなど）から隠すことで、支援技術利用者とそうでない利用者の体験価値が同等になる場合に限る（気軽に隠すなよ）
- ↑例えば、del要素。スクリーンリーダーでは消えない
- required属性が使えるなら、aria-requred属性は不要
- aria-expanded属性で展開、折りたたみを行う場合は、要素（マークアップ上でネストする等）またはaria-controles属性で親子関係にする
ライブ領域属性
- アプリケーションにおける、ライブ領域（勝手に更新されるエリア）に固有の属性
- フォーカスの当たっていない要素に発生したコンテンツの更新情報も支援技術に提供できる
- aria-live属性値assertive：即座に更新を通知すべき重要度の高い情報
- ↑フォームの必須項目に何も入れないとエラーが出る時など。
tabindex属性
- インタラクティブなオブジェクトはすべてフォーカス可能にしなければいけない
- 要素にフォーカスを与える属性としてtabindex属性をつかう
- HTML5ではすべての要素にtabindexの指定が可能（見出し、文章などにも指定できるようになった）
- tabindex：正の整数：tabキーの移動順序
- tabindex：0フォーカス可能（もともとフォーカス出来ない要素にもフォーカス可能になる）
- tabindex：-1フォーカス不可（もともとフォーカスできる要素にフォーカス不可能になる）
- ↑例えば、エラーチェックでエラーが出た時に読むだけで、フォーカスを当てる必要はない
CSSの属性セレクタでの利用について
- li[aria-chicked="true"] {〜}など
- CSS、JSの開発が楽になる？
- classを付与する必要がなくなるかも
JIS X 8341-3 : 2016 との関係
ウェブアクセシビリティの4つの原則
- 知覚可能：Javascriptによる更新内容も知ることができ、
- 操作可能：インタラクティブな要素も全て操作ができ、
- 理解可能：要素だけでは伝わらない要素も追加でき
- 堅牢性：名前や役割はプログラムが解釈できる WAI-ARIAは密接につながっている WCAG2.0の日本語訳が今月中に翻訳ができる？
サポート状況
- WAICのサイトに載っている、AS情報（http://waic.jp/docs/as/）
- Can I Useで調べられる
- 日本ではPC Talkerが一番のシェア
まとめ
- 大切なのはセマンティクス
- 要素の意味
- 適切な要素が使えない時にWAI-ARIA
ワークショップ
タブ
アコーディオン
http://jsdo.it/milk55/accordion/
新着情報
http://jsdo.it/milk55/whats-new/
参考リンク
NVDA
PC Talkerと併用している人も多い
https://www.nvda.jp/
Apple Voice Over
Command + F5で起動の切り替え
http://help.apple.com/voiceover/info/guide/10.8/ja.lproj/_1198.html
http://website-usability.info/2010/11/entry_101123.html
Windows10 ナレーター
win10標準搭載の読み上げ
https://support.microsoft.com/ja-jp/help/17173/windows-10-hear-text-read-aloud
懇親会
引き続き、会場内で行われました。
みなさんで、買い出しに。
講師の澤田さんとは、がっつりとお話ができました！
ありがとうございます。
その後、二次会へ。
澤田さんは、そのまま岡山へおかえりになられました。
次の勉強会は、FRONTEND CONFERENCE 2017。
アクセシビリティについてLTします（予定）。
内容考えなー。（再
おわり。
