D2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～
-
- いいね！16
安田 学 / TAM inc.
@Gaku0318
JISにある知覚可能、操作可能、理解可能、堅牢性の4つの原則にWAI-ARIAは関わってきている。 WAI-ARIAのブラウザのサポート情報は waic.jp/docs/as/ を参考にする。 #d2draft
2017-03-05 15:03:53
安田 学 / TAM inc.
@Gaku0318
CSSの属性セレクタでrole属性やaria-*属性が使えます。 aria-checked="true" is-*のような独自の名前ではないので、使いやすいかもしれません。 #d2draft
2017-03-05 14:59:10
安田 学 / TAM inc.
@Gaku0318
tabindex属性。インタラクティブなオブジェクトはフォーカスができて操作できる必要があります。 フォーカスを与えるためにtabindexを指定します。 tabindex="0"でフォーカスできる（順序はマークアップ順）。 #d2draft
2017-03-05 14:57:36
安田 学 / TAM inc.
@Gaku0318
ライブ領域属性。ユーザーのフォーカスが当たっていないけれど、更新されている状態を示す。 aria-live="asertive"を使うと、必須項目からフォーカスが外れ時に知らせる、ということができる。 #d2draft
2017-03-05 14:53:58
安田 学 / TAM inc.
@Gaku0318
aria-hidden属性を使うと見えているものを支援技術から隠すことができますが、 見える人と見えない人とで体験できるものが同等になるようにしておく。気軽に隠せばいいわけではない。 #d2draft
2017-03-05 14:49:42
安田 学 / TAM inc.
@Gaku0318
aria-*属性。オブジェクトの状態や性質を示す。何がどう変化したのか。5つに分類される。 関係属性は要素同士の関係を明確にする。文書構造に依存しない（離れた要素を関連付ける）。 #d2draft
2017-03-05 14:41:27
安田 学 / TAM inc.
@Gaku0318
menuとmenuitemを指定すると、ul要素をリストではなく、メニューとして認識して（読み上げたりして）くれるようになる。 #d2draft
2017-03-05 14:35:27
安田 学 / TAM inc.
@Gaku0318
ウィジェットロール。UIとして機能するウィジェットを示す。 示すだけなので、動作にはJavaScriptが必要です。 alertやmenu、tabなど。tabとtabpanelのように関連付けをする。 #d2draft
2017-03-05 14:32:37
安田 学 / TAM inc.
@Gaku0318
分署構造ロール。セマンティクス（意味）を定義する。 定義するだけなので、HTML要素のように見た目が変わるわけではありません。 presentationロールはセマンティクスを削除できる。ただレイアウトとして使いたい場合に指定します。 #d2draft
2017-03-05 14:28:03
安田 学 / TAM inc.
@Gaku0318
role属性は役割を定義、上書きする。4つの分類される。 ランドマークロールはUAや支援技術にページ内の主だったものを示す。 mainとかnavigationとか。HTML5にあるものは基本的に上書きする必要はありません。 #d2draft
2017-03-05 14:20:23
安田 学 / TAM inc.
@Gaku0318
role属性（82種類）、aria-`属性（67種類）、tabindex属性がある。 1.1になって、属性が増えている。非推奨になったものもある。1.1を読んでいきましょう。 #d2draft
2017-03-05 14:16:36
安田 学 / TAM inc.
@Gaku0318
HTMLは文書のために生まれた。JavaScriptやCSSはリッチになってきたけど、HTMLだけでは表現しきれないことが増えてきた。 そこでWAI-ARIA（ウェイアリア）の属性を指定する。 #d2draft
2017-03-05 14:11:53