Modelセマンティクスの恩恵ウェブがよりアクセシブルになる。アクセシブルとは?近寄りやすいこと利用しやすいこと近寄りやすいこと、利用しやすいこと。アクセシブル、アクセシビリティの原義としてはこの二つですね。近寄りやすさとは物理的な話で、単に訪れやすさのことです。利用しやすさはそのまま、使いやすいさという解釈で良いです。IT分野ではユーザビリティの文脈で語られている話です。HTMLでは、HTMLのアクセシビリティはどうなのでしょうか。HTMLというだけで得られるアクセシビリティどこにいてもページが見られる様々なOS、ブラウザで閲覧できるテキストがコピーできる画像が保存できるまず忘れてはならないのは、HTMLというだけで「アクセシブル」だという事実です。ウェブページであればどこにいても閲覧可能ですよね。様々なOS、ブラウザで見ることができます。テキストがコピーできますよね。画像を保存することもできます。これが紙のチラシだったら、テレビの字幕だったら、そういったことはできません。可能になったetc...HTML5で新たに定義されたセマンティクスの大きなトピックは、HTML4.01時代の要素の廃止と刷新、セクショニングという概念の導入、フレージング、言うなれば平のテキストの意味づけの強化です。HTML5では物理要素が廃止され、論理要素主体になりました。セクショニングが導入され、情報はセクションごとに紐づけられるようになりました。セクション単位でヘッダー(前提)、フッター(補足)、ナビゲーションが定義できるようになったわけです。HTML4.01ではナビゲーションは「なんかリンクのリスト」という程度しか定義できなかったことから比べると目覚ましい進化ですよね。type="button">ボタン</button></section>HTMLのセマンティクスは宣言的に記述することで提供されます。要素でコンテンツを囲み、要素の書き順と入れ子で構造を作る。こっからここまでがリストだよ、この見出しの本文はここだよ、というセマンティクスが作られるわけですね。要素名(タグ)に依存するしかしHTMLにも、問題点と言ってもいいかもしれませんが、課題はあります。仕様で定義されている要素しかセマンティクスが得られない、ということです。同じコンテンツでもセマンティクスを変えたいとなったら、要素を変えなくてはいけませんね。要素が変わるとブラウザのデフォルトスタイルシートが変わりますね。それでも見た目をそのままにしたいとなると、ちょっと困っちゃうわけです。リセット的に書いていたスタイルが無駄になったり、さらに必要になったりしちゃうと。要素を変えつつビジュアルを保つのはCSS的にはかなりのコストです。先ほども申し上げた通り、HTMLにない要素はないのです。悪い意味でないんです。HTMLには状態を表現する力が非常に乏しいです。擬似クラスでかろうじて可能ですが、セマンティックかと言われるとうーん、ですね。非同期通信で画面が書き換わるアプリケーションなウェブサイトが広まり、現状のHTMLのネイティブセマンティクスでは足りなくなっているそしてそれらの要件は、昨今のアプリなウェブサイトでは必須の項目ですよね。非同期で画面が書き換わるようなウェブサイトでは特に状態の管理は絶対に必要です。HTMLも進化を続けるとはいえHTMLもいつまでの今のままではありません。id="agree">同意します</button></dialog>例えばdialog要素。これはモーダルなダイアログをネイティブで提供する要素です。dialog要素がアクティブになると、必ずページの最前面に表示されます。z-indexの霊峰から滑落事故を起こさなくて済みますね。53からはフラグ立てると利用可能。他は未対応dialog要素はHMTL5.2ですでに勧告済みです。HTML5.2て2017年の12/14に勧告されてるんですよ。ブラウザ対応はChromeとOperaのみです。Firefoxは53からフラグ立てれば利用可能ですが、63になった今でもフラグは必要です。EdgeとIE11はお察しです。副次的な見出し/キャッチコピー/スローガンをマークアップできる。<h2>〜マークアップは裏切らない〜</h2></hgroup><p>我々はJSフレームワークと戦い、マークアップ共和国を作りました。</p></section>hgroupという要素も紹介させてください。2つの見出し要素を中に持つことで、副次的な見出し、キャッチコピー、スローガンなどを示せる要素です。二番目の見出し要素はアウトラインを構築しなくなるW3Cからは削除されたもののWHATWGには仕様はあるIE11、Edge含む全てのブラウザで対応済み2つ目の見出し要素は、見出し要素なんだけどアウトラインを構築しません。これにより「見出しでも本文でもない、副次的なテキスト」が提供されます。W3Cでは削除されたんですが、WHATWGでは依然として仕様が残り続けていませす。W3Cでも復活すると思います。MDNのリンクを見ると、「あ〜〜こういうのやりたかった!」てなると思います。各種ブラウザはとっくに対応済みですから。見ぬ要素も追加される可能性は十分あるdialogやhgroupだけではなく、まだ見ぬ要素もきっとこれからHTMLに追加される可能性はいくらでもあります。HTML以外のセマンティクスと言えば?XHTMLMicrodataRDFSchema.orgetc...さて、HTML以外のセマンティクスはどうでしょうか。あるMicrodataで提供されたセマンティクスパンくずリスト(ページ階層情報)記事リスト(カテゴリトップから見て、そのカテゴリに属する記事ものの一覧)レビュー情報レシピ情報よくあるのはMicrodataでしょう。パンくず、記事リスト、レビューなどありますよね。確かに現在のHTMLにないセマンティクスを提供するが、これらはどちらかというとデータ構造を俯瞰したものを提供する力が強い。そのウェブページ上で利用するというよりは、外部ツール(検索エンジン)がパースしてそのウェブページの外で使われている。treeである関係のセマンティクスDOMツリーに依存しない関係性を定義できる。パスワード:パスワードは8文字以上必要です。id="description">パスワードは8文字以上必要です。支援技術が起こすイベントをDOMのイベントにルーティングしハンドリングすることができるようにする。onclick="alert('click!')">button</button>現状、支援技術のイベントをルーティングするにはDOMのイベントが足りない。Nodecanvasなどで作られたUIに対して仮想のアクセシビリティノードを付与する。Tree計算されたアクセシビリティツリーを確かめる。なく簡素なAPIへの提案へ以降パフォーマンスアクセシビリティツリー計算方法の標準化ARIAプロパティとAccessibleNodeプロパティの優先順位アクセシビリティツリーは、レンダリングツリーにARIAなどが反映されて計算される。計算済のアクセシビリティツリーを取得するには多くの計算が必要。古い記法による対応element.AccessibleNodeのみ存在まとめ。