「アクセシビリティ」の優れたサイトとは～「ユーザビリティ」とは異なる視点～
最終更新日：2023/11/16
「ユーザビリティ」という言葉はwebサイト制作に関わったことのある方なら一度は耳にしたことがあると思いますが、「アクセシビリティ」という言葉は少し馴染みがないという方も多いのではと思います。
今回は「アクセシビリティ」の意味と重要性について紹介いたします。
「アクセシビリティ」とは
アクセシビリティ(accessibility)とは高齢者・障害者を含む誰もが、様々な製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合いを表す言葉です。
特に、webサービスにおけるアクセシビリティについては、Web Content Accessibility Guidelines（WCAG 2.0）というW3Cが定めたガイドラインが存在し、次の4つの原則を中心に構成されています。
知覚可能 － 利用者の感覚すべてに対して知覚できないものであってはならない。
操作可能 － インタフェースが、利用者の実行できないインタラクションを要求してはならない。
理解可能 － コンテンツ又は操作が、理解できないものであってはならない。
堅牢性 － 技術やユーザーエージェントが進化していったとしても、コンテンツはアクセシブルなままであるべきである。
http://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html
-参考 WCAG 2.0 解説書
よくユーザビリティとの違いを比較されますが、アクセシビリティはより広義な意味で使用されています。
「アクセシビリティ」の優れたサイトにするには
では具体的にアクセシビリティの優れたサイトを目指すためにはどのような事に気を付ければよいのでしょうか。
環境依存文字を使用しない
環境依存文字を使用すると、文字化けがおこったり、読み上げソフトで読み上げられなかったりする可能性があります。
できるだけ記号を使用しない
記号には、読み上げソフトで読み上げられる記号と、読み上げられない記号があります。また、以下の例のように意図したとおりに伝わらない事がありますので記号を使用する際は注意が必要です。
読み上げられない記号の例
※ ＄ ￥ （）
読み上げられる記号の例
〜 /（〜ぶんの） % 〒
意図したとおりに伝わらない例
※1 → 「いち」
￥300 →「さんびゃく」
（株）スターティアラボ → 「かぶすたーてぃあらぼ」
300km → 「さんびゃくけーえむ」
ＭＯＮＫＥＹ → 「えむおーえぬけーいーわい」（全角だと、アルファベットをバラバラに読まれる事があります。）
2017/1/1 →「いちぶんのにせんじゅうなないち」
不用意に改行、スペースをいれない
読み上げソフトでは、改行、スペースを区切り位置と判断します。
文中に不用意に改行やスペースをとった場合、意図したとおりに伝わらない事があります。
特に、表 のタイトルのバランスをとるためにスペースを使用しているサイトをよく見かけますのでサイト作成者は注意が必要です。
良い例
| 企業名 | スターティアラボ株式会社 |
|---|---|
| 住所 | 〒163-0919 東京都新宿区西新宿2-3-1新宿モノリス19階 |
悪い例
| 企業名 | スターティアラボ株式会社 |
|---|---|
| 住 所 | 〒163-0919 東京都新宿区西新宿2-3-1新宿モノリス19F |
アイコンやグラフは色分け以外にも差をつける
色覚障がい者が見ても、意味を読み取る事ができるようにアイコンやグラフを設置する際は以下の事に注意しましょう。
アイコンの場合
伝えたい内容の強弱や分類は色分けだけでなく、アイコンのかたちを変えるなどの工夫が必要です。
グラフの場合
色合いが近いグラフを並べると色覚障がい者にとっては識別がしづらくなります。
全く別の色を使用したり、少し装飾を加えたりして別のグラフである事をわかりやすくしましょう。
また、グラフ画像を使用する際はalt属性に詳しい内容の記述を忘れず行いましょう。
まとめ
アクセシビリティとは、誰もが支障なく使用できることです。
ユニバーサルデザインやバリアフリーという言葉が一般的に認知され、あらゆる業界で設計段階から取り入れられるようになった今、webサイトも同じくアクセシビリティを意識したサイト設計を行うのが当たり前になる日が近い将来くると考えています。
皆様もぜひこの機会に自社サイトのアクセシビリティを見直してみてはいかがでしょうか。
