アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

障がいとは何か?特性を知り、実例で学ぶウェブアクセシビリティ

障がいとは何か?特性を知り、実例で学ぶウェブアクセシビリティ

「障がい」という言葉は一般的に使われているものですが、その解釈は見る角度によって大きく異なります。

この記事では、今後ウェブアクセシビリティを考える上で重要となってくる「障がい」の捉え方についてまとめました。

前回に引き続き、今回も基本的な概念や枠組みについての説明になります。
これらの基礎をしっかり理解しておくことは、適切なウェブアクセシビリティ対応を行うために不可欠です。

この記事を通じて、しっかり確認していきましょう!

 

1.障がいとは?

blank

「障がい」というと何を思い浮かべますか?

一言で障がいと言っても、医学的な捉え方、法律的な捉え方、格差や差別解消のための捉え方などたくさんの視点があります。
そして、その視点によって見え方ががらりと変わってきます。

今後ウェブアクセシビリティについて考えていく上で、障がいの捉え方というのはかなり重要になってきます。

ここでは障がいとはそもそもどういったものであるのかを考えてみたいと思います。

 

1-1.「医学モデル」と「社会モデル」

現代では障がいを「医学モデル」「社会モデル」という2つの観点から考えることが主流となっています。

障がいというものは長い間、身体的・精神的な不全のことで個人の問題だと考えられてきました。
健常か否か、正常か否かという二極的な考え方が根底にあり、障がいは治療を行い「健常・正常」な状態に戻す、またはそれに近づけることを目指す必要があると思われてきたのです。

医学モデルとは、この従来の考え方に通ずるものです。
障がいを個人の問題として捉え、治療やリハビリを通じて健常・正常な状態に戻す、または近づけることを目指します。
障がいの原因や解決策は主に医学的な観点で捉えられ、個人の持つ問題を改善するために、医療的な治療やアプローチが必要とされます。

一方、社会モデルとは、障がいを個人の問題ではなく、社会的な環境や制度の問題として捉えます。
障がいと呼ばれるような心身の働きの違いや不全があったとしても、その違いを考慮して社会側が環境を用意すれば不自由なく生活できるという考えから、生活のしづらさを生み出している社会側に問題があるとしています。

これは比較的最近に生まれたもので、この考え方が広まったのは1980年代だと言われています。

また、2016年に施行された「障害者差別解消法」という法律は、この社会モデルの考え方に基づいています。
参考:首相官邸ホームページ内のPDF資料 誰もが暮らしやすい社会を目指して~心のバリアフリーの理念を理解する~

少し難しい話となりましたので、簡単に例えてみます。

歩行障がいで階段を上ることが困難なAさんがいます。

この時医学モデルの視点で考えると、
「歩行障がいはAさんの問題だから、リハビリをして歩行能力を上げて階段を登れるようにしよう」
となります。

一方、社会モデルでは
「環境が整備されていないのが問題だから、歩行障がいがあるAさんでも楽に上がれるようスロープやエレベーターを設置しよう」
となります。

これが、医学モデルと社会モデルの考え方の違いです。

この2つの考え方は、どちらが正しい、どちらが間違っているというようなものではありません。
医学側の視点・社会側の視点という別の視点から見た2つの概念を組み合わせることで、より障がいというものへの理解を深めることができるようになったのです。

さらに、この2つの考え方を統合させた考え方がWHOより示された「ICF」です。
正式名称は「International Classification of Functioning, Disability and Health」といい、日本では「国際生活機能分類」と呼ばれます。
その人の置かれた状況を理解して生活の質を上げるためのサポートを提供する上で、非常に有効な指標となります。

ここまで見ると、障がいと一言に言っても様々な要因が相互に関わっていることが分かるかと思います。

 

1-2.障がいの捉え方とウェブアクセシビリティ

ウェブアクセシビリティでは「誰もが使いやすいウェブコンテンツ」を目指しています。
それはまさに社会モデルの考え方に基づいていると言って良いでしょう。

人々の違いを考慮してウェブ側がアクセシビリティを確保すれば、利用者は不自由なくウェブを使用することができます。
ですから、ウェブ上の障がいはウェブ側の問題なのです。

ただ、ウェブアクセシビリティに対応する上で医学モデルの視点も重要となります。
どういった病気、障がいを抱えている人がいて、それはウェブ利用する上でどのような不便を生み出すのかを理解しないと、適切に対応することができないからです。

医学モデルの視点からそれぞれの障がいや病気、症状を知り対応方法を考え、社会モデルの視点で誰にとっても使いやすいようウェブアクセシビリティの向上を図っていくことが大切だと考えられます。

 

2.障がいの種類や特性

