まだ勉強中なり２ - kenmituoの日記

まだ勉強中なりで勉強してみたら著者不明の文書の著者さんのコメントでHTML5の考え方が甘いことがよく分かった。
　
よくあるのはWAI-ARIAを想定していない、健常者しかターゲットにしていないイケてないレイアウト、自分もそうしてきたので反省。

※よくある健常者しかターゲットにしていないイケてない例
<body>
  <div id="wrapper">
    <div id="header" />
    <div id="sidemenu" />
    <div id="main" />
    <div id="footer" />
  </div>
</body>

　
頂いたコメントを元に考える。

※頂いたコメント
こんにちは。蛇足ながら、おそらく大部分の人が求めているものはこんな感じだと思います。

<body role="document">
　<div role="banner" />
　<div role="nav" />
　<div role="main" />
　<div role="note" />
　<div role="contentinfo" />
</body>

「HTML4＋WAI-ARIAで画面分割（ランドロール）を定義した場合」を想定している。これをHTML5＋WAI-ARIAな実装を目指すなり。
　
HTML5を考える前に、WAI-ARAを考える。

WAI-ARIAってなんじゃ？

Web Accessibility Initiative-Accessible Rich Internet Applicationsの略でWAI-ARIA(ウェイアリア)ってやつ。
株式会社ミツエーリンクス　木達一仁さんのスライドを見ると納得できる。
　
教科書はWAI-ARIA　バージョン 1.0 W3Cワーキングドラフト　2009年2月24日版、これドラフトとかいてあるけれど気にしない。
　

コメントのHTML4を読み解く

「role」を見れば「そのまんま」な感じがしますが、キチンと読み解きます。

<body role="document">
　<div role="banner" />
　<div role="nav" />
　<div role="main" />
　<div role="note" />
　<div role="contentinfo" />
</body>

document：文書構造

document （ロール（role））
関連する情報を含み、ウェブのapplicationではなく、文書コンテンツとして宣言されているリージョン。
documentのロール（role）は、文書リージョン内のどのようなコンテンツも閲覧できるようにするために、ブラウザのキーボードサポートを補足する必要があるユーザーエージェントに対して、文書であることを告知する役目を果たす。対照的に、applicationのロール（role）を持ったリージョンでは、すべてのテキストがフォーカス可能な要素にセマンティクス的に関連付けられているべきでなので、スクリーンリーダーのユーザーが、role="application"を持ったリージョン内のテキストを読む際には、付加的なコマンドが必要とはならない。文書の重要な特徴としては、ウィジェットあるいはグループに関連付けられていないテキストを伴っていることが挙げられる。
開発者は、文書全体にわたる要素に対して、documentのロール（role）を設定すべきである。documentのロール（role）がウェブページ全体に適用されるのであれば、コンテンツのルートノード上で設定すべきである。ルートノードとは、HTMLのbody要素やSVGのsvg要素を指す。

HTMLの「body」は文章コンテンツとしての宣言では無いので別要素で文章コンテンツと宣言する必要がある。
「id="wrapper"でいいじゃん！」と言われそうだけど、それは「ひとまとまり」としているHTML4の方言だということにします。
　

banner：ランドマークのロール（role）

banner （ロール（role））
大見出し（標題）またはウェブサイトのタイトルを含むリージョン。
ほとんどのバナーコンテンツは、特定ページではなくサイト全体を通じて使われている。サイト全体を通じて使われているコンテンツの典型的な例としては、サイトスポンサーのロゴ、ページのメインの見出し、サイト独自の検索ツールなどがある。通常は、ページの上部に、左右幅をいっぱいに使って表示される。
documentおよびapplication内では、bannerのロール（role）を割り当てる要素を1つだけにすべきである。

よくやるdiv id="header"、これをdiv role="banner"に置き換えるだけで幸せ度があがる。

navigation：ランドマークのロール（role）

navigation （ロール（role））
文書または関連する文書をナビゲートするためのナビゲーション要素（通常はリンク）の集合。

パンくずとかもnavになる。あまり深い考察できていないな、、、

main：ランドマークのロール（role）

main （ロール（role））
文書内のメインのコンテンツ。
文書の中心的なトピックに直接関連したコンテンツ、またはそのトピックに基づいて展開するコンテンツをマークする。mainのロール（role）は、「メインのコンテンツにスキップする」のリンクに対する邪魔にならない代替物で、メインのコンテンツ（または他のランドマーク）に進むナビゲーションのオプションは、ダイアログを介してユーザーエージェントによって、または支援技術によって提供される。
documentおよびapplication内では、mainのロール（role）を割り当てる要素を1つだけにすべきである。

　
「一番伝えたい文章」ということ、この部分だけ切り取って文章として成り立つこと。
実際には余計に感じるナビゲーションとか広告とかを含む事になると思う。それはそれでroleを指定するべきなんだろうけど。

note：文書構造

note （ロール（role））
そのリソースのメインのコンテンツに対して挿入的または付随的なコンテンツのセクション。

「挿入的」とあるのでなんとなく「role=mainに含まれるべきなんじゃないか」と考えてしまうけど、付随的なところが強いと思う。
　

