前置き
htmlの属性には元々role(役割)というものがあり、それを拡張するものとしてWAI-ARIAというものが定義されている。
WAI-ARIA
アクセシブルでリッチなアプリケーション作成に関する仕様を定義する。ホスト言語に不足している要素を拡張する補助輪のようなもの
ホスト言語
SVGやマークアップ言語のこと
不足しているものって？
- 役割
- ステート
- プロパティ
どうやって拡張してるの？
JS（HTMLの取得）
↓
DOMツリーの生成
↓
アクセシビリティAPI（WAI-ARIAなど）
↓
支援技術（アクセシビリティAPIを使用できるアプリケーション）
例）Slack,Facebookなど
使い方
役割(role)
要素の役割を定義する
メニューに何があるのか・いくつあるのかなどを伝える
静的に使用する
ステート・プロパティ(aria)
要素sの状態を定義する
setattributeなどで開いている・閉じているなどを伝える
実装上の注意点
- 無理して使わない
- 元々のやり方（属性など）を変更しない（上書きしない）
- デフォルトのものとの暗黙の衝突を防ぐ
デバッグツール
- chrome-accesibility developer tool
- firefox-dom inspecter
- vin-viewer
- cssでセレクタを用いてスタイルを変更する
- dipslay-wai-aria
Micromedia
itemscopeでアイテムを作り、itemtypeで定義する
目的や環境に応じて仕様を参照し、拡張する
ここまでして、HTMLを拡張する意味は？
- リッチスニペット
リッチスニペット
Google検索を例にとって説明すると、
検索結果の中に存在する「食べ物のサイトにおける食べ物の画像」や
「サイト内検索ができる検索窓」、「商品の場合に存在するレビュー」などを表示する技術のこと
- AMPにも対応
AMP
Accelerated Mobile Pageのこと。
表示に時間がかかるページを（モバイルからに限るが、）高速に表示するために定義されたフォーマット。
- WebサイトをAPI化できる
どういうものなの？何が違うの？
- Microdata →HTMLの記法
- schema.org →語彙
- Google rich snipet →Googleのオリジナル仕様