世の中には非常に多種多様の障がいが存在します。
ウェブアクセシビリティへの理解を深めるためにも、障がいに関してまとめておきましょう。

また、障がいの種類と特性に加え、ウェブコンテンツの使用状況、よく利用される支援技術についても簡単に解説します。

※この説明はウェブアクセシビリティを深く理解することを目的としており、医学的な視点からの厳密な説明を述べるものではありません。ご了承ください。

 

2-1.視覚障がい

視覚障がいは、視力や視野が損なわれて日常生活に困難が生じる状況を指します。
これは、遺伝や病気、事故など様々な原因で起こることがあります。

視覚障がいは個人によって程度が異なり、全く光を感じることができない全盲の状態から、視野が限定されたり視力が非常に弱い状態まで様々です。
程度や状態によって、必要な支援やアクセシビリティ対応は大きく異なります。

 

2-1-1.全盲

医学的には、視力が全くなく光を感じることもできない状態を指します。
ただ、光を感じたり色を感じることはできるが視力が非常に低く、視覚以外の感覚を頼りに生活を送らなければいけない人を「社会的全盲」などと表現することもあります。

いずれの状況でも、文字を読んだり写真を見たりして情報を得ることが困難なため、ウェブコンテンツを利用する際にはスクリーンリーダーや点字リーダーを使用して、視覚以外の方法で情報を得ます。

また、マウスを使った操作も難しいため、基本的にはキーボードを使ってデバイスを操作します。
PCだけでなく、タブレットやスマートフォンにもキーボードを接続して使用することがあります。
さらに、音声入力のような他の技術も利用してデバイスを操作する場合もあります。

 

2-1-2.弱視・ロービジョン

視力が低く、眼鏡やコンタクトレンズを使用しても矯正に限界がある状態を指します。
他にも、視野が狭かったり、まぶしさを感じやすかったり、ぼやけて見えるなど、人によって見え方に幅があります。

全盲とは違いPCやタブレット、スマートフォンの画面を見て情報を得たり、マウスやタッチスクリーンを使用して操作をすることが可能です。

ただし、見えやすいように状態に合わせてデバイスを調整することが必要となります。
具体的には、文字拡大や画面拡大、マウスポインタ―の拡大、ダークモードの使用などです。

また、場合によってはスクリーンリーダーを併用することもあります。

 

2-1-3.色覚特性

人間の目には「錐体」という細胞があり、これが光を感知して脳に情報を送ることで色を認識することができます。
また、錐体には3つの種類があり、それぞれ赤、緑、青の光に強く反応するようになっています。
このうちのどれか、またはいくつかが機能していない場合、色の感じ方に違いが現れます。

このことを色覚特性と言います。

その人の持つ色覚特性によって見え方は様々ですが、赤と緑、青と黄色がそれぞれ同じように見えたり、中にはほとんど白黒状態に見える場合もあります。

この場合、強調表示やリンクが見えづらかったり、グラフの凡例の見分けがつかなかったりします。
そのため、OSのカラーフィルターや色補正モードなどを使用して色の表示を変更してウェブコンテンツを利用します。

 

2-2.上肢障がい

上肢障がいとは、病気や事故など様々な原因により腕、肩、手、指などが動かない、動かしづらいなどの状態にあることを指します。

細かな力加減ができない、震えがあり思い通りに動かせないといった理由でマウスやキーボード操作が困難な場合、専用の代替マウスやキーボードなどを使用して操作します。

また、人によっては指や腕が欠損していたり、麻痺があるなどの理由から上肢を全く使用することができない場合もあります。
この場合は口に咥えてキーボードやタッチスクリーンを操作するスティックや、目線を使用してマウスの操作を再現する機器を使用して操作を行います。

他にも音声コントロールや専用スイッチの使用など、各々の状態に合わせて様々なツールを使用します。

 

2-3.聴覚障がい

聴覚障がいは、聴覚の機能が部分的または完全に失われている状態を指します。
先天的なものや後天的なもの、または加齢によるものなど様々な原因で発生することがあります。

程度は人によりかなりの差があり、補聴器を付けても全く聞き取れないという状態から、多少の聞こえづらさはあるが補聴器や口話を補助として音声でのコミュニケーションが取れる状態の人もいます。

音声付き動画やラジオのような音声コンテンツには字幕を付け、視覚から情報を得られるようにする必要があります。

また、より正確に情報を伝えたい場合は、手話ニュースのように手話通訳を付けることも考えられます。
しかし、後述のように聴覚障がい者なら誰でも手話を使えるわけではないことに注意が必要です。

さらに、通知音が聞こえない場合も十分に考えられます。
なにかを通知するシステムが存在するコンテンツの場合、音だけではなく画面の表示などで通知を知らせる必要があります。

