White Stage

音声読上げソフトでの読上げ順について

音声でのネットサーフを考慮し、左右ブロックより先にメインコンテンツ（中央ブロック）を読み上げさせる（認識させる）ため、ヘッダ領域に記述されていた左ブロックをフッタ領域に移動させ記事(中央ブロック)を先読みさせています。 CSSで視覚上は左ブロック→中央ブロックー右ブロックの順にしています。

音声読上げソフトで読み上げないようにする記述について

音声でのネットサーフは、情報を得るまでに時間がかかる事が多いので、音声で読み上げないようにする記述をしている部分があります（ホームページリーダー3.02では未対応の様子です）。現今、ＯＳでの音声読み上げが普及の兆しを見せているため記述してあります。

聞き飛ばしの設定について

また、グローバルナビゲーションと左右ブロックの聞き飛ばしが出来るようページ内リンクを設定しています。聞き飛ばしの部分はCSSで視覚上は見えないように設定しています。 (音声読上げの確認にホームページリーダー3.04を使用、、Ver.2.4.0からPC-Talker XPを使用)

レイアウトについて

レイアウトは、エラスティックレイアウト(em指定)を使用しており、テキストズームで拡大された時でもレイアウトの崩れはほとんどないので、情報を正確に得る事が出来ます。

(「Windows XP Internet Explorer6、7、8の文字サイズ最大、Internet Explorer7、8の拡大レベル200%、Opera10.01のズーム200%、 Firefox3.5.5の文字サイズだけ変更拡大×３及び拡大×４、Safari4.0のテスキトのみ拡大×３及び拡大×４、Google Chrome3.0.195.33のText Zoom拡大×４」「Windows Vista Internet Explorer7、8の文字サイズ最大及び拡大レベル200%」「Mac OSX バージョン10.4.11 Safari4.0.3のテキストのみ拡大×４及び拡大×４、Firefox3.5.5の文字サイズだけ拡大×４」で確認) Windows XP Internet Explorer6で文字サイズを最小にすると不具合がある事は確認しております。

聴覚障害のかたが情報を理解しやすいように、レイアウトが解りやすい背景色及び罫線を設定しています。

コントラストと色差を考慮した配色について

配色は、コントラストや色差、明度差に配慮しています。 (Jun [Wrong HTML] & スティーブン・フォルナー[AIS]開発のカラー・コントラスト・アナライザー、IBMのaDesigner、富士通のColorSelector5.1使用)

リンクを正確に選択出来るよう配慮

リンクの選択ミスを防ぐ為、グローバルナビゲーションの縦幅とメニューとメニューの間及び記事の中にある友達にメールするアイコンと印刷アイコンの間の幅を広げてあります。

高齢者の方や弱視のかたに配慮し、記事をメールするアイコン、印刷用アイコン、編集アイコン等の画像サイズを大きくしてあります。

アクセスキーについて

また、アクセスキーも導入しております。

accesskey属性は、アンカーにその属性として任意の文字を指定する事によって、 Altキー（MacであればCtrlキー）とその任意の文字との組み合わせを押す事でアンカーのリンク先への移動をマウスを用いることなく出来るようにする属性です。

リンク先とアクセスキーの対応は以下の通りです。なお，ブラウザごとのアクセスキーの利用方法と併せてご覧ください。

• キー：英語のt　リンク先：ホーム
• キー：英語のj　リンク先：Geeklog Japanese

ブラウザごとのアクセスキーの利用方法

• Windows Alt+アクセスキー
• Mac Ctrl+アクセスキー

評価結果をテーマに反映

音声読上げソフト利用者のかた数名から、このテーマを評価していただき評価結果をテーマに反映しております。

評価結果を反映した箇所は、以下の通りになります。

• 音声読み上げソフト利用者のかたが解りやすいように、記事の中にある「全文表示」の位置を変更してあります。
• 左右のブロックもそれぞれ読み飛ばせた方が良いという事でしたので、読み飛ばせるようにしました。
• 音声読上げソフトを利用されている方が、メニューなどを聞き飛ばした後、現在地がわかるよう「ここから本文」のようなテキストを入れてあります。

テーマ以外での変更箇所

/*----- テーマ以外での変更箇所　言語ファイル /language/japanese_utf-8.phpを修正してください。 -----*/

音声読み上げソフト利用者の方が、「友達に記事を送信する」ページでの「名前」「送信先名」という表現が解りづらいという事でしたので、「名前」を「あなたの名前」、「送信先名」を「送信先名前」に変更してください。 Geeklog1.6.1からは、記事の中にある｢続きを読む｣という表現を「全文表示」に変更してください。(*/language/japanese_utf-8.phpの54行目の「続きを読む」を消し「全文表示」と記述、444行目辺りの「送信先名」を消し「送信先名前」と記述、437行目あたりの「名前」を消し「あなたの名前」と記述する)

Geeklog WikiにもテーマWAIproCSSについての説明を書いておりますので、ぜひご覧下さい