contentinfo：ランドマークのロール

contentinfo （ロール（role））
親の文書に適用されるメタデータ。
例えば、脚注、著作権の記載、プライバシーポリシーへのリンクが、これに当てはまる。

完全にid="footer"な部分、これもbannerと同じでなじみやすい。
　
長くなったけど「HTML4のid」を「WAI-ARIAのrole」に置き換えて考えるだけなので大変じゃない。

実際にページ作成するときはCSSとかJavaScriptとかも考える必要があるから、こんな感じで作ることになる。こんだけ頑張って解釈しているのはHTML4＋WAI-ARIAなところが注意点だったりする。

<body id="document" role="document">
　<div id="banner" role="banner" />
　<div id="nav" role="nav" />
　<div id="manin" role="main" />
　<div id="note" role="note" />
　<div id="contentinfo" role="contentinfo" />
</body>

たったこれだけで「アクセシビリティ、ちょー真剣に取り組んでいます！」と言える。言っていいのか？たぶん俺なら言っちゃう。
実装するにはWAI-ARIAベストプラクティスを読む必要あり。
　

HTML5にしてみる

これを HTML5 のセクションに反映させつつ書くなら、例えばこんな感じになるでしょう。

<body role="application">
　<article role="document">
　　<header role="banner">
　　　<h1>...</h1>
　　　<nav role="navigation">
　　　　<h2>...<h2>
　　　</nav>
　　</header>
　　<section role="main">
　　　<h2>...</h2>
　　</section>
　　<div role="note">
　　　....
　　</div>
　　<footer role="contentinfo">
　　　...
　　</fotter>
　</article>
</body>

section、article、nav などが必ず見出しを伴っていること、見出しを伴いそうにない部分は div のままであることに着目して下さい（ここでは敢えて aside を使いません、文書と無関係な広告が置かれる可能性が高いからです）。

nav は暗黙に role="navigation" を持っているので、明示的に書かなくても構いません。header、footer は暗黙の @role を持ちませんが、@role を指定する場合はそれぞれ "banner"、"contentinfo" でなければならない、と定められています。つまり、HTML5 要素のオリジナルの意味に反する @role を指定することはできません。

最外の article は「ひとまとまりの文書」であることを示し、いわゆる "wrapper" の役割を担えます。しかし "wrapper" なんていかにも苦し紛れの名前より、ずっとマシでしょう。

このような画面分割（ランドマークロール）と、HTML5 セクションとを区別して下さい。HTML5 セクションはかなり自由ですし、ちゃんと使えば両者の共存も可能です。

長文失礼しました。

application：ランドマークのロール

application （ロール（role））
ウェブのdocumentではなく、アプリケーションとして宣言されたリージョン。
このロール（role）の目的は、通常の閲覧モード機能からアプリケーションモードの機能に切り替えるよう、支援技術に対して伝えることにある。ユーザーエージェントは、閲覧ナビゲーションモードでは、上下矢印などのキーを文書の閲覧目的で使っている。このネイティブの動作によって、ウェブアプリケーションによるこれらのキーの使用は阻まれる。
開発者は、アプリケーション全体にわたる要素に対してapplicationのロール（role）を設定すべきである。applicationのロール（role）がウェブページ全体に適用されるのであれば、コンテンツのルートノード上で設定すべきである。ルートノードとは、HTMLのbody要素やSVGのsvg要素を指す。

application「閲覧モード機能からアプリケーションモードの機能に切り替える」
document「ブラウザのキーボードサポートを補足する必要があるユーザーエージェントに対して、文書であることを告知する役目を果たす」
application＞documentと入れ子にしてから、roleのいろんな部門（セクション）を並べる。

　
もう、これはお約束として考えていいのか？真理なのか？指定するならば対義語とか他の選択肢とかあったりしないのか？…真理、いや定説としよう。
　

HTML5の新タグにするところ、しないところ

section、article、nav などが必ず見出しを伴っていること、見出しを伴いそうにない部分は div のままであることに着目して下さい（ここでは敢えて aside を使いません、文書と無関係な広告が置かれる可能性が高いからです）。

例で見出し（h1〜h6）を伴わないのは「div role="note"」注釈扱いの部分だけ。注釈に見出って、、、無い・・・かな？（今までのデザイン目的のH1〜H6を使うことと区別できていない俺）
定義リスト的なイメージ

注釈
※1　hoge：宇宙の中心である
※2　piyo：響子さんのエプロンについている鳥

あ、これならDL、DT、DDでまかなえる。見出は必要なし。
　

かならずペアにするrole

nav は暗黙に role="navigation" を持っているので、明示的に書かなくても構いません。header、footer は暗黙の @role を持ちませんが、@role を指定する場合はそれぞれ "banner"、"contentinfo" でなければならない、と定められています。つまり、HTML5 要素のオリジナルの意味に反する @role を指定することはできません。

ということでペアもの２つ

<header role="banner" />
<footer role="contentinfo" />

実装するとき、headerは入れ子で何処かに発生するかもしれないのでidをつける。

<header id="banner" role="banner" />
<footer id="contentinfo" role="contentinfo" />

まだまだ途中・・・