ThemeWAIproCSS

出典: GeeklogJpWiki

移動: ナビゲーション, 検索

WAIproCSS

ダウンロード:http://www.geeklog.jp/filemgmt/index.php/443

Geeklog1.6.1日本語パッケージ拡張版にWAIproCSSの最新版が入っています。

[編集]

ＷＥＢアクセシビリティについて

アクセシビリティとは、誰もがアクセスしやすいサイトの事です。

アクセシビリティに配慮するという事は、どのような環境下でも正確な情報を無理なく得られるようWebページを作成するという事になります。

例：WindowsのInternet Explorer6でもMacのSafariでもテキストブラウザであるLynxでもスクリーンリーダーでも同じように情報を得られるようにする。

尚、アクセシビリティに配慮したからと言って、Webデザインの美しさや創造性を欠く事はありません。

Webコンテンツ・アクセシビリティ・ガイドライン(WCAG2.0勧告)

米国リハビリテーション法508条

JIS X 8341-3「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ」

[編集]

WAIproCSSのアクセシビリティ対応状況

[編集]

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

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

[編集]

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

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

[編集]

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

また、グローバルナビゲーションと左右ブロックの聞き飛ばしが出来るようページ内リンクを設定しています。聞き飛ばしの部分はCSSで視覚上は見えないように設定しています。 (音声読上げの確認にホームページリーダー3.04を使用、、WAIproCSS 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行目あたりの「名前」を消し「あなたの名前」と記述する)

[編集]

WAIproCSSを利用したアクセシビリティに配慮したサイト

White Stage

[編集]

テーマの作り方

custom.cssに変更したいstyleを記述してください。(使用される画像は、/images/custom　に保存してください。)

ここでは、変更方法を説明する為　例として色を白(ナビゲーションの文字色のみ黒)にしておりますが、背景色を変更される時は、
出来る限りコントラストに配慮した配色をお願いします。

尚、custom.sample.cssにテーマの背景の変更例を記述しておりますので、参考にしてください。

ページ全体の背景色のスタイル設定方法

ページ全体の背景色を白に設定する場合は、以下のように記述してください。

body {
  background: #ffffff;
}

ヘッダ背景のスタイル設定方法

ヘッダ背景色を白に設定する場合は、以下のように記述してください。

div#container div#header {
  background: #ffffff;
}

ヘッダに背景画像を設定する場合(背景画像のファイル名は、bg_header.jpgとします)は、以下のように記述してください。
(縦方向に画像を繰り返す場合はrepeat-y、横方向に画像を繰り返す場合はrepeat-xと記述してください。
背景画像の位置は例として0 0 としています)

div#container div#header {
 background: url(images/custom/bg_header.jpg) no-repeat 0 0;
}

全体のカラムを囲っている枠線のスタイル設定方法

全体のカラムを囲っている枠線を白に設定する場合は、以下のように記述してください。

div#container {
  border: 0.1em solid #ffffff;
}

ナビゲーションのスタイル設定方法

ナビゲーションの背景色及び上下の線の色(全体のカラムを囲っている背景色と同色)を白に設定する場合は、以下のように記述してください。

div#container div#navigation {
  background: #ffffff;
  border-bottom: 0.1em solid #ffffff;
  border-top: 0.1em solid #ffffff;
}

ナビゲーションの文字の色を黒に設定する場合は、以下のように記述してください。

div#container div#navigation ul li.menuitem a,
div#container div#navigation ul li.menuitem a:link,
div#container div#navigation ul li.menuitem a:visited {
  color: #000000;
}

フッタのスタイル設定方法

フッタの背景色及び上部の線の色(全体のカラムを囲っている枠線と同色)を白に設定する場合は、以下のように記述してください。

div#container div#footer {
  background: #ffffff;
  border-top: 0.09em solid #ffffff;
}

ブロックタイトルのスタイル設定方法

左ブロックの背景色を白に設定する場合は、以下のように記述して下さい。

div#container div#wrapper div#carrier div#leftblocks,
body.left-center div#container div#wrapper div#carrier div#leftblocks,
body.js_off div#container div#wrapper div#carrier div#leftblocks {
  background: #ffffff;
}

