COLUMNお知らせ・コラムSCROLLホームお知らせ・コラムWEBデザインを行う際に意識すべきウェブアクセシビリティのポイントALLすべてNEWSお知らせMARKETINGマーケティングコラムDESIGNデザインコラムMANUALマニュアル・資料RECRUIT採用情報DESIGNWEBデザインを行う際に意識すべきウェブアクセシビリティのポイント2023.03.30デジタル庁では、「誰一人取り残されない、人に優しいデジタル化」というミッションを掲げてウェブアクセシビリティ向上のための取り組みを推進しているため、ホームページを制作する際はユーザーの利用環境や年齢層、障害の有無にかかわらず、誰もが快適に閲覧・使用できるようなデザインであることが望ましいと考えられています。そのため、WEBデザイナーはデザインにこだわるだけでなく、ウェブアクセシビリティを向上させるための様々なポイントをおさえた上でデザインを制作するべきであると言えます。今回は、WEBデザインを行う際に意識すべきウェブアクセシビリティのポイントを8つご紹介します。今回のまとめ適切なコントラストの配色を行う屋外で閲覧する場合や、色盲のユーザー・年齢層の高いユーザー等が閲覧する場合でも問題なく文字を視認できるよう、文字色と背景色のコントラスト比は最低でも4.5:1以上である必要があります。文字が読みづらいと感じるユーザーをゼロに近づけるために、文字色と背景色のコントラスト比が4.5:1を下回らないように注意してデザインを行いましょう。サイズが大きいテキスト(細時の場合は29px以上、太字の場合は24px以上のテキスト)や装飾としてのテキスト等はこの限りではありません。コントラスト比は自ら計算することも可能ですが、効率良く制作を進めるためにも以下のようなチェックツールを用いて確認すると良いでしょう。色や太字など単一の表現のみで情報を伝えない色や太字などの単一の表現のみでコンテンツを強調したり優先順位を付けるデザインは避けましょう。お問い合わせフォームにおいて「赤文字の箇所は必須項目です」と記載したデザインにしてしまうと、色盲や視覚障害を持つユーザーが正しく認識することができません。仮にホームページが白黒になった場合でも誰もが情報を正しく理解できるようなWEBデザインを行いましょう。下線のデザインはテキストリンクと勘違いしてしまうユーザーもいることが想定されるため、テキストリンクと混同してしまうようなデザインは避けましょう。テキストの拡大時の表示を考慮する端末やアプリ、ブラウザの設定から文字のサイズが200%に変更された場合においても、文字が重なって見えづらくなってしまわないようにレイアウトを考慮しましょう。文字拡大等の支援が必要なユーザーのほとんどが端末やアプリ、ブラウザから設定を行っているため、ホームページ上にも同様の機能を設置してしまうと過剰対応となってしまいます。デジタル庁でもホームページ上に文字サイズの変更機能や配色変更機能、読み上げ機能を設置することは推奨していないため、便利だと思っても過剰に機能を設置せず、既存機能を使用した場合にも見やすいホームページを心がけてデザインを行いましょう。スクリーンリーダーに対応した構成で制作する視覚障害があるユーザーは、音声読み上げ機能であるスクリーンリーダーを使用することがあります。スクリーンリーダーは、文字間隔の調整で空白を使用している場合に正しく読み上げることができないおそれや、コンテンツの順序によってはユーザーが情報を正しく理解できないおそれがあります。スクリーンリーダーは基本的には左上から右下へ順に文字を読み上げるという仕組みを念頭に置き、読み上げた場合でも情報を正しく理解できる順序でコンテンツを配置しましょう。すべてのリンク名が「詳しくはこちら」というように同一の場合、ユーザーはどのリンクがどのページへのリンクなのか判断しづらくなってしまいます。リンク先のページタイトルをリンク名にするなど、リンク先の内容を一目で判断しやすいリンク名でデザインを行いましょう。動きがあるコンテンツはユーザーが操作できるようにするスライドショーやカルーセルなどの自動で切り替わるコンテンツがある場合、ユーザーが閲覧中にもかかわらずコンテンツが勝手に切り替わってしまい、閲覧を妨げてしまうおそれがあります。そのような事態を避けるために、スライドショーやカルーセルを設置する場合には、ユーザーが自ら自由に操作できる矢印ボタンや一時停止機能を設置するよう心がけましょう。ナビゲーションに一貫性を持たせるページ毎にナビゲーションの位置や配列が異なる場合、ユーザーはページ遷移のたびに困惑してしまい、操作性が損なわれます。ページ名の表記が統一されていない場合も同様に混乱を招くおそれがあるため、特別な事情がない限りナビゲーションはどのページでも同じ場所に、同じ配列、同じページ名で表示するようにしましょう。同様の機能を持つコンテンツはデザインを揃える先ほどの項目と似ていますが、内部リンクボタンやPDFダウンロードボタン、アイコンやラベルなど、同様の機能を持っているにもかかわらずデザインが異なる場合、ユーザーはデザインだけでなく機能も異なるのではないかと混乱してしまうおそれがあるため、同様の機能を持つコンテンツを異なるデザインにすることは避けましょう。同様のデザインにすることは混乱を避けるだけでなく、ユーザーが機能を学習して情報を理解しやすくなるというメリットもあるため、同様の機能を持つコンテンツはどのページにおいても必ずデザインを揃えるようにしましょう。袋小路に陥らせないキーボードのみで操作を行う際に、一度フォーカスしてしまったらそのコンテンツから抜け出せなくなってしまうことをキーボードトラップと言います。そのような現象が起こるようなことを避けるために、モーダルウィンドウなどを設置する際は、キーボードで操作を行う場合でも閉じることができるように、必ず閉じるボタンを設置したデザインで制作しましょう。今回のまとめブランドサイトやECサイト、採用サイトなどは、ホームページにアクセスするユーザーの層がある程度絞り込まれますが、市役所や銀行のホームページなどの幅広い層のユーザーがアクセスすることが想定されるホームページでは、特にウェブアクセシビリティを意識して制作することが求められます。ホームページを制作する際はデザインにこだわるだけでなく、今回ご紹介した8つの内容を意識してデザインを行いましょう。(WCAG)などを日常的に確認することをお勧めします。デザイナーN.H.大学を卒業後、新卒で株式会社オンカに入社し、WEBデザイナーとしてコーポレートサイトやポータルサイト、採用サイト、ECサイト、LPなど様々な種類かつ多種多様な業種のホームページ制作にオールマイティに対応。現在は、執行役員・デザイナーチームのマネージャーとしてWEBデザインのさらなる品質向上に尽力している。