メニュー

ホームページ作成におけるウェブアクセシビリティ:日本工業規格(JIS):JIS X 8341-3:2010 、音声読上げブラウザ対応、カラーバリアフリー対応、音声入力・タッチ式入力対応

文字サイズの変更
標準
背景色の変更
標準
音声読上げ版

ウェブアクセシビリティへの対応


ウェブアクセシビリティとは

WebサイトやWebサービスが、どんな人やどんな利用環境でもなるべく同じように閲覧・利用できること、また、そのような状態が実現されている度合いをいいます。

  • コンピュータ機器やソフトウェアの違い、子どもや高齢者、障害者などの別によらず、なるべく多くの人がウェブページにアクセスして情報を取得できるよう配慮することを意味します。
  • ウェブアクセシビリティを高めるためには、例えば、特定の画面サイズに依存しないレイアウトにしたり、漢字やアルファベット、文字などを拡大表示できるようにしたり、読み上げソフトでも内容がわかるよう画像に注釈を付けたり、といった点に対応しながらウェブサイトを制作する必要があります。

世界のウェブ技術の標準化団体であるW3Cが、WCAG(Web Content Accessibility Guidelines)というガイドラインを発行しているほか、日本工業規格(JIS)がウェブアクセシビリティの国内標準としてJIS X 8341-3を発行しており、近年では政府や自治体がサイト制作を発注する際にこうした規格への対応を必須とする事例も増えています。


ウェブアクセシビリティと日本工業規格(JIS):JIS X 8341-3:2010 について

日本工業規格(JIS):JIS X 8341-3:2010 「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

ウェブアクセシビリティは、もともと、W3C(WWWの国際的な標準化組織)の「Webは、ハードウェア、ソフトウェア、ネットワーク、言語、文化、場所等の違いや、身体的、精神的能力にかかわらず、すべての人に提供されるべきものである」という命題に基づいています。
日本のJIS X 8341-3は、W3Cのワーキンググループの作成しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG:Web Content Accessibility Guidelines)のウェブアクセシビリティの達成基準に基づいています。
また、JIS X 8341-3は、「主に高齢者.障害のある人及び一時的な障害のある人がウェブコンテンツを知覚し,理解し,操作できるようにする」という表現で,この規格の目的を示しています. ここで、重要な点は、「知覚」と「理解」と「操作」の3つの言葉であり、「知覚」は視覚・聴覚・触覚であり、「理解」は「知覚」によって得た情報の意味を解釈し処理した情報を記憶することであり、「操作」は記憶した情報に基づいて動作することが可能になることです。 ウェブアクセシビリティは、この「知覚」・「理解」・「操作」を障害がある人や高齢者にも問題なくできるようにホームページを作成することを求めているわけです。 その実現のために日本のJIS X 8341-3では、ウェブコンテンツのアクセシビリティ達成等級、ウェブアクセシビリティの確保・向上に関する要件、ウェブコンテンツに関する要件、試験方法等を規定しウェブアクセシビリティを規格化しています。
JIS X 8341-3における「箇条7.ウェブコンテンツに関する要件」には、主に以下のことが規定されています。
7.1知覚可能に関する原則
7.1.1 代替テキストに関するガイドライン
7.1.2 時間の経過に伴って変化するメディアに関するガイドライン
7.1.3 適応可能に関するガイドライン
7.1.4 識別可能に関するガイドライン
7.2操作可能に関する原則
7.2.1 キーボード操作可能に関するガイドライン
7.2.2 十分な時間に関するガイドライン
7.2.3 発作の防止に関するガイドライン
7.2.4 ナビゲーション可能に関するガイドライン
7.3理解可能に関する原則
7.3.1 読みやすさに関するガイドライン
7.3.2 予測可能に関するガイドライン
7.3.3 入力支援に関するガイドライン

ウェブデザインの変化とウェブアクセシビリティ

2013年前後から、ホームページデザインの傾向が大きく変化し、日本を代表するサイトでも明確な変化を感じ取ることができるようになりました。
共通の変化として、ホームページのレイアウトの定型化・シンプル化、メニューデザインのシンプル化、白・グレー・青をベースとしたカラー選択などが見られます。
分かりやすい配置や特別な飾り等を使用しないシンプルなデザインで、メニュー文字などが見やすくなっているのが特徴といえます。


また、ウェブデザイン変化の大きな理由として社会的要求と発信効果の重視があげられます。
簡単に表現すると「アクセシビリティ」と「ユーザビリティ」を考慮した結果と考えられます。アクセシビリティは、高齢者・障害者を含む誰でも利用できることへの対応であり、ユーザビリティは使いやすく効果的であるということです。

色の使用(配色)について
基本配色は、3色系で 白黒系(白~灰色・黒)、青系(紺・青~水色)、茶系(濃い茶色~薄い・明るい茶色)です。
基本背景は、白又は薄い灰色で濃い灰色・黒の細い枠線の使用、プレートやアイコン等は、白黒系、青系、茶系の3色系の利用、赤や緑を使用する場合には必ず白背景又は白文字と合わせて利用されています。