左ブロックの検索部分の背景色及び下の線の色を白に設定する場合は、以下のように記述して下さい。

div#leftblocks div#block-left-search {
  background: #ffffff;
  border-bottom: #ffffff;
}

左ブロックのタイトルのスタイルを指定する場合は、以下のように記述して下さい。 (以下の記述は、フォントサイズを1.2emにし、タイトルの前にアイコン画像を付けた例です。尚、アイコン画像のファイル名は、icon.pngとします。)

div#leftblocks div.block-left h2 {
  padding-left: 22px; /*アイコン画像の横幅が19pxの場合*/
  background: url(images/custom/icon.png) no-repeat left top;
  font-size: 1.2em;
}

右ブロックの背景色を白に設定する場合は、以下のように記述して下さい。

div#container div#wrapper div#rightblocks,
body.left-center-right div#container div#wrapper div#rightblocks,
body.center-right div#container div#wrapper div#rightblocks,
body.js_off div#container div#wrapper div#rightblocks {
  background: #ffffff;
}

右ブロックのタイトルのスタイルを指定する場合は、以下のように記述して下さい。 (以下の記述は、フォントサイズを1.2emにし、タイトルの前にアイコン画像を付けた例です。尚、アイコン画像のファイル名は、icon.pngとします。)

div#rightblocks div.block-right h2 {
  padding-left: 22px; /*アイコン画像の横幅が19pxの場合*/
  background: url(images/custom/icon.png) no-repeat left top;
  font-size: 1.2em;
}

アンケート内の背景色を白に設定する場合は、以下のように記述して下さい。

div.poll-questions {
  background: #ffffff;
}

センターブロックのスタイル設定方法

中央ブロックの背景色と左右の枠線を白に設定する場合は、以下のように記述して下さい。

div#container div#wrapper div#carrier div#centerblocks,
body.center div#container div#wrapper div#carrier div#centerblocks {
  background: #ffffff;
}

body.left-center-right div#container div#wrapper div#carrier div#centerblocks,
body.js_off div#container div#wrapper div#carrier div#centerblocks {
  background: #ffffff;
  border-left: 0.1em solid #ffffff;
  border-right: 0.1em solid #ffffff;
}

body.left-center div#container div#wrapper div#carrier div#centerblocks {
  background: #ffffff;
  border-left: 0.1em solid #ffffff;
}

body.center-right div#container div#wrapper div#carrier div#centerblocks {
  background: #ffffff;
  border-right: 0.1em solid #ffffff;
}

注目記事のタイトルのスタイルを指定する場合は、以下のように記述して下さい。 (以下の記述は、フォントサイズを1.2emにし、タイトルの前にアイコン画像を付けた例です。尚、アイコン画像のファイル名は、center_icon.pngとします。)

div#centerblocks div.featuredstorytext h2 {
  padding-left: 22px; /*アイコン画像の横幅が19pxの場合*/
  background: url(images/custom/center_icon.png) no-repeat left top;
  font-size: 1.2em;
}

通常記事のタイトルのスタイルを指定する場合は、以下のように記述して下さい。 (以下の記述は、フォントサイズを1.2emにし、タイトルの前にアイコン画像を付けた例です。尚、アイコン画像のファイル名は、center_icon.pngとします。)

div#centerblocks div.storytext h2 {
  padding-left: 22px; /*アイコン画像の横幅が19pxの場合*/
  background: url(images/custom/center_icon.png) no-repeat left top;
  font-size: 1.2em;
}

"http://wiki.geeklog.jp/index.php/ThemeWAIproCSS" より作成

ThemeWAIproCSS

出典: GeeklogJpWiki

目次

WAIproCSS

ＷＥＢアクセシビリティについて

WAIproCSSのアクセシビリティ対応状況

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

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

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

レイアウトについて

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

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

アクセスキーについて

評価結果をテーマに反映

テーマ以外での変更箇所

WAIproCSSを利用したアクセシビリティに配慮したサイト

テーマの作り方

表示

個人用ツール

コンテンツ

その他

リンク

検索

ツールボックス