最近では、通知が表示されると画面が点滅する、端末についているライトが点滅する、手動で閉じるまで通知が消えないなど、視覚的に通知を知らせる仕組みが多くあります。

 

2-3-1.ろう(聾)

生まれつき、または幼少期に聴力を失った状態を指します。
音声言語を獲得する前に失聴している場合が多く、手話が主なコミュニケーション手段となります。

母語は手話であり、日本語は第二言語となります。
そのため字幕を付けていたとしても、日本語による複雑な表現や曖昧な表現が多いと伝わらない・伝わりにくいことがあります。

※日本で主に使用される手話には、日本手話と日本語対応手話の2種類がある。ろう者が使用することの多い日本手話は、日本語とは全く別の独立した言語であり、文法構造などが異なる。

 

2-3-2.中途失聴

元々聴力があった人が、途中で失聴する状態を指します。
中途失聴の場合母語は日本語であり、手話は第二言語となります。
また、口話をメインにしている場合もあり、中には手話が全く分からない中途失聴者もいます。

 

2-3-3.難聴

聴力が低い状態を指します。
全体的にあまりよく聞こえないという場合や、低い音は聞こえるが高い音は聞こえないという場合など、人によってどのような聞こえづらさがあるのかに差があります。

手話や口話を使用する場合もありますし、中には補聴器を付ければある程度問題なく日常生活を送れるという場合もあります。

 

2-4.精神障がい

精神疾患により日常生活や社会参加に困難をきたしている状態のことを指します。
統合失調症、気分障がい(うつ病、躁うつ病など)、神経症(パニック障がいや強迫性障がいなど)、発達障がい(学習障がい、自閉症スペクトラム障がいなど)、知的障がいなどが例として挙げられます。

これらの症状や状態は多岐にわたりますが、記憶力、注意力、思考力の低下などが見られることがあるため、分かりやすく使いやすいウェブコンテンツを制作することが重要となります。

 

2-5.どのようなことが困難なのか?

ウェブコンテンツを使う上で発生しやすい困難の一部を、障がいごとにまとめます。

 

2-5-1.視覚障がい

  • キーボードのみで全てが操作できるようになっていない場合、コンテンツを使用できないことがある。
  • 適切な構造のHTML(セマンティックHTML)でない場合、スクリーンリーダーがコンテンツを正しく読み取れない可能性がある。
  • 文字やイラストなどのコントラストが低い場合、読み取ることが困難な場合がある。
  • 代替テキストが用意されていないと、写真や図などの内容を把握することができない。

 

2-5-2.上肢障がい

  • キーボードや専用デバイスで操作できないコンテンツは利用できないことがある。
  • 細かな操作や素早い操作が要求されるコンテンツは利用できない可能性がある。

 

2-5-3.聴覚障がい

  • 字幕や手話通訳がない音声付き動画や音声コンテンツの利用が困難である。

 

2-5-4.精神障がい

  • ナビゲーションやレイアウトが複雑すぎたり、一貫性がないと理解が困難な場合がある。
  • スライドショーなどの動き続けるコンテンツがあると注意がそれてしまい、他のコンテンツに集中することができない。
  • フォームなどのエラーが明確に表示されていない場合、解決が困難な場合がある。

 

2-6.障がい者以外にとってのウェブアクセシビリティ

上記の内容を見ると、「ウェブアクセシビリティ=障がい者への対応」というように捉えられるかもしれません。
しかし、障がいがある人だけでなく、高齢者、怪我などで一時的に身体の機能に制限がある人もウェブコンテンツの利用時に同様の困難に直面する可能性があります。

例えば、加齢によって視力が衰えれば、小さい字やコントラストの低い字は見えにくくなる可能性があります。
他にも高齢者によく見られる症状として手の震えがありますが、この震えが原因でマウスを細かく動かすことが難しくなるかもしれません。

高齢者でなくても、骨折により利き手が使えない状態になった場合、マウスやキーボードを使った操作がいつもよりも難しくなるでしょう。
イヤホンを忘れたために電車などの公共交通機関で、音声付き動画を音なしで見るような状況もあり得ます。

このように、上で述べた障がい特性に対する配慮は、障がいを持つ人や高齢者だけでなく様々な人に恩恵をもたらします。
そのため「ウェブアクセシビリティは障がい者や高齢者向けの対応」という認識ではなく、「全ての人にとって使いやすいウェブコンテンツを目指すもの」と理解し、実践することが必要なのです。

ウェブアクセシビリティ対応のホームページ制作

 

3.チャコウェブホームページのウェブアクセシビリティ対応

ここまで、ウェブコンテンツの利用における一般的な課題と使いづらさの問題点について見てきました。

