ウェブを作る以上は、どんな環境でも読めるように作らなければなりません。
ここでは、環境を問わずに読める文書作りにおいて、意外に論じられない文章面での問題を書いてみます。
アクセシビリティとは、如何なる環境でも適切に文書から情報を得られる度合いと言う事です。
アクセシビリティが低いウェブは、制作している側が想定していない環境では適切に情報を得られなくなります。
ところで、アクセシビリティと言えば、多くの場合障碍者が用いるネット環境でも適切にアクセスでき、情報を取得できか否かが問題になりますが、アクセシビリティはいわゆる"バリアフリー"ばかりではありません。
例えば、健常者でも、以下のような状況でアクセスを阻害される事があります。
こう言った状況において、アクセスできなくなったり、アクセスが難しくなるような文書はアクセシビリティが高い
とは言えません。
良く誤解される事に、CSSを用いればアクセシビリティが向上する
と言うのがあります。
しかし、それはウソとまでは言いませんが、勘違いではあります。
確かに、CSSが推奨されている理由の一つに、HTML文書中に表示方法のみを指定する"物理タグ"を埋込んで行くやり方ではアクセシビリティが大きく損なわれる
と言うのがあります。
しかし、CSSを用いても旧来の物理要素多用HTML文書並にアクセシビリティの低いウェブ、いや物理要素多用HTML文書よりアクセシビリティの無いウェブを作る事も出来ます。
CSSに対応した環境で無ければ正しく情報が伝わらないようなウェブでは、アクセシビリティが高いとは言えません。
結局、HTML文書は、CSSを当てる前のプレーンな状態で適切な文書情報が得られるようにしておかなければ、アクセシビリティは確保できないのです。
そして、その為には、HTMLの文法を適切に活用する事は第一ですが、文章の作り方といった面でも論じられるべきものはあるでしょう。
以下、CSSが無くても問題無く内容を理解できる文章の書き方を考えてみます。
例文や、記述例などを文書中に記述する場合は要注意です。
恐らく、制作する側はサンプルを特別なクラスでスタイル付けする事でしょう。
しかし、CSSに対応していない環境があることは決して忘れてはいけません。
例えば、以下のようにマークアップしたとします。
<p>ページ全体に掛かる見出しは、<h1>要素でマークアップします。</p><pre><code><h1>○○のウェブサイト。</h1></code></pre>
一行目は<h1>要素に関する説明文で、二行目以降は実際の<h1>要素の記述方法を例として示したものです。
この場合、<pre>要素には、適切なスタイル(他の段落より余白を取っている，枠線が付けられている，背景の色が周りと異なるようにしている…など)が設定されている事でしょう。
しかし、CSSをサポートしない環境では、恐らく、このように出力される事でしょう。
ページ全体に掛かる見出しは、<h1>要素でマークアップします。 <h1>○○のウェブサイト。</h1>
ちょっと分かり難いですよね。「ページ全体に掛かる見出しは、<h1>要素でマークアップします。」と表示した後にいきなり話しの流れと無関係なフレーズが並ぶ訳ですから。
こういう場合は、サンプルを示す前に、サンプルが続く事を明記すればいいでしょう。
例えば、以下のようにすれば良いでしょう。
<p>ページ全体に掛かる見出しは、<h1>要素でマークアップします。</p><p>具体的には、以下のように記述します。</p><pre><code><h1>○○のウェブサイト。</h1></code></pre>
という一行を追加しただけで、CSS非対応環境でも、以下のように出力されて分かり易くなります。
ページ全体に掛かる見出しは、<h1>要素でマークアップします。 具体的には、以下のように記述します。 <h1>○○のウェブサイト。</h1>
仕様上、引用に関しては、<blockquote>要素で引用文全体をマークアップする事で明示できます。
当然、ブラウザなどユーザエージェントは<blockquote>要素に関して、適切なスタイル処理を求められる…と考えられます。
しかしながら、<blockquote>要素に関しては、誤った用途に用いられている場合が多い事もあって、以下のような仕様が求められております。
単なる字下げテキストの機構としてBLOCKQUOTEを用いてきた著者もいるため、そのような著者の意図を守るため、ユーザエージェントは、デフォルトのスタイルとしては引用符を挿入しない必要がある。
つまり、音声ブラウザで言えばデフォルトで「以下、引用です」と言った"引用符"を付けては行けないと解釈できます。
音声ブラウザなどが引用に関する符号を付けられない可能性があるとなると、引用文をいきなり出した場合に、文書の前後関係が分からなくなる恐れがあります。
結局、<blockquote>要素に対するスタイル処理を当てにしない文章作りが求められると言えます。
例えば、<blockquote>要素を始める前に、「<p><cite>○○</cite>には、以下のように書かれています。</p>」とか「<p>以下、<cite>○○</cite>からの引用です。</p>」などと書いておいた方がいいと思われます。
まず、余白やら空行やらの虚飾が一切無い状態で、意味が通じるかを検討してみて下さい。
いや、極論すれば、HTMLの論理要素タグさえも、虚飾といえます。
とにかく、プレーンなテキストで意味が通じ難い箇所が無いことを確めましょう。
また、リンクスなどの文字表示しか出来ないブラウザで確認してみるのもいいでしょう。この手のブラウザではCSSは無効ですので、CSSに頼りきった文書は意味が通じにくくなります。そして、意味が通じ難いと思ったら、文書そのものにアクセシビリティの問題があると考えられると言う訳です。
リンクスでのアクセシビリティチェックには、以下のサイトが詳しいです。
創作キャラクタを用いたイラストの一例とアニメーション動画
