先日、知り合いのSOHOから「新しいサイトを作ったのでW3C HTML 4.01 Validのバナーをはりたい。手を加えて欲しい。」とメールがあった。Dreamweaverで制作したテーブルレイアウトのサイトだった。ちょっと修正すればW3C 4.01 Validをもらうことは簡単に出来るけれども、文書構造としては一切成り立っていない。
当然、テーブルレイアウトの問題も絡んでくる。XHTML+CSSだがテーブルレイアウトを採用しているケース、つまり「ハイブリッドレイアウト」も書式上のエラーではなく使い方のエラーである。決められたボキャブラリと書式を守っていても、使い方が間違っていることになる。
「簡単だから自分でやりなさい」と・・・
正しくないものに手を貸すことは出来ません。
もうける.net Vol.1（毎日コミニュケーションズ）に、アットスタイルが制作した【真宗 紫雲山 正覚寺】を「CSSを使用したサイト」として紹介記事が掲載されました。
11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。
デザインだけでなく機能の向上にも役立つCSS
福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。
デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。
ナビゲーションとスペーサー画像にトラックバックをいただきました。
『透明spacer.gifをアンカーに』は、使用方法を間違えると問題ありのようです。
有限会社ユニバーサルワークスさんのコラムが紹介されていた。こちらのサイトは、以前、別のBlogでも紹介している。
第29回 自治体サイトWebアクセシビリティ調査2005を終えて（上）（2005年9月1日掲載）では、さすが清家さんと思うところがある。
もうひとつ、特殊な発展形としては、上記の読み飛ばしリンクが透明gifであることに有頂天になった制作者が、この小手先のテクニックを駆使して、トップページ全体に不可視のナビゲーションを付けまくるタイプがある。うっとうしさ満点。それやるなら、先に見出しの要素を付けとけよと言いたい。
見出しやリストなどの適切な文書構造があってこそアクセシビリティです。
ひとつ勘違いしていたのは･･･
私：ページの一番上（読み上げの最初）に置くのはやめてね。
制作：どうして？
私：ページに入ってすぐエンターキーを押せというのは酷ではないか！やってみな。
制作：なるほど。
私：いちいちシフト＋Tabで戻らないといけないわけよ、もううんざり。タイトルタグの直後は聴き逃しやすいし、そうそう、音声ブラウザのデフォルトではタイトルタグはそのページに入ったとき1回しか読み上げないから、ページの一番上にはもう1回ページ見出しを書いておいてもらえるとうれしいね。
h1の後にスキップを設置しました。それでは、h1には何が適切なのでしょうか。<h1>要素の扱い | Web標準Blogで質問が掲載されていました。
構造的にマークアップを進めていく場合、<h1>で括るのにふさわしいものとして「a.サイト共通のタイトルや企業名称」と「b.そのページのユニークなタイトル」のうち、どちらがより適切でしょうか。
ところで、MovableTypeのh1はデフォルトではサイトのタイトルとなっています。（このBlogもphpによりincludeしていますのでサイトのタイトルです。）改善の必要がありそうですね。
一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:none を指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。
一般的な音声ブラウザだと思われているホームページ・リーダー3.01はdisplay:noneを全く読み上げないので、ラベルの存在がわからない。（3.04は未確認）
そうなると読み飛ばしリンクにも使用できない。position: absoluteが現実的な手段のようです。
先日のエントリー【MovableTypeの小技（微技）】において、以下のようなご指摘をいただきました。
スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか？
ナビゲーション読み飛ばしリンクや適切な見出しが無い場合など、リンク及びアンカーとしてもよく使う手段です。
アクセシビリティの解説サイト Webアクセシビリティのポータルサイト『Infoaxia（インフォアクシア）』 でもナビゲーション読み飛ばしリンクとして使用されています。
<a href="#contents_start"><img src="/shared/images/spacer.gif" width="1" height="1" alt="メインメニューをとばして、このページの本文へ" class="skip_link" /></a><a id="menu" accesskey="1" name="menu"><img src="/shared/images/spacer.gif" width="1" height="1" alt="ここからメニューです。" class="navigation_menu" /></a>
このように何も意味を持たない画像に高い意味を持つ代替（等価）テキストを付加すとことが必要です。
勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。
やっと、MovableType 3.2 Base Weblogテンプレートの解析に取り掛かった。スタイルシートにはWin IEやMac IEにも対応させるような小技が見られますが、かなりひどい出来です。NucleusのDefaultスキンのほうがよっぽどよい。
今まで通りのトップページのみ2カラムですが、サイドバーにはブロックを作り、装飾を加えている。こんなものは望まない。posted回りも複雑になっている。
シンプルで手の加えやすいものが最善ではないのか？
文字サイズは、全て固定されている。IEなどの一部のブラウザで文字サイズを変更できないのではアクセシビリティ ガイドラインから大きく外れ、時代に逆行している。
この状態から作り直すと大変。
今までのテンプレートを修正する方向で行きます。
アクセシビリティを考えてみると、全てはここに行き着く。
Web Content Accessibility Guidelines 2.0
全般的な目標は、現在そして将来にわたって、想定しうる最も広範囲な利用者にとって認知、操作および理解可能であり、なおかつ利用者が使用している様々な支援技術と互換性のあるWebコンテンツを制作することである。基本的原則は以下の通りです。
- コンテンツは認知可能であること
- コンテンツのインターフェイス要素は操作可能であること
- コンテンツの内容およびコントロールは理解可能であること
- コンテンツは現在および将来のテクノロジーで利用できるよう十分に互換性が確保されていること
「あなたのためとわたしのため」主語の使いかたに見る日本人のアクセシビリティ理解度 | ミツエーリンクス
大切なのは、「あなた」も「わたし」も含め、「誰にとっても」使いやすくすることを考えることなのです。冒頭のように、「あなたたちにとって」という考えかたがある限り、JIS準拠だのアクセシビリティ配慮だの言ったところで、健常者と障害者の距離はなかなか縮まらないでしょう。アクセシビリティは、バリアフリーとも言いますが、バリアを取り除くこと、つまり排他的な第三者の視点ではなく、同じ視点で捉えようとする努力が必要になります。日本でのアクセシビリティに対する取り組みを、表面的なもので終わらせないためにも、たまには意識して主語を考えてみるのもいいかもしれません。
【利用者の気持ちでだれもが使いやすいサイトを】 YOMIURI ON LINE インタビュー記事（2月8日掲載）
高齢者や障害者の方が使いやすいものは、だれにとっても使いやすいはずで、結局は皆が恩恵を受けられると思います。電話のプッシュホンだって、元々はダイヤルを回しづらい人のために考えられたのが、今や当たり前になっています。エスカレーターやエレベーターの設置も同じで、障害がない人でも、重い荷物を持って階段を上り下りするのが大変なときに、あってよかった、と思うでしょう。
最近、長時間ディスプレーを見ていると目が疲れる・・・
長らくWeb業界は、ブラウザできれいに表示できればそれでよい、という誤った認識に縛られてきた事実があります。ただ表示するためのみを目指した “正しくない”手法に基づいたソースコードが氾濫した結果、高齢者や障害者など社会的に弱い立場にあるユーザーに対して不自由を強いるなど、弊害が生じていました。しかし、見ばえを偏重するWebデザインの時代は、もはや過去のものです。
この様に制作コンセプトに記しているので、リキッドデザインに変更して文字の大きさを変えたついでに、このブログとWebサイトもaDesignerで検証してみました。
ページの先頭に読み飛ばしリンク、さらにナビゲーションバーにも読み飛ばしリンクを設置。GUIでの見た目はそのままで、非常に良いと結果が出ました。
ただひとつ気になるのが、スタイルシートのdisplay:noneの記述。
検索エンジンスパムとならなければ良いのですが。
GUIでの見た目はよくありません。
スタイルシートを切ってみるとよくわかるのですが、h1にすぐ下にナビゲーションリンクを設定して、それぞれのエリアへスムーズに移動できるようにしました。
通常はWebInspectorのみのアクセシビリティの検証ですが、aDesignerの非常に厳しいチェックを行い、合格いたしました。音声ブラウザでも十分読み取れるページ構成となっています。
公共性の強いサイト・利用者の年齢層が高いサイトなどにご利用いただきたいと思います。
アクセスビリティの高い Web ページの提案
＊現在、該当ページは公開されていません。
私の個人的なBlogが参考URLとして紹介されていました。私のところはあまり参考にならないのですが、この文書はWebサイトのアクセスビリティについて非常にわかりやすく解説してありますので、ぜひお読みになることをお勧めいたします。