このページでは、当サイト(テキスト版)がどのような考えで作られているかをご紹介します。
当サイトは、高知システム開発の公式Webページのテキスト版です。
画像や動画を活用してわかりやすく伝える公式ページに対して、こちらは、スクリーンリーダー(画面読み上げソフト)での読み上げ、キーボードだけでの操作、画面の拡大表示を最優先に設計しています。
私たちはスクリーンリーダー PC-Talkerシリーズを開発しているメーカーです。このサイト自体が、私たちの考えるアクセシビリティの実践例になるように作っています。
ページは見出しで階層化しています。スクリーンリーダーの見出しジャンプで、目的の場所へまっすぐたどり着けます。
本文は装飾よりも読み上げの順序を優先した、シンプルな構成です。リンクは「こちら」ではなく、行き先がわかる文言にしています。
写真には、内容を説明する文章を付けています。たとえば会社案内の表彰状の写真では、賞状の本文まで読み上げで確認できます。
画面の隅にあるマウス専用の補助メニューや動画紹介は、読み上げの対象にせず、Tabキーで移動しても止まらないようにしています。本文のメニューと二重に読まれることはありません。
さらに、Tabキーを押してキーボード操作を始めると、補助メニューと動画紹介は自動的に畳まれ、動画が動き出すのも止まります。置いたままのマウスの位置に、たまたまメニューや動画が重なって、意図しないメニューが開いたり、動画の動きで読み上げが妨げられたりするのを防ぐためです。
マウス操作に戻るときは、マウスをはっきり動かすか、メニューのタイトルにマウスを乗せるか、エスケープキーを押すと、畳まれたメニューが再び使えるようになります。
マウス専用の補助メニューや動画紹介、星空の装飾は、余白に十分なゆとりがある広い画面のときだけ表示します。画面を広げたときにだけマウス操作向けの機能が加わり、狭い画面では本文だけに集中できます。
スマートフォン(タッチ操作)では、トップページの最初に「高知システム開発に電話する」リンクを表示し、タップするだけで発信できます。外出先でも、電話がいちばん確実な連絡手段だと考えているためです。
逆に、マウスの拡大鏡やキーボード操作など、パソコン向けの案内はスマートフォンでは表示しません。いまお使いの端末で実際に使える機能の説明だけが読み上げられるようにしています。
画面は標準で、黒い背景に白い文字の表示です。まぶしさを抑え、強度弱視のかたが設定なしでそのまま見やすいようにしています。右上のボタンで白背景にも切り替えられ、選んだ配色は全ページで維持されます。
右上の「拡大」「縮小」ボタンで、文字の大きさを段階的に最大1.8倍まで変えられます。この設定も全ページで維持されます。
マウスをお使いのかたは、中央ボタン(ホイールの押し込み)で丸い拡大鏡(ルーペ)を表示できます。もう一度押すか、エスケープキーで消えます。同じ操作でパソコンのどの画面でも拡大できる無料アプリ「QuickLoupe(クイックルーペ)」も公開しています。
周辺の補助メニューや動画紹介は、ふだんは明るさを抑えて目立たないようにし、マウスを乗せている間だけ明るく表示します。画面の中でいちばん明るいのが、常に本文になるようにするためです。
補助メニューや動画紹介にマウスを乗せると、項目名を音声でもお知らせします。画面を拡大してマウスを併用するかたが、いまどこを指しているかを確認しやすくするためです。
書体には読み間違えにくいユニバーサルデザインフォントを採用しています。
アクセシビリティのために、デザインをあきらめる必要はない。それがこのサイトの基本的な考え方です。
黒い画面を夜空に見立てて、画面の枠の外にはオーロラのような淡い光を、左上の余白には星空を飾っています。星空には北斗七星・カシオペヤ座・オリオン座などが実際の星の配置データのとおりに入れ替わり浮かびます。
トップページのメニュー横では、小さな光の点が編隊を組んで「AOK」の文字や会社ロゴを描く、ドローンショーが繰り返されます。マウスの動きに合わせて編隊の向きも変わります。
これらはすべて純粋な装飾です。読み上げられることはなく、キーボード操作にも影響しません。Tabキーでキーボード操作を始めるとドローンショーは自動的に終了します。OSの「視覚効果(動き)を減らす」設定にも対応しています。
このサイトは、当社のスクリーンリーダー PC-Talker と音声ブラウザ NetReader での読み上げ・操作を確認しながら制作しています。
Webページを制作されるかたに向けて、視覚障がい者の利用実態にもとづいた「Webアクセシビリティ ガイド」も公開しています。
このサイトについてのご意見・ご要望は、ご注文・お問い合わせのページからお寄せください。