より現実的なHTML5+WAI-ARIA

kenmituoの日記 > 2011-02-07 > より現実的なHTML5+WAI-ARIA

2006 | 02 | 03 | 04 | 05 | 06 | 07 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 |
2012 | 01 | 02 | 03 | 04 | 05 |

2011-02-07

■[html5]より現実的なHTML5+WAI-ARIA

過去二回の努力

自分が納得できるゴールは見つかっていないところに、プロジェクトは走りだす。このままじゃ泥船決定なので今まで以上にがんばる。

あたらしい情報

http://www.w3.org/TR/wai-aria/とレイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 - E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介というのを見た。

（余談：さいきんトラックバックって奴の使い方を忘れかけている人が多いと思う）

いきなり検証

E-riverstyle Vanguardさんのhttp://blog.e-riverstyle.com/2011/01/26/image/blog1101251.gifを念頭に始めます。

<body role="application">
<article role="document">
<header id="banner" role="banner">
ヘッダー
</header>
 
<nav id="globalnavi" role="navigation">
ぐろーばるなびげーしょん
</nav>
 
<section id="main" role="main">
<nav id="breadcrumbs" role="navigation">
パンくず
</nav>
メイン
</section>
 
<aside id="complementary" role="complementary">
サブメニュー
</aside>
 
<footer id="contentinfo" role="contentinfo">
フッター
</footer>

</article>
</body>

mainの所はsectionなのかdivなのか？ここにだけdivの登場はカッコ悪い感じがするのでsection採用！

idを使うのはCSSで使う予定のため。うーん完全なる入れ子構造になったら不要かもしれない。

bodyの他も考える

はじめてのHTML5　第1回『HTML5の基本の書き方を覚える』を参考にする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

//ここにうえの奴をいれる

</body>
</html>

html5resetをみると長い期間をかけてバージョンアップしているっぽい。2011/02/08の時点では1.6.1（2010/9/17）が最新になる。

あとはUTF8を意識すること。＞自分

スタイルシートの切り替え

SWITCH STYLESHEETS WITH JQUERYをつかう。使い方はスタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」を参考にする。

こんな感じのCSS構成にしてstyle.cssに全てに共通のcssを書く、それぞれ用のCSSを書く。desktopが規定値にする。

<link rel="stylesheet" href="common/css/style.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="common/css/style_desktop.css" title="style_desktop" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="common/css/style_mobile.css" title="style_mobile" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="common/css/style_print.css" title="style_print" type="text/css" media="screen" />

jQueryを使うので召喚魔法を書く

<!--Google AJAX Feed API  http://www.ajaxtower.jp/googleajaxfeed/ -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA9BHquyX5cAMhD7r3X1Y9UxQ-q_YF59VMleFrVRQvt1o_ZrnckBSrz0Xw-wzDsGENBEKcT55BU5g2aA"></script>

<script type="text/javascript">google.load("jquery", "1.4.2");</script>  
<script type="text/javascript" src="common/js/styleswitch.js"></script>

切り替えはheaderのなかに書く

<div id="css_view">
<ul>
<li class="label">Views:</li>
<li><a href="#" rel="style_desktop" class="styleswitch" title="Desktop Style">desktop</a></li>
<li><a href="#" rel="style_mobile" class="styleswitch" title="Mobile Style">mobile</a></li>
<li><a href="#" rel="style_print" class="styleswitch" title="Mobile Print">print</a></li>
</ul>
</div>

がったい

すべてをまとめてみた。だらだらになってしまったが後悔していない

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>

<!--りせっと-->
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />

<!--共通CSS-->
<link rel="stylesheet" href="common/css/style.css" type="text/css" media="screen" /> 
<!--個別CSS-->
<link rel="stylesheet" href="common/css/style_desktop.css" title="style_desktop" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="common/css/style_mobile.css" title="style_mobile" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="common/css/style_print.css" title="style_print" type="text/css" media="screen" />

<!--IE9未満対策-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--Google AJAX Feed API  http://www.ajaxtower.jp/googleajaxfeed/ -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA9BHquyX5cAMhD7r3X1Y9UxQ-q_YF59VMleFrVRQvt1o_ZrnckBSrz0Xw-wzDsGENBEKcT55BU5g2aA"></script>

<!--jquery召還魔法-->
<script type="text/javascript">google.load("jquery", "1.4.2");</script>  
<!--SWITCH STYLESHEETS WITH JQUERY召還-->
<script type="text/javascript" src="common/js/styleswitch.js"></script>



</head>
<body role="application">
<article role="document">
<header id="banner" role="banner">
ヘッダー

