GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. デザイン領域 >
  7. ユーザー・エクスペリエンス User Experience ‐誰にでも使いやすいWebデザイン‐

誰にでも使いやすいWebデザイン

富士通アクセシビリティ・アシスタンス

概要

インターネットが普及している昨今、身体に障害がある方や高齢者も含む様々な方もWebサイトを利用しやすくなるような配慮が強く望まれています。アクセシビリティ(使いやすさ)は、Webサイト構築に今まで以上に欠かせないものになりました。デザイン活動の中でアクセシビリティ診断ソフトウェアツール群「Fujitsu Accessibility Assistance」を開発しました。

FAA_top_new

デザインコンセプト

ウェブ・アクセシビリティを高めるには様々な知識やノウハウが必要になります。しかし、実際にウェブを作成している方々にはそのノウハウは十分に広まっていません。富士通アクセシビリティアシスタンスはそれらのノウハウを「簡単に利用できること」を一つの目標に開発し提供しています。「世界中のウェブサイトが誰にでも見やすいサイトになること」がデザイナーの想いです。

デザインのこだわり

できるだけ多くの方に使いやすいサイト作りのお手伝いをしたいと考え、富士通アクセシビリティアシスタンスをツール群として公開しています。 アシスタンスの各ツールを活用することで、以下の問題点を簡単に見つけることができます。

■ 色の組み合わせ

文字色と背景色について
文字色と背景色コントラスト(明度差など)が低いほど、文字は読みにくくなります。弱視のユーザーや高齢者の方にも見やすくするため、明度差を十分に確保することが必要です。
色覚障害のあるユーザーは"赤と緑"、"黄と青"の組み合わせ、高齢者の方は"白と黄"、"青と黒"、"青紫と黒"の組み合わせを識別するのが困難な場合があり、色の組み合わせにも配慮する必要があります。

× 悪い例 (コントラストが低い)

mondai1

○ 良い例 (コントラストが高い)

mondai2

図やグラフの配色について
色覚障害のあるユーザーや高齢者は、色の違いを把握することが困難な場合があります。またウェブページを白黒印刷した時に、色の違いを把握することが困難な場合もあります。図やグラフの配色を正しく選ぶことやグラフに引き出し線をつけ、領域の違いを表現することがが重要です。

× 悪い例(色だけで円グラフの領域の違いを表現)

glaph1

○ 良い例(引き出し線などをつけて、円グラフの領域の違いを表現)

glaph2

■ 音声読み上げ
音声ブラウザでページを利用している方のために、正しい読み上げの配慮が必要です。日付を利用する時は「yy/mm/dd」という文字列は、正しく読みあげてくれないため、「yy年mm月dd日」と表記することが必要です。また、通貨を表記する時も文字列に「¥」を使うと金額として正しく読みあげないため、「円」を使うことで正しく情報を伝えることができるようになります。

× 悪い例 (『2004218』と読み上げる)

mondai4

○ 良い例 (『2004ネン2ガツ18ニチ』と読み上げる)

mondai3

× 悪い例 (『14720』と読み上げる)

mondai6

○ 良い例(『14,720エン』と読み上げる)

mondai5

■ 画像のalt属性
画像にカーソルを合わせると、白色の帯で画像の説明文(alt属性)が出てきます。画像にalt属性を付けないと、ブラウザで画像を非表示に設定しているユーザーは、画像の内容を把握することができません。また、音声ブラウザは画像の代わりにalt属性を読み上げるため、alt属性がないと画像内容を把握できません。このように多くのユーザーに正しい情報を的確に伝えるためにalt属性を付けることが重要になります。

× 悪い例

alt1

○ 良い例

alt2

ここで紹介したものは一例ですが、他にもこのようなことを見つけることが出来ます。

  • テキスト
  • リンク
  • テーブル
  • フォーム
  • 特殊な技術やプラグイン
  • ナビゲーション
  • 文章構造とスタイルシート