本文へ


CMS-Geeklog.jpのアクセシビリティについて

  • 2008/05/07 21:59 JST

様々なCMSがアクセシビリティに配慮していく中、Geeklog.jpもアクセシビリティに配慮したプラグインやテーマがあり、今後もGeeklog.jpはアクセシブルになっていく兆しをみせております。

それは、Geeklog.jpの開発者の方々がアクセシビリティに興味をお持ちで、積極的にアクセシビリティに配慮するように取り組まれているからです。

では、アクセシビリティに配慮したGeeklog.jpのプラグインとテーマについて紹介したいと思います。

■アクセシビリティに配慮した サイトカレンダ mycaljp プラグイン

ブロック等に表示されるカレンダー機能は便利で見栄えもよくかかせないものです。
けれど、音声読み上げソフトで聞く場合、カレンダーを1日から31日までひたすら数字の読上げを聞かないといけません。
目で読み飛ばすのは1秒程度で出来ますが、ホームページリーダーの普通速度でカレンダー部分を1日から31日まで聞くのに40秒程度かかってしまいます。
 
実際に音声読み上げソフト利用者の方に意見を聞いてみたところ「カレンダーが読み飛ばせたら、かなり便利になる」とおっしゃってました。
SNSでも日記を書く場所に辿りつくまでにカレンダーを全部聞かないといけないので、
音声読み上げソフト利用者の方は、なかなか日記を書けないのが現状です。

そこで、Geeklog.jpでは、サイトカレンダをスキップできる機能を搭載した
サイトカレンダ mycaljp プラグインをdengenさんが開発され、2008年3月22日発表されました。

この機能により、多くの人がアクセスしやすいサイトが生まれると思っております。

※サイトカレンダ mycaljp プラグインは、アクセシビリティに配慮されているだけではなく多くの機能がありますが、ここではアクセシビリティについてのみ説明させていただきました。

■アクセシビリティに配慮したテーマWAIproCSS
Geeklogのテーマである「ProfessionalCSS」のデザインを元に、
音声でのネットサーフ(音声読み上げ)を考慮し、ヘッダ領域に含まれていた左ブロックをフッタ領域に移動させ記事(中央ブロック)を先読みするようにしています。
これによって、音声読み上げソフト利用者の方が、一番得たい情報をいち早く得る事ができるようになります。
表示(視覚上)は左ブロック→中央ブロックー右ブロックの順になるようCSSで設定しているので、
表示(視覚上)は「ProfessionalCSS」のデザインと同じ様な3カラムになっています。

音声でのネットサーフ(音声読み上げ)がしやすいように、音声で読み上げないようにする記述をしている部分がありますが、ホームページリーダー3.02では反映されません。
今後OS標準でスクリーンリーダー(画面読み上げ)が普及の兆しであるので記述してあります。

レイアウトのサイズ指定方法は、エラスティックレイアウト(em指定)を使用しているので、
テキストズームで拡大・縮小された時でもレイアウトの崩れはほとんどないので、文字が読みやすくなっています。Fire Foxで「文字サイズ-大きく」を5回クリックしてもレイアウトの崩れがほとんどないように作成しています。

配色は、白内障の方、第一色覚(赤)障害の方、第二色覚(緑)障害の方、第三色覚(青)障害の方にも見やすいようコントラストに配慮しています。
コントラスト比率は、WCAG 2.0 ワーキングドラフトの7:1以上のコントラスト比が必要であるという基準のレベルAAAを満たしております。
明度差、色差、は、W3C が提案している基準をほぼ満たしてます。
W3C が提案している色差の基準値(500)を満たしていない箇所が3箇所ありますが、400以上は保持しております。

ディスリクシア(読み書きの障害)の方に配慮し、背景色は、ユーザーが変えられるようになっております。
と言いますのも、ディクリシアの方は、背景色と文字色の組み合わせによる文字の読みやすさに個人差があるからです。

今後の課題としては、わかりやすいアイコンを追加し、ディスリクシアの方や高齢者の方、初心者の方にもわかりやすいテーマになるよう改良していきたいと思ってます。

■その他アクセシビリティに配慮したテーマ
WAIproCSSver.0.92を基本にfeelin'good様 のテンプレート028を参考にデザインさせていただいたテーマ「Growth」

cheche様のイラストとdengenさんが開発されたスライドカレンダーを使用させていただいた固定800px3カラムデザインシリーズ
テーマ「Lovely」「christmas」「NewYear」「valentine」は、音声でのネットサーフ(音声読み上げ)を考慮し、聞き飛ばしが出来る様に設定してあります。

テーマ「Sky」「floral」「OA018kaoru」も音声でのネットサーフ(音声読み上げ)を考慮し、聞き飛ばしが出来る様に設定してあります。

今後もアクセシビリティに配慮したテーマを作成し、1人でも多くの方が不便を感じる事がなくなればと思ってます。

謝辞:この記事の添削をしていただいたネット素浪人さんには、心より感謝申し上げます<(_ _)>