この理由として、第一に考えられることは「カラーバリアフリー」です。
第二の理由として、「色の特性(効果)によるウェブカラーの対応」が考えられます。

操作時間が長くなると目に影響すること、また、視力への影響や色覚異常者の利用に対応していると考えられます。欧米の訴訟事情を考慮すると視力の悪化や色覚異常者の誤操作によるビジネス損失等の訴えにも万全を期しているように思えます。


カラーバリアフリーとは

「カラーバリアフリー」とは、標識や信号等の色の利用において色覚障害者に対応した色使いや識別できる対応をすることをいいます。
また、人間の目の網膜には3種類の錐体(すいたい)細胞があり、それぞれ赤、緑、青を感じる視物質を持っています。このうちどれかの機能が損なわれた状態を「色覚障害」といいます。

色の三原色には、「光の三原色」と「絵の具の三原色」とがあり、光の三原色は、以下のように赤・緑・青です。参考までに絵の具の三原色(CMY)は、印刷機に利用されているシアン(C)・マゼンダ(M)・イエロー(Y)です。


赤・緑・青
赤(R)と
緑(G)と
青(B)の光を「光の三原色」といいます。
光の三原色
テレビやパソコンのディスプレイのように発光によって色を表現しているものは、波長の違うR(赤)G(緑)B(青)の三色(光の三原色)の色光の組み合わせで色を表現します(加法混色)。光が全くない場合に“黒”になり、すべての波長が合成された時に“白”になります。太陽の光は、様々な波長の光が混ざっているため、白っぽく見えます。

「色覚障害」は、赤・緑・青のいずれかを感知できない障害で、色覚障害の人の大多数は、赤感受性の視物質の遺伝子に変異を生じた「第1色覚障害」(色覚障害全体の約25%)か、緑感受性の視物質の遺伝子に変異を生じた「第2色覚障害」(色覚障害全体の約75%)です。赤と緑の視物質はどちらが失われても似た症状になり、赤~緑の波長域で色の差を感じにくくなるため「赤緑色覚障害」と総称されています。 なお、「第3色覚障害」は、0.02%ということで稀ということです。


色覚障害のある人の割合

日本人の場合、大体、男性の20人に1人、フランスや北欧の男性ではもっと多く10人に1人、逆にアフリカ系の人では2~4%と少なくなっています。女性でも、日本では500人に1人、欧米では200人に1人くらいの割合で存在します。全世界の人口を65億人と仮定すると色覚障害をもつ人は約2億人、AB型の血液型の男性が世界では約2億人で大体その数に匹敵します。また、小中学校の40人学級(男子20人)の各クラスに必ず1人、男女100人の講演会場では2~3人、色覚障害の方がいるという計算になるため、ウェブアクセシビリティのJIS規格も制定されていることから無視できないと判断されます。


色覚障害における識別色について

図1と図2は、視覚障害者の識別色に関するイメージです。
図1のは「色覚障害でない」、は「第1色覚障害」(赤)、は「第2色覚障害」(緑)を表示しています。図1のの各色が色覚障害者ではの各色に見えることを表しています。
図2では、の地下鉄の路線図が色覚障害者ではのように見えることを表しています。ちなみに、全色覚障害の場合、は、白・黒になります。
つまり、色覚障害者においては、白~灰色・黒、紺・青~水色、濃い茶~薄い・明るい茶の色が識別できることになります。

色覚障害者の色の見え方

カラーバリアフリーとウェブカラーについて

ここで、色覚障害者が識別可能な色を利用すること自体がカラーバリアフリーとい うことではありません。前記のカラーの地下鉄路線図は、カラーバリアフリーに対応した事例であり、になっても白・黒になっても分かるように類似色のルートは、数字とアルファベットで区別できるようにルート上に記載する等工夫がされています。また、例えば、緑字に赤字で書くと見えなくなるため白地に色のついた字を書くか、色背景に白丸や白字を書くなどして最悪白黒になっても確認できるように工夫されています。カラーバリアフリーとは、色覚障害の場合でも内容が確認できるよう対応することを言います。前記ウェブサイトの事例をみると背景やメニュー等の基本色は、色覚障害者でも障害者でない場合でも同様に見えるように配色されているようです。

色覚障害における識別可能色・主な検索ボタンの配色

図3において、「ピンク」の黒字テキストの下に水色の四角が表示されています。これは、視覚障害の場合にピンクは水色に見えることを表示しています。視覚障害の場合、濃淡はありますが四角で表示されている色が識別色となります。 図4のはマイクロソフト社のBing検索、はamazonの検索、はGoogleの表紙検索で、はGoogleの内部検索、はYahooの表紙検索です。ほとんどの検索ボタンや文字・検索枠は、色覚障害における識別色を利用していることになります。


