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