<!--スタイル切替-->
<div id="css_view">
<ul>
<li class="label">Views:</li>
<li><a href="#" rel="style_desktop" class="styleswitch" title="Desktop Style">desktop</a></li>
<li><a href="#" rel="style_mobile" class="styleswitch" title="Mobile Style">mobile</a></li>
<li><a href="#" rel="style_print" class="styleswitch" title="Mobile Print">print</a></li>
</ul>
</div>

</header>
 
<nav id="globalnavi" role="navigation">
ぐろーばるなびげーしょん
</nav>
 
<div id="container">
<section id="main" role="main">
<nav id="breadcrumbs" role="navigation">
パンくず
</nav>
メイン
</section>
</div> 

<aside id="complementary" role="complementary">
サブメニュー
</aside>
 
<footer id="contentinfo" role="contentinfo">
フッター
</footer>

</article>
</body>

</html>

リキッドレイアウトにしたいのでリキッドレイアウトの最大横幅を固定する-minmax.jsのCSSを参考にする

Permalink | コメント(2) | トラックバック(0) | 16:15

コメントを書く

tltg 2011/03/01 20:53 ご無沙汰しておりました。少し意地悪なことを書いてみますが、

・節の目次を示す（のであろう） nav は、その節の導入の一部と考えられますから、header に入れるべきではないでしょうか。
・aside は、消しても本筋に影響しないような補足節のことですが、「サブメニュー」はそういう種類のものでしょうか。「メニュー」ならむしろ nav ではないですか。

---
HTML5 のセクション要素の中で、意外に使い所が難しいのは nav だと私は思います。多くの人が次のように書いていますが、

<nav>
　<ul>...</ul>
</nav>

ほとんどの場合、以下で事足ります。いちいち見出しのない無名節を作る必要はありません。

<header>
　
　<ul role="directory">...</ul>
</header>

では、nav を使うべき場所とはどこか。nav は内外へのリンク集をまとめた節です。ならば、例えば Web サイトの入口としてのトップページは、それ全体が 1 個の nav になる、とも考えられます。

HTML5 の節構造は、文書のアウトラインを形成します……裏を返せば、それだけでしかありません。もし、HTML5 の節構造によって Web サイト全体を扉・前書き・目次・本文・後書き・宣伝のような一つの電子書籍にまとめられる、といったシロモノであったなら、もう少しやりがいがあったかもしれません。ですが今のところ、HTML5 の節構造がどういうものを目指しているのか、ちゃんとした意見調整がないように思います。ならば、もっと自由に節構造を考えても良いのではないですか。

私が aritcle、nav、aside について『やりたい人だけやれば良い』と書いたのは、そのためです。はっきり申し上げれば、いわゆる「テンプレート」として使うには、HTML5 の節構造は全く不向きだと思います。もちろん、そのような利用形態を考えてみるのは意義あることですが。

---
一方、WAI ARIA のリージョン・ランドマークロールの方は目的が明確です。キーボードによるナビゲーションをやりやすくすることです。

従来「トップに戻る」「本文へ」などのいわゆるスキップリンクを設けることがアクセシビリティを高める、とされてきました（例えば WCAG2: 2.4）。ですが正直な話、こんなのは文書に書くべきものではなく、「モダン」とされるブラウザのナビゲーション機能がいかに貧弱であるかの証左に過ぎません。

しかしそうも言ってられないので、WAI ARIA ではページを構成する区画に「目次（role="navigation"）」「本文（role="main"）」などの役割を当てて、これをナビゲーションの目印にすることにしました。そうすればページ制作者ごとにバラバラなスキップリンクなんぞなくとも、馴染みのあるブラウザの操作によって「目次へ飛ぶ」「本文へ」といった操作が可能になります（なれば良いな）。

ある区画がナビゲーションの目印にさえなれば良いのですから、これまで div で囲っていた区画をランドマークにすれば十分なのです。無理して HTML5 の節構造にマッピングする必要もないのですが、まあこれも『やりたい人はやれば良い』ということで。

こちらは比較的テンプレートと相性が良いと思います。まあ、程度問題ですが。

---
なお、application ロールの区画内では、カーソルキーを押すとアプリ用ボタン（あるいはタブ、ツリー項目）を移動したりするでしょう。一方、document ロールの区画内では、カーソルキーで内容をスクロールするでしょう。

このように、キーボード操作が切り替わることを伝えるのが application ロールと document ロールの役割です。「イディオム」や「定石」など、あまりそういう次元で考えない方が良いと思います。

kenmituo 2011/03/09 12:59 tltgさん、ありがとうございます<(__)>
>nav は、その節の導入の一部と考えられますから、header に入れるべき
たしかに、そのほうがスッキリとしますね。
もういちど検証してみます。

スパム対策のためのダミーです。もし見えても何も入力しないでください

画像認証

トラックバック - http://d.hatena.ne.jp/kenmituo/20110207/1297062935

リンク元

		2011/02
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28