マークアップを進化させる WAI-ARIA の基本

: @masuP9 : WCAN 2020 Frontend Special

私

@masuP9のプロフィール画像、アフロ、ヒゲのイラスト @masuP9のプロフィール写真、アフロ、スーツ、ネクタイ @masuP9

目次

  1. WAI-ARIAとは何か
  2. WAI-ARIAはなぜ必要か
  3. WAI-ARIAは何ができるか
  4. WAI-ARIAをどう使うか
  5. WAI-ARIAをどう学ぶか

WAI-ARIAとは何か

WAI
Web  Accessibility  Initiative 
ARIA
Accessible  Rich  Internet  Applications 

WAI-ARIAは、ウェブコンテンツおよび
アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。

Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳

WAI-ARIAは
ウェブのアクセシビリティを
高めるための技術仕様

WAI-ARIAはなぜ必要か

アプリケーション化するウェブ

  • Notion
  • Figma
  • G Suite
  • 3D CAD

etc...

意味も振る舞いも
既存のHTMLでは表現できなくなってきた

例えば

  • タブUI
  • 開いている / 閉じている
  • 現在地である
  • 離れた要素間の関係性

HTMLの要素は増やすのに時間がかかる

HTMLはセマンティクス、DOM Node、UA StyleSheetのフルセット

WAI-ARIAはセマンティクスを属性で補完する

<tab>Tab</tab>
<div role="tab">Tab</div>

WAI-ARIAはアプリケーション化する
ウェブにおいて、ホスト言語（HTMLなど）に
不足しているセマンティクスを属性で補完する

注意

HTMLにあるセマンティクスはHTMLで

所定の機能に対するネイティヴセマンティックスが使用可能になる場合、著者は、ネイティヴ機能を使用し、その機能のWAI-ARIAの使用を中止することが適切である。

Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳

WAI-ARIAは何ができるか

セマンティクスを補完する

WAI-ARIAは何を補完できるか

  • 役割 : role
  • 状態 : aria-*
  • プロパティ : aria-*
<ul role="tree" aria-label="menu tree">
  <li role="treeitem" aria-selected="true">...</li>
  <li role="treeitem" aria-selected="false">...</li>
</ul>

役割: role

<ul role="tree"></ul>

これはツリーウィジェットである

状態: ステート

<li aria-selected="true" role="treeitem" >...</li>

このツリーアイテムは選択されている（いない）

プロパティ

<ul aria-label="menu tree" role="tree"></ul>

このツリーウィジェットの名前プロパティはmenu treeである

これらの付与されたセマンティクスはどのようにユーザー（支援技術）に伝わるか

ブラウザがセマンティクスを支援技術に伝えるまで
［デモ: PC-Talker］現在のページには aria-current="page" 【AccessiブルGoGo! #20】

これまでの流れを逆から

  1. 辻さんに現在地を示す要素を伝えたい
  2. HTMLには現在地を示すセマンティクスがない
  3. HTMLで新しくセマンティクスを作るのは大変
  4. セマンティクスを補完する仕様 - WAI-ARIA

WAI-ARIAとホスト言語の相互進化

WAI-ARIAが補完していたセマンティクスをホスト言語が取り込んでいく

WAI-ARIAとホスト言語は共に進化するが進化の速度は異なる

一旦まとめ

  • WAI-ARIAはアクセシビリティ向上のためにマークアップ言語のセマンティクスを補完するための仕様
  • WAI-ARIAが補完できるのは、役割、状態、プロパティ
  • WAI-ARIAが補完したセマンティクスはアクセシビリティAPIを通じて支援技術に伝わる

WAI-ARIAをどう使うか

HTMLではセマンティクスが足りないとき

Live region / ライブリージョン

<div role="alert">
  {error && <strong>{error.text}</strong>}
</div>
ARIA Live Region - Role="Alert"
  • 自動更新される値
  • バリデーションエラー
  • トーストUIなどの通知

<output>は暗黙の status roleを持つ

aria-expanded

要素が展開されているかどうか

<section aria-expanded="false">
  <h2>Q. How to use WAI-ARIA?</h2>
  <button>Open</button>
  <div aria-hidden="true">...</div>
</section>
Don't 
<section>
  <h2>Q. How to use WAI-ARIA?</h2>
  <button aria-expanded="false">Open</button>
  <div aria-hidden="true">...</div>
</section>

buttonにつける場合はaria-controlsとあわせて

aria-label

名前をラベリングする

inline SVG icon
<svg role="img" aria-label="OK" viewBox="0 0 20 20">
  <circle cx="10" cy="10" r="10" stroke="black" />
</svg>
masuP.netのトップページでiOSのアクセシビリティ機能であるVoiceControlを使用しているスクリーンショット。クリッカブルな要素の名前がポップアップで示されており、masuP.netのロゴにMasuP.netとポップアップされているのが強調されている
iOS Voice Control

WAI-ARIAのデバッグ

ブラウザの開発者ツール

  • DOMの属性を目視
  • ブラウザが計算したAccessibility Objectが見れる

スタイルと密結合させる

[aria-hidden="true"] { display: none }

CSS設計と要相談

テストツール

ｍarkuplintに期待

スクリーンリーダーを使う

自分はスクリーンリーダーの操作が不慣れなことに注意

WAI-ARIAをどう学ぶか

仕様

リンクは2020/11/10時点でのLatest published version

more...

その他WAI公式文書

書籍

いずれもボーンデジタル岡本さん編集リンクはAmazon（アフィリエイト）

質問場所

A11YJ Slack - #q_and_a or #beginner or #aria_study

Join us

ありがとうございました