2017年02月20日
デザインする上でのアクセシビリティとは？
今回はデザインする上でどのようにしてアクセシビリティを確保するのか、というお話をしたいと思います。
アクセシビリティに配慮する、というとどうしても、デザインのトレンドをまったく取り入れられない、そんなイメージがあります。実際はそんなことはありません！
どのような対応をしていけばいいか、ご説明いたします。
全体を把握しやすいデザイン
見えやすく、読みやすい
ページ全体を見えやすくする場合、何に気を付けたらよいのでしょうか？
全体の色や写真、それ以外にそのサイトのイメージを決めるのはフォントです。最近はWebフォントを利用するサイトも増えていますね。
サイトの用途によって使用するフォントは変わってきますが、テキストが多い場合は字が詰まって見えたり漢字が読みにくいフォントは避けたいところです。
それぞれの内容に沿って、文節ごとにマージンをとったり、行間をしっかりとって読みやすいようにしましょう。
見出しの役目
見栄えのいいデザインが良いデザインではありません。デザインには設計する、という意味もあります。
見た目だけではなく構造もしっかりしていることが大事です。建物と一緒ですね。
わかりやすい項目が見出しになっているか、そのページの内容に沿った見出しの内容になっているか、ということも情報取得するには重要になってきます。
見た目や文言が見出しだと一目瞭然にわかれば、ぱっとページを見ただけで情報が入ってきます。文言に限っては、音声で情報取得しているスクリーンリーダー利用時でも同様です。
使う人にやさしいデザイン
読む速度、見たい箇所は人ぞれぞれ
カルーセルを使用しているサイトは多く、クルクルと動いているのを見かけますね。しかし...見たい箇所が過ぎてしまう！ちゃんとみたいのに！人によって読み取れる時間は異なります。
そんな時のために一時停止ボタンをつけます。
トグルで再生ボタンにしておけば、必要に応じて動きやスクロールを再開することもできます。
リンクがリンク、とわかるように
そんなの当たり前！とお思いになるかもしれませんが、意外とリンクとわかるものって少なくないですか？また、見たいキーワードのリンクから来たのに、内容の異なるリンク先に着いたことありませんか？
何も装飾のないテキストの中に下線のリンクテキストがあれば、それがリンクということがわかりますね。しかし、装飾のないテキスト中で下線なしのリンクテキストをマウスオーバーした時に色が赤や青に変化したとします。この場合、テキストとリンクテキストのコントラスト比が不足していたり、似ている色の場合は色の変化はわかりません。
リンクテキスト以外にもバナー画像など、フォーカスインジゲーターやフォーカス移動にともなう形の変化で見た目が変わることで、拡大鏡での使用やキーボード操作で閲覧している人もリンクがどこに移動したのかわかるようになります。
まとめ
- テキストが多いページでは、文節や行間を調整し、読みやすくする。
- コントラストを保って文字を見えやすくする。
- 構造をしっかり作ることでページの内容を把握してもらいやすくなる。
これだけでも誰でもページにアクセスしやすくなります。
たくさん情報があってもアクセスして情報を読み取れなければ、意味がありません。
伝えたい情報は確実に届けるようにしましょう！
関連するJIS X 8341-3:2016の達成基準
上で述べてきた中で関連する達成基準をご紹介します。クリックするとW3CのWCAG 2.0解説書の各ページに飛びます。
全体を把握しやすいデザイン
関連するJIS X 8341-3の達成基準
- 達成基準 1.4.1 色の使用
- 達成基準 1.4.3 コントラスト (最低限)
- 達成基準 2.1.1 キーボード
- 達成基準 2.2.2 一時停止、停止、非表示
- 達成基準 2.4.4 リンクの目的 (コンテキスト内)
- 達成基準 2.4.7 フォーカスの可視化
アルファサードのWebアクセシビリティの取り組み
弊社ではWebアクセシビリティ向上への取り組みとして、無償ツールの提供の他、Movable TypeやPowerCMSのプラグインとしてJIS X 8341-3への適合を支援する PowerCMS 8341 の開発や提供を行なっています。今後もよりよいWeb、誰もが利用できるWebの普及に微力ながら貢献していきたいと思います。
参照URL
- カテゴリー
- PowerCMS 8341
- その他
コメントを投稿する