a. 説明全文
| みんなのウェブ：アクセシビリティ実証実験ホームページ ●デザインに関するコメント ・みんなのWebというタイトルから「明るい」「包容力がある」「優しい」といった言葉が連想できたため、「清潔なイメージの白」と「優しさと暖かみのあるオレンジ」をメインカラーとして使用しました。また、2色では単調になりがちなので、「自然や環境を連想させるグリーン」を加えることでバランスを取っています。 ・文房具の付箋をモチーフにして、見出しやナビゲーションボタンは作成しました。 ・メインナビゲーション部分は、疑似セレクタを使用し、背景画像を入れ替えています。JavaScriptを使用せずにCSSだけでも動きのあるボタンが作れることがポイントです。 ●HTMLの記述に関するコメント ・HTML4.01 Transitionalの正しい文法で記述しています。（W3CのHTMLValidation Serviceにて確認） ・段組みレイアウトはレイアウトテーブルを使用せず、CSSで行いました。テーブルは一切使用していません。 ・CSS未対応の旧ブラウザにおいては、スタイルシートを適用しないようにしています。外部スタイルシートを入れ子にして適用しています。 ・CSSが適用されない場合であっても、正しく情報が伝わるようにHTMLを記述しています。 ●アクセシビリティに関するコメント ・WCAG1.0のAAを満たしています。（ウェブヘルパーにて確認。ex.htmlのみAだが、AAの規定は満たしていると考えられる） ・全盲、弱視の方がアクセスしやすいように、音声読み上げソフトを考慮した作りにしました。ナビゲーションや見出しにもテキストを用い、サイズを可変にすることで、音声読み上げソフトを使用しない弱視の方にもアクセスしやすくなっています。 ・色の情報による区別を極力排除しました。健常者が見た場合には、色による区別が判読しやすさを向上させますが、色覚障害の方でも読みやすいように、白い背景に黒文字という配色を基本にしています。リンク箇所は青（緑）を使用し、特に文中のリンク箇所には下線が付くようにしてあります。 ・自分の現在見ているページの階層を確認するためのパンクズリストとして「ページ階層の表示」を付けました。 ・ページのトップに「音声読み上げソフト用のメニュー」を設定しました。1px画像のalt属性に記述してあり、「メインナビゲーション」「本文」「ヘルプメニュー」「ページ階層の表示」へとリンクしています。 ・「メインナビゲーション」「本文」「ヘルプメニュー」「ページ階層の表示」の冒頭には、それぞれ「ここから○○」という文章が罫線画像のalt属性に記述してあります。CSSが適用されない場合は、その罫線が意味上および視覚上の区切りになります。 ・「メインナビゲーション」「本文」「ヘルプメニュー」「ページ階層の表示」のそれぞれから、ページトップのメニューまで戻れるように、「ページトップへ戻る」というリンクを各コンテンツの最後に付けました。 ・各ページのフッタ画像のaltには「このページの内容はここまでです」という記述をしてあります。 → 作品紹介へ戻る |
| はーとふる デザインの狙いは、『使ってやさしい』をキーワードに、すべての人がアクセスしやすいサイトになるように工夫しました。 工夫した点は、以下の通りです。 1.『文字が小さくて見にくい人へ』のリンクは、文字が見にくい人が早く文字の大きさを調整できるようにメニューの一番上に配置しました。 2.トップページ以外には、現在のページの位置がわかるように、『トップページ ＞ ウェブアクセシビリティとは ＞ 』の表示をしました。 3.メニュー群は、読み飛ばせるように、『本文へスキップ』のリンクを設定しました。 以上 → 作品紹介へ戻る |
| 「みんなのウェブ」はつらつバージョン まず、みんなでウェブを分かち合う喜びが感じられるデザインを心がけました。アクセスに障害がある人も無い人も便利に使えるように、いろいろと細かい工夫をしてあります。レイアウトはウィンドウサイズに依存しないリキッドレイアウトとしました。サンプルのページなどではウィンドウサイズを小さくすると中身が枠からはみ出しますが、かえってそれが面白いと思えるような仕上げにしてみました。ページの上部についているミニナビゲーションは、各ページへのアクセスキーナンバーを表しています。素早く目的のページへアクセスでき便利です。代表的なブラウザの全てで支障なく閲覧できるよう、スタイルシートの設定にも気を配りました。 → 作品紹介へ戻る |
| シンプルなみんなのウェブ 容量も軽減しながら見た目もシンプルなデザインを施してみました。採用されたばあいにさらにブラッシュアップして完成形を目指したいと思います。 → 作品紹介へ戻る |
| 「みんなのウェブ」 隠しリンクを使い、本文、メニュー、ヘルプそれぞれに自在に遷移できるようにしました。配色はお年寄りなどにも受け入れられやすい落ち着いた色を使用しています。 → 作品紹介へ戻る |
| レディメイド レディメイドの名の通り目新しいスキームは用いてないです。 着心地を最優先に考えて作りました。 テンプレートとしても用いやすいように随所に柔軟性を持たせてあります。 ＜ページ構造＞ デザイン自体をページの構造をダイレクトに反映したものとして理解しやすくする。 ＜カラー＞ デザインには淡色のカラーを用いコントラストを得る。モノクロ時にも十分なコントラストが得られるようにテストしました。 ＜ナビゲーションバー＞ タブ式かどうか迷ったのですが、外観をすっきりさせるために縦に並べました。 ＜アクセスキー＞ ページを移動するような要素は数字（０〜９）、ページ内移動にはアルファベットのキー（A〜Z）を順に振る。これによって、サイト毎にバラバラであるアクセスキーの勝手を覚えるのは確実に早くなります。またアクセスキー自体をリンクの横に記述してあります。 ＜目次＞ 全てのページに対して「目次」を設け、ここをページを見る際の「基点」として目次とページ内を、巧く巡回できるようにした。（前述のアクセスキーやページ構造は特にここで生きてきます） ＜クロスな閲覧環境＞ 色々な環境で自分ができる条件は全てテストしました。CSSを適用しなくても構造は損なわれないよう努力（<hr>の埋め込み等）しました。 ＜音声ブラウザ＞ 音声ブラウザでは理解しにくいと思われる場所（セクション間等）に音声ブラウザ用の画像を埋め込んでALT属性をつけてあります。 またスキップする場合には「●●へ移動」ではなく「○○をスキップ」とすることで、スキップ間の構造を得られるようにする。 特に工夫した点は「ページの構造」です。 PRしたい点も同上です。 最後に時間が無くて画像に手を掛けられなかったのが残念でした。 → 作品紹介へ戻る |
| 「みんなのウェブ」オリジナル作品 障害を持つ方へのコンテンツと健常者が利用するコンテンツをうまく調和させるページにしようと考えました。目の見えない方への補助的な説明やナビゲーションは一つ間違えると、健常者にとって使いづらいものになるのではないかと思いました。そこで、表示されないレイヤをページの適切な位置に挿入することで、音声読み上げブラウザやテキストブラウザのみ読み上げ（表示）されるページ内のナビゲーションを入れました。 通常のページは視覚障害の方にとって楽しく利用できるものは少ないと思いますが、この仕組みを逆手に取りますと、上記ブラウザでアクセスされた方だけ発見できる少し特をした気分になるコンテンツを入れることもできますのでより楽しく利用していただけると思います。 また今回は審査対象は4ページのみですが、アクセシビリティはサイト全体のナビゲーションも大きく関与いたしますので、ページのナビゲーションも含めて考えました。サイトの構成を見て、本のように章立てにしてシンプルなナビゲーションにしました。アイコンも「押すことができる」とわかるデザインにしました。色情報を落として見たり、色盲の方に見てもらったりしたので配色の問題に関してはクリアしていると思います。 上記がこの作品のアピールとなる部分ですが、その他、基本的なAlt、Titleなども色々なサイトを参考にして制作しました。 → 作品紹介へ戻る |
| ユニバーサルウェブ（旧タイトル：環境に依存しないサイト作りを目指します！） サイトを制作する際の重要な課題であるアクセスのしやすさ＝（アクセシビリティ）に関してはメジャーな最新ブラウザはもちろん、旧バージョンのブラウザでも最低限の情報が伝わるよう考慮しました。また、ホームページリーダー等の音声ブラウザ対策として、全ページのHTMLソース上部にナビゲーションをスキップし、すぐに本文に移動できるスペーサーＧＩＦ＆リンクを設定、閲覧の負担を減らせるよう、考慮しました。 サイトの使いやすさ＝ユーザビリティに関してはトップページを含めた全てのページのインターフェイスを共通にし、タイトル、検索部分、メニュー、本文、アドレスといった要素をコントラストの強い暖色系の色でブロック分けし、本文に関しては多くの人が読みやすいと思われる白い背景に黒い文字としました。また、主要なコンテンツにはショートカットキーを設定、リンクの色は一般的に一番認知されていると思われる青のアンダーライン付にするなど、使い勝手の向上を意識しました。 → 作品紹介へ戻る |
| アクセシビリティ＋ユーザビリティ すでに現在のページはアクセシブルに構成されている．しかし，ユーザビリティの観点から見ると使いにくい点が多くある．私はユーザビリティの観点から以下の点の修正を行い，デザインした． 配色 ・Webセーフカラーによる配色 ・親しみを持たせるためにオレンジを基調とする ユーザビリティの観点によるデザイン ・文字サイズの変更，サイトマップをページ上部に配置 ・全てのページ上部にみんなのウェブのロゴを配置 ・無駄なイメージを文字で表現 → 作品紹介へ戻る |
| みんなのWeb｜〜アクセシビリティ実証実験事務局〜 トップには、デザインを施した画像を使い、それ以外は、なるべく画像を使わずにCSSでデザインしてみました。ちょっとした擬似的なプルダウンメニューを目指しました。 チェックをする時間が取れず、完成したとはいえません。中途半端な応募で申し訳ありませんが応募させていただきます。 → 作品紹介へ戻る |
| どの場所にいるのかが明解！みんなのウェブ 見る側にとって分かりやすいフォントの大きさ、イラスト、サウンドの表現はもちろん、そのHPの中で、今、どの場所にいてどの情報を見ているのか、居場所が明確なものを作ってみました。お年寄りや障害者の方にとってやさしいものになったと思います。 → 作品紹介へ戻る |
| クリックオンリー サイト構成を意識せずに、利用者が迷子にならないクリック動線を考慮し、ホームページを活用し情報の収集ができる事を目的として配慮 → 作品紹介へ戻る |
by (C)情報通信研究機構 バリアフリーサイト, all rights reserved. barrierfree@nict.go.jp