HTMLとCSSを覚えてブログだってもっと自分らしく

ブログだって自分らしさを表現するためにいろいろとカスタマイズしたくなりますね。テンプレートなどあらかじめ用意されたデザインもありますが、やはり自分だけのレイアウトやデザインがほしくなります。

そんな時にHTMLやCSSを知っていると知らないでは大きな差が出てしまいます。無料のブログでもある程度カスタマイズできるところもあります。やはりそんな場合、差をつけるのはHTMLとCSSの知識の有る無しです。

カスタマイズする上でお願いしたいこと

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。

ウェブは、高齢者や障害者にとっても、重要な情報源になりつつあります。しかし、実際に提供されているウェブページにはバリアがあり、高齢者や障害者にとって使いにくい、あるいは使えない作りになっているために、内容を知ることさえできないことが少なくありません。

例えば、非常に小さい文字でたくさんの情報を提供しているウェブページは、弱視の人や多くの高齢者が判読できない場合があります。このようなウェブページを「アクセシビリティが確保されていないページ」と言います。

ウェブを利用する際に、なにが問題となるのか

ウェブの重要性が高まるにつれ、多くの高齢者や障害者がウェブを利用するようになりました。

ところが、高齢者や障害者がウェブを利用する時に、利用者の身体条件などによって、思ったように欲しい情報を取得できない、という問題が起こっていることは、これまであまり知られていませんでした。

特にハードルが高いのは、全盲や弱視といった視覚障害者です。視覚障害者は、文字で書かれたウェブサイトを、音声読み上げソフトと呼ばれる補助ソフトを使って、ウェブを"読んで"います。

音声読み上げソフトは、テキストデータを日本語で読み上げてくれるものです。ところが、画像で表現されたところは音声読み上げソフトでは、何が書かれているか判別することができず、読み上げてくれません。その部分は読み飛ばされてしまうのです。

みなさんがよく利用するウェブサイトを思い出してください。ウェブ中で大事な情報が、大きな画像で表現されているケースが多いことに気が付くと思います。

つまり、音声読み上げソフトを使って、ウェブを利用している視覚障害者は、画像で表現された大事な情報を知ることができないのです。画像に書かれた文字は認識しません

WCAG1.0における14のガイドライン

  1. 聞くための内容や見るための内容には、同等の役割を果たす代わりのものを提供する
  2. 色だけに依存しない
  3. 正しくタグ付けし、適切にスタイルシートを使う
  4. 自然言語の取り扱い方に関する情報を明確に示す
  5. うまく変換されるテーブルを作る
  6. 新しい技術を利用したページは、うまく変換されるようにしておく
  7. 時間とともに変化する内容については、ユーザーが制御できるようにする
  8. ページ中に組み込まれたもののユーザーインターフェイスは、それ自体がアクセシブルなものにする
  9. 装置に依存しないように設計する
  10. 暫定的な解決策をとる
  11. W3Cのテクノロジーとガイドラインを使用する
  12. 前後関係や位置を表す情報を提供する
  13. はっきりとわかるナビゲーションのための仕組を提供する
  14. 文書は明瞭で簡潔なものにする

(出所)大藤氏によるWCAG1.0の日本語訳(http://www.zspc.com/)より

WCAG1.0チェックポイントの優先度と適合度について

WCAG1.0では、14個のガイドラインごとに複数のチェックポイントが挙げられており、合計65個のチェックポイントがあります。それぞれのチェックポイントは、アクセシビリティに与える影響に基づく「優先度」が指定してあり、[優先度1]から[優先度3]までの3種類があります。

WCAG1.0の優先度
優先度 重要性 WCAG1.0での位置づけ
優先度1 高い コンテンツ制作者が満たさねばならない優先度
優先度2 やや高い コンテンツ制作者が満たすべき優先度
優先度3 やや低い コンテンツ制作者が満たすべき事を望まれる優先度

そのうえでWCAG1.0では、それぞれの優先度を満たしているコンテンツに対して、3段階の「適合度」を規定しています。

WCAG1.0での位置づけ
適合度 WCAG1.0での位置づけ
A 優先度1のすべてのチェックポイントに適合
ダブルA(AA) 優先度1と2のすべてのチェックポイントに適合
トリプルA(AAA) 優先度1~3のすべてのチェックポイントに適合

ウェブアクセシビリティ診断ツール

富士通アクセシビリティ・アシスタンスの紹介

インターネットなどの技術を基盤としたコミュニケーションや、 公共サービス等がますます快適に便利になってきています。

誰にも分かりやすく使いやすい、 そして親しみやすいサイトづくり・・・このユニバーサルデザインの思想を基本にデザイン活動のひとつとして、 視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群「Fujitsu Accessibility Assistance 」をホームページ作成担当者やデザイナーに向けて無償ダウンロードにて提供いたします。

Fujitsu Accessibility AssistanceはWebInspectorColorSelectorColorDoctorの3つのツール群で構成されています。