※上記の記載において、色覚障害の説明、割合、識別色についての文章及び図1及び図3は、神奈川県保健福祉部地域保健福祉課発行のカラーバリアフリー・色使いのガイドラインを利用しています。
詳細は、http://www.nig.ac.jp/color/guideline_kanagawa.pdfでご覧いただけます。


色の特性(効果)によるウェブカラーの対応

もともとコーポレートカラーが赤等の暖色系の色を使用している場合は別として、全体的に白の背景にプレートやメニューにおいて寒色系(青系・灰色・黒色等)を配置するデザインが主流となっています。
色には、色の三属性(色相・明度・彩度)の特性に基づいて「寒色・暖色」、「進出色・後退色」、「興奮色・沈静色」、「軽量色・重量色」といった分類があります。
色を12色の色相環で表示した場合における寒色・暖色・中間色の配置イメージが以下のイメージです。色の効果は、食欲や新鮮さ、時間・温度・重量・性別・遠近・心情等様々に表現されます。

暖色と寒色のカラー例

色は、時間の感覚にも影響し、赤、オレンジなどの暖色系は、人を興奮させ時間が過ぎるのが速く感じる効果があり、飲食店などの内装に使うと、客の回転がよくなるといわれています。 逆に、寒色系は、時間が遅く感じるので、理容室・美容室や銀行など人を待たせる場所に適しています。
これは、「ウェブユーザビリティ」にも関連しますが、寒色系のページ配色は落ち着いて見ることができ、滞在率を上げ多くのページを見てもらう効果があるということです。また、高齢者等視力が低下している人にも見やすいという効果があります。


ウェブデザイン変化による今後の傾向

今後のホームページのデザインは以下のような傾向になると判断されます。

  • ホームページを閲覧する機器へのデザイン対応
    ホームページは、パソコン版とスマートフォン版と携帯版があり、パソコン版はタブレット端末やタブレット型パソコンを考慮し、レイアウトやメニュー配置が見やすくシンプルになる。
  • カラーバリアフリーへの対応
    背景基本色は、白又は薄い灰色・薄い水色で、メニューやボタンには、白・灰色・黒及び寒色系の色、又は色覚障害でも確認できる色がメインで利用される。コーポレートカラー(会社イメージカラー)が、赤や緑等色覚障害で別の色に見える色を利用する場合には白と組み合わせて利用する。
  • デザイン性・広告効果のためのスライドショーの利用
    ホームページのデザインにおいて、デザイン性や広告効果を引き出す手法としてスライドショーが利用されます。
    今後、中小零細事業者のホームページでもプログラムによるスライドショーが重要な役割を果たすことになります。

@PAGE/@WEBシステムの対応

初期作成におけるシンプルなデザインやカラーバリアフリーについての色の採用は、企画設計の問題であり本項には記載しませんが、今回大幅なシステム改良を実施しており、アクセシビリティとユーザビリティの観点から、特に「新スマートフォン版システム」の本格的な導入をしました。
また、今後、パソコン版及びスマートフォン版のホームページの必須コンテンツ技術となるスライドショーを独自に「スライドアニメーション(簡易版)」と「スライドアニメーション(プロフェッショナル版)」として開発し、クラウドシステムとして@PAGE/@WEBに搭載しました。
今回、「新スマートフォン版システム」と「スライドアニメーションシステム」は、現時点で他に例を見ないレベルで作成されていますが、地域事業者様においても高度な技術を容易に利用できるようにシステム構築されています。


ウェブアクセシビリティ関連用語解説

※アクセシビリティ(英: accessibility)
高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合い。


※ユーザビリティ (英: usability)
特定の利用状況において、特定のユーザによって、ある製品が指定された目標を達成するために用いられる際の有効さ、効率、ユーザの満足度の度合い。(ISO 9241-11での定義)


※ユニバーサルデザイン(英: Universal Design、UD)
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン)をいう。 カリフォルニア州立大学のユニバーサルデザインセンター所長であったロナルド・メイス(1941-1998)が1985年に公式に提唱した概念。「できるだけ多くの人が利用可能であるようなデザインにすること」が基本コンセプトで、デザイン対象を障害者に限定していない点が、一般に言われる「バリアフリー」とは異なる。


※バリアフリー(Barrier free)
対象者である障害者を含む高齢者等の社会的弱者が、社会生活に参加する上で生活の支障となる物理的な障害や、精神的な障壁を取り除くための施策、若しくは具体的に障害を取り除いた事物および状態を指す用語である。


※ノーマライゼーション(英: normalization)
1960年代に北欧諸国から始まった社会福祉をめぐる社会理念の一つ。障害者と健常者とは、お互いが特別に区別されることなく、社会生活を共にするのが正常なことであり、本来の望ましい姿であるとする考え方。またそれに向けた運動や施策なども含まれる。