このサイト(aok-net.com)について
誰もが、見て、聴いて、触れて使える。モダンなテキストWebです。
このページでは、当サイト(テキスト版)がどのような考えで作られているかをご紹介します。各節の最初に、太字で要点をまとめています。お急ぎのかたは、要点だけでも全体をつかめます。
このサイトの位置づけ
要点: このサイトは、スクリーンリーダー PC-Talker の開発元である高知システム開発が、音声読み上げ・キーボード操作・拡大表示を最優先に設計した、公式ページのテキスト版です。
当サイト「テキスト版」(www.aok-net.com)は、株式会社高知システム開発(高知市)が運営する、公式Webページ(www.aok-net.co.jp)のテキスト版です。
画像や動画を活用してわかりやすく伝える公式ページに対して、こちらは、スクリーンリーダー(画面読み上げソフト)での読み上げ、キーボードだけでの操作、画面の拡大表示を最優先に設計しています。
株式会社高知システム開発は、視覚障がい者向けのスクリーンリーダー「PC-Talker」シリーズを開発しているメーカーで、1983年から視覚障がい者向けソフトウェアを開発しています。このサイト自体が、当社の考えるアクセシビリティの実践例になるように作っています。
同じ目的の機能も、利用者に合わせて作り分けています。たとえばお見積もりは、当サイトでは選択肢を順に選ぶだけで金額がわかる「かんたん見積もり」を用意し、音声とキーボードだけで完結できるようにしています。公式ページの自動見積もりは、晴眼者(目の見えるかた)に向けたモダンなデザインで提供しています。
音声で聞きやすくするための工夫
要点: ページ全体を見出しで階層化し、読み上げの順序と、行き先のわかるリンク文言を徹底しています。
ページは見出しで階層化しています。スクリーンリーダーの見出しジャンプで、目的の場所へまっすぐたどり着けます。Hキーを押すと次の見出しへ、1から6の数字キーを押すとそのレベルの見出しへ、簡単に移動できます。
本文は装飾よりも読み上げの順序を優先した、シンプルな構成です。リンクは「こちら」ではなく、行き先がわかる文言にしています。
写真には、内容を説明する文章を付けています。たとえば会社案内の表彰状の写真では、賞状の本文まで読み上げで確認できます。
キーボード操作を邪魔しない工夫
要点: マウス専用の補助メニューなどは読み上げの対象外です。キーボード操作を始めると自動的に畳まれ、操作の邪魔をしません。
画面の隅にあるマウス専用の補助メニューや動画紹介、SNSへのリンクは、読み上げの対象にせず、Tabキーで移動しても止まらないようにしています。本文のメニューと二重に読まれることはありません。
さらに、Tabキーでキーボード操作を始めると、補助メニューと動画紹介は自動的に畳まれます。動画の動きも止まります。置いたままのマウスにメニューや動画が重なって、意図しない動作や読み上げの妨げが起きるのを防ぐためです。
マウス操作に戻るときは、マウスをはっきり動かすか、メニューや動画紹介のタイトルにマウスを乗せるか、エスケープキーを押すと、畳まれたメニューが再び使えるようになります。
当サイトに掲載しているYouTubeの動画は、専用の再生ページで開きます。スペースキーで再生と一時停止、上下の矢印キーで音量の調整、左右の矢印キーで早戻しと早送りができ、キーボードだけで操作できます。
この再生ページはキーボードとマウスのどちらでも操作でき、一方の操作がもう一方の邪魔になることはありません。
見やすくするための工夫(ユニバーサルデザイン)
要点: 標準は黒い背景に白い文字です。配色の切り替え、文字の拡大、見出しの一覧、拡大鏡(ルーペ)を、画面のボタンからいつでも使えます。動く装飾の停止、太めのユニバーサルデザインフォント、動画の文章版も用意しています。
配色の切り替え
画面は標準で、黒い背景に白い文字の表示です。まぶしさを抑え、強度弱視のかたが設定なしでそのまま見やすいようにしています。画面では右上に見える「白背景へ」ボタンで切り替えられます。配色を切り替えたいかたはこちら(切り替えボタンへ移動します)
この切り替えボタンは、音声ではページのいちばん最後にあります。本文を先頭から読むときの邪魔にならないようにするためで、スクリーンリーダーのボタンジャンプですぐに見つけられます。選んだ配色は全ページで維持されます。
文字の拡大
画面の右上にある「拡大」ボタン(画面の狭いスマートフォンでは「＋」と表示)で、文字の大きさを段階的に最大1.8倍まで変えられます。左どなりの「縮小」ボタンで元に戻せます(スマートフォンでは「－」と表示し、拡大しているときだけ現れます)。文字の大きさも、配色と同じく全ページで維持されます。
見出しの一覧
画面では左上に見える「見出し」ボタンを押すと、表示中のページの見出しが一覧で開き、見出しを選ぶとその場所へすぐに移動できます。スクリーンリーダーの見出しジャンプと同じ移動のしやすさを、画面を見て操作するかたにも届けるための機能です。移動すると読み上げの位置も選んだ見出しへ移るため、音声と併用するかたもそのまま使えます。マウスをお使いのかたは、一覧の右上にある画鋲の形のピン留めアイコンを押すと、見出しへ移動しても一覧が閉じなくなり、いま読んでいる場所を一覧の上で光らせながら、本文と見比べて読み進められます。エスケープキーか「見出し」ボタンで閉じると、ピン留めは解除されます。一覧の各行の先頭には、見出しの階層(H1・H2・H3など)を小さなしるしで示しています。スクリーンリーダーが読み上げる見出しの階層を、目で見える形にしたものです。
スクリーンリーダーには、見出しを次々にたどってページの構成をつかみ、読みたい節へ一気に移動する「見出しジャンプ」という基本の操作があります。多くの利用者が日常的に使っている操作です。目で画面を追えなくても、よく作られたページなら、見出しをたどるだけで全体を把握して目的の場所へ着けます。「見出し」ボタンは、この操作を画面を見て使うかたにも届けるものです。アクセシビリティのために整えた見出しの構造が、視覚障がいのあるかたにも、晴眼のかたにも、同じように役立つことを体験していただければと思います。
画面の幅が狭く、右上のボタンや「見出し」ボタンが本文に重なる場合は、スクロール中はボタンを薄く表示して本文を読みやすくしています。ボタンにマウスを乗せるか、キーボードでフォーカスを移すと、通常の表示に戻ります。
拡大鏡(ルーペ)
マウスをお使いのかたは、中央ボタン(ホイールの押し込み)で丸い拡大鏡(ルーペ)を表示できます。中央ボタンのないタッチパッドなどでは、右上の虫めがねの形の「ルーペ」ボタンでも同じように使えます。もう一度押すか、エスケープキーで消えます。
表示したままサイト内の別のページへ移動しても、拡大鏡はそのまま使えます。同じ操作でパソコンのどの画面でも拡大できる無料アプリ「QuickLoupe(クイックルーペ)」も、当社が公開しています。
動きの停止と補助メニューの見え方
背景の光の漂いや写真の明るさの揺らぎなど、自動で動く装飾は、右上の「動き停止」ボタンで止められます。もう一度押すと「動き再開」になります。動きが気になるかた、集中して読みたいかたのための機能で、選択は全ページで維持されます。OS の「視覚効果を減らす」設定をお使いの場合は、最初から動きません。スマートフォンでは動く装飾を最初から止めているため、このボタンはありません。
周辺の補助メニューや動画紹介などは、ふだんは明るさを抑えて目立たないようにし、マウスを乗せている間だけ明るく表示します。画面の中でいちばん明るいのが、常に本文になるようにするためです。
補助メニューや動画紹介にマウスを乗せると、項目名を音声でもお知らせします。画面を拡大してマウスを併用するかたが、いまどこを指しているかを確認しやすくするためです。
書体とコントラスト
書体には、読み間違えにくいユニバーサルデザインフォント(UD新ゴ)を、細字ではなく中太(ミディアム)の太さで使っています。見出しも同じ太さです。線が太いと、弱視のかたが拡大したときや、コントラストの下がる環境でも文字の形がつぶれにくくなります。
アクセシビリティの国際基準 WCAG 2 は書体の太さを直接は定めていませんが、太い文字ほど読みやすいという考え方は基準にも取り入れられており(コントラストの基準では太字が「大きな文字」として扱われます)、次の基準 WCAG 3 では文字の太さが正式な評価項目になる予定です。当サイトの肉厚の書体は、弱視のかたの実情に合わせて、この考え方を先取りしたものです。
文字と背景のコントラスト比(明るさの差)は、黒背景・白背景のどちらの配色でも、本文・リンク・見出し・ボタンなど画面に表示されるすべての文字色で7対1以上を確保しています。これは、Webアクセシビリティの国際基準 WCAG 2 で最も厳しい水準(AAA)のコントラストの基準(達成基準1.4.6)に相当する値です。たとえば標準の黒背景では、本文の文字は約20対1、リンクの文字は約18対1です。弱視のかたや、明るい屋外・暗い部屋など見づらい環境でも、文字を読み取りやすくするためです。
動画の内容を文章で読む
トップページの動画「PC-Talkerでできること」には、映像と音声の内容を時系列で文章にしたナレーション付き台本のページを用意しています。画面に表示される内容や操作の様子も文章で説明していますので、動画を再生せずに、スクリーンリーダーや拡大表示で自分のペースで内容を確かめられます。これは、WCAG 2 で最も厳しい水準(AAA)の達成基準1.2.8「メディアに対する代替(収録済み)」で求められる、メディア全体の内容をカバーするテキストによる代替手段に相当するものです。
画面の広さや端末に合わせる工夫
要点: 広い画面のときだけマウス向けの機能が加わり、スマートフォンでは電話での連絡を最優先にしています。
マウス専用の補助メニューや動画紹介、星空の装飾は、余白に十分なゆとりがある広い画面のときだけ表示します。画面を広げたときにだけマウス操作向けの機能が加わり、狭い画面では本文だけに集中できます。
スマートフォン(タッチ操作)では、トップページの最初に「高知システム開発に電話する」リンクを表示し、タップするだけで発信できます。外出先でも、電話がいちばん確実な連絡手段だと考えているためです。
逆に、トップページの操作案内では、マウスの拡大鏡やキーボード操作など、パソコン向けの説明はスマートフォンには表示しません。いまお使いの端末で実際に使える機能の説明だけが読み上げられるようにしています(このページは設計のご紹介のため、パソコン向けの機能もあわせて説明しています)。
デザインをあきらめないための工夫(モダンなデザインとの両立)
要点: オーロラ・星空・ドローンショーなどの装飾はすべて純粋な飾りで、読み上げとキーボード操作には影響しません。
アクセシビリティのために、デザインをあきらめる必要はない。それがこのサイトの基本的な考え方です。
黒い画面を夜空に見立てて、画面の枠の外にはオーロラのような淡い光を、左上の余白には星空を飾っています。星空には北斗七星・カシオペヤ座・オリオン座などが実際の星の配置データのとおりに入れ替わり浮かびます。
トップページのメニュー横では、小さな光の点が編隊を組んで「AOK」の文字や会社ロゴを描く、ドローンショーが繰り返されます。マウスの動きに合わせて編隊の向きも変わります。
写真の見せ方にも、独自の表現を採り入れています。製品紹介のページでは、開いたときに製品の写真がフワッと青白く光り、余韻を残してやわらかな光に落ち着きます。
会社案内のページでは、深い海を泳ぐ親子の鯨の写真に、上から光が差し込むような明るさのゆらぎを重ねています。ゆらぎは同じ繰り返しにならないように作っています。
これらはすべて純粋な装飾です。読み上げられることはなく、キーボード操作にも影響しません。Tabキーでキーボード操作を始めると、ドローンショーは区切りのよいところで自動的に終了します。OSの「視覚効果(動き)を減らす」設定にも対応しています。
制作と確認
このサイトは、当社のスクリーンリーダー PC-Talker と音声ブラウザ NetReader での読み上げ・操作を確認しながら制作しています。
Webページを制作されるかたに向けて、視覚障がい者の利用実態にもとづいた「Webアクセシビリティ ガイド」も公開しています。
ご意見・お問い合わせ
このサイトについてのご意見・ご要望は、サイトについてのお問い合わせフォームからお寄せください。
製品のご注文・その他のお問い合わせは、ご注文・お問い合わせのページをご覧ください。