ここからは、全ての人にとって使いやすいウェブコンテンツを実現するために、チャコウェブサイトで実際に行っているウェブアクセシビリティ対応をご紹介します。

なお、ここでご紹介しているのは実際に行っている対応のうちのほんの一部です。
ウェブアクセシビリティに関連する他の重要な事項については、次回以降の記事で詳しくご紹介する予定です。

 

3-1.キーボード操作可能

以下の動画は、チャコウェブホームページをTabキーだけで移動したときの動きです。
他にも、サイト全体を通してボタンやリンク、お問い合わせフォームなど、利用者による操作が必要な部分は全てキーボード操作可能になっています。


 

3-2.適切なHTMLで記述

意味的に、そして構造的に適切なHTMLでマークアップすることを心がけています。

下の画像はThe W3C Markup Validation Serviceというサービスで、トップページのチェックを行った結果の画像です。
エラーや警告などが表示されていないことが確認できます。

blank

※一部ページでまだinformation表示が出るところがあり、現在改善中です。

 

3-3.文字やアイコンのコントラスト

装飾目的のものを除き、コントラスト比4.5:1以上になるように制作しています。

↓トップページで使用されている見出しのデザイン。背景色と文字のコントラスト比が19.78:1になっている。

トップページで使用されている見出しの画像と、その見出しに使われている色のコントラスト比をツールで計算したときの画像が並んでいる

↓サイト全体で使用されているボタンのデザイン。背景色と文字のコントラスト比が6.57:1になっている。

サイト全体で使用されているボタンの画像と、そのボタンに使われている色のコントラスト比をツールで計算したときの画像が並んでいる

 

3-4.代替テキストの用意

装飾目的の画像(アイコンなど)には、テキストリーダーがファイル名を読み上げるのを防止するために全てalt=””を設定しています。

以下のような制作実績を掲載している部分の画像は、alt=”ホームページの画像 白衣を着た2人の女性の写真がトップページになっている”のように、どのようなトップページになっているのかを説明する文章を入れています。

これは、チャコウェブで制作したホームページの雰囲気を感じてもらいたいという意図で設定しています。

チャコウェブサイトのトップページ、制作実績を掲載している部分のスクリーンショット

 

3-5.分かりやすいレイアウト

情報を整然と並べ、また見出しなども統一されたデザインにすることで一貫性のある作りにしています。
下の画像は、チャコウェブホームページの現在のトップページデザインです。

チャコウェブサイトのトップページ全体のスクリーンショット

 

3-6.動き続けるコンテンツがない

チャコウェブホームページでは、スライドショーのような動き続けるコンテンツを設置していません。

 

3-7.フォームエラーを明確に表示

こちらはお問い合わせフォームの画像です。

何も入力せずに送信しようとするとエラーが表示されるのですが、「エラーです」「入力内容に不備があります」といったあいまいな表現ではなく、明確にエラーの内容を表示するようにしています。

チャコウェブサイトのお問い合わせフォームにエラーが表示されているときのスクリーンショット。「メールアドレスが入力されていません」「お電話番号が入力されていません」など、エラーの内容が明確に表示されている。

 

4.まとめ

障がいの基本的な定義、障がいの種類、そしてウェブコンテンツの利用における具体的な課題と、チャコウェブホームページで実際に行っているアクセシビリティ対策の一部をご紹介しました。

前回と今回のウェブアクセシビリティブログは、全体的な理解を深めるための前提となる事項についてお話ししました。
ウェブアクセシビリティの概念や、それを実現する上で考慮すべき障がいや状態について、少しでもご理解いただけたでしょうか?

次回からはより実践的な内容をご紹介する予定ですので、引き続きご覧ください!


          この記事を書いた人        
山口 ウェブアクセシビリティマネージャー
株式会社Cyber Cats ウェブアクセシビリティマネージャー。
コーダー、ディレクターを経験する中で「使いやすいホームページ」の重要性を強く感じ、ウェブアクセシビリティ向上に取り組み始めました。
最初は個人的に行っていた活動でしたが、少しずつチームに広がり、現在は組織全体の活動となっています。
自社ホームページのウェブアクセシビリティ監修の他、社内勉強会を開いてメンバーへの情報共有や意見交換を行っています。
また、ウェブアクセシビリティをテーマにブログ執筆を行っており、基本原則の解説や自社ホームページを例に挙げて改善例の紹介などを行っています。
最近はアクセシビリティに関わる施設への取材も開始し、そこで得た経験からウェブアクセシビリティを考える活動を行っています。
詳しいプロフィールはこちらから
山口 ウェブアクセシビリティマネージャーのXはこちら
SNSでフォローする