セマンティクスの作り方、これまで、今、そして未来

https://www.youtube.com/watch?v=_eOPgxepC_w

今回のお話

広義のセマンティクスと今回のセマンティクス

ユーザーがブラウザを通してつかうときのhtmlについて

1. セマンティクスの恩恵

ウェブがよりアクセシブルになる

近寄りやすいこと

利用しやすいこと

2. HTML

宣言的にセマンティクスを定義

どこにいてもページが見られる

OS、ブラウザで閲覧できる

テキストのコピー・画像の保存ができる

HTML5のセマンティクス

HTML4.01の要素廃止と刷新

セクショニングの概念を導入

フレージング（平の文章）の強化・表現の可能

課題

要素名・タグに依存する（HTMLにないものは使えない）

セマンティクスの変更

DOMツリーの変更

状態・プロパティの欠如

hidden

非同期通信で画面が変わるSPAなどでは難しい

新たなる進化

HTML5.2で勧告済み

JS制御、ChromeとOperaのみ

副次的な見出し、キャッチコピーなどを含める

アウトラインを構築しなくなる

そのほか

Microdata

パンくずリスト

俯瞰したものを提供する

検索結果でしかでない

特徴

属性によってセマンティクスを付与

role

役割や状態、プロパティがもてる

aria-*

HTMLにあるものはHTMLで書こう

https://gyazo.com/6230b75cd20904d9ecb38922f1b40b4c

セマンティクスな要素をアクセシビリティAPIのオブジェクトに変換して伝える

課題

セマンティクスがDOMに依存

DOMノード(要素)がないUIに関与できない

関係属性から要素を参照する場合、要素に識別用のidが必要

アクセシビリティツリーに影響を及ぼすが、結果どうなったかを確認できない

4. Accessibility Object Model

アクセシビリティAPIに変換されうるセマンティクスをモデルとして定義しJavaScriptから操作・探索可能にしたもの

IDLインターフェースからARIA属性を反映する

code:aom.js

const tree = document.createElement('ul');

tree.role = 'tree';

tree.ariaLabel = 'menu tree';

Out-of-date syntax

tree.accessibleNode.role = "tree";

tree.accessibleNode.label = "menu tree";

DOMに反映されないARIAを付与する

これを

const desc = document.querySelectorAll('.tree-desc');

tree.ariaDescribedBy = [...desc].map(el => el.id).join(' ');

こうする

const desc = document.querySelectorAll('.tree-desc');

tree.ariaDescribedByElements = [...desc];

ユースケース

shadow Root問題

支援技術のイベントをDOMにルーティング

支援技術がアクセシビリティノード上でアクセシビリティパフォームプレスを実行すると

ブラウザがクリックイベントに変換している

Virtal Accessibility Node

Query Computed Accessibility Tree

アクセシビリティツリーの自動テスト

ブラウザ拡張機能による支援技術