ウェブサイトをよりアクセシブルにする5つ方法

ウェブサイトのアクセシビリティは、2021年の最大のトレンドのひとつです。ここでは、サイトをよりアクセシブルにし、すべての人のためにウェブサイトのアクセシビリティを向上させる方法をご紹介します。

1.ウェブアクセシビリティとは?

インターネットは、生活様式を完全に変えてしまいました。人付き合い、仕事、買い物、さらには遊びの方法まで、ウェブは革命的な進歩を遂げています。

そのため、ウェブは、経歴、言語、場所、身体的・精神的能力に関係なく、すべての人に開かれたものであるべきです。

ウェブ・アクセシビリティ運動は、この考えを支持し、障害者がインターネットにアクセスできるようにすることに重点を置いています。これには、技術にアクセシビリティを組み込むことや、美しいデザインを変更することが含まれます。

World Wide Web Consortium (W3C)は次のように説明しています。

「Webは、多くの人が物理的な世界で直面するコミュニケーションや交流の障壁を取り除くため、障害の影響はWeb上で根本的に変わります。しかし、Webサイト、アプリケーション、テクノロジー、ツールのデザインが悪いと、Webの利用から人々を排除する障壁を生み出してしまいます。」

ウェブアクセシビリティは、以下のようなあらゆる種類の障がいや障害に適用されますが、これらに限定されるものではありません。

  • 身体的
  • 視覚障害
  • 音声
  • 聴覚
  • 神経学的
  • 認知

アクセシビリティへの関心が高まるにつれ、ウェブデザインにおいてもアクセシビリティが重要な位置を占めるようになってきました。すべてのウェブサイトオーナーが、ウェブサイトを構築したり追加したりする際に考慮すべきことだと考えています。

2.ウェブサイトをよりアクセシブルにする5つの簡単な方法

以下のヒントはすべて、アクセシビリティのベストプラクティスに従ったものであり、かなり簡単に実行できるものです。ウェブサイトのアクセシビリティを向上させる5つの方法をご紹介します。

2.1. アクセシビリティに対応したCMSを利用すること

ウェブサイトをよりアクセシブルにするための最初の方法は、アクセシビリティに対応したコンテンツ管理システムを選ぶことです。

WordPressとMagentoはどちらも素晴らしい選択肢です。どちらのコンテンツ管理システムも、アクセシビリティをサポートし、支持しています。

WordPressは、アクセシビリティへの取り組みを明確にしており、新しい機能やテーマを構築する際には、すべてのウェブデザイン基準とベストプラクティスに従うとしています。また、アクセシビリティの問題が発生した場合には、ユーザーに連絡することを奨励し、可能かつ適切な場合には問題を修正することを約束しています。

さらにMagentoは、一歩進んで、ウェブサイトのアクセシビリティを向上させるためのガイドをマーチャント開発者に提供しています。

アクセシビリティに対応したCMSを選ぶことは、ウェブサイトをアクセシブルにするための大きな一歩です。このガイドの次のステップで、さらに強固な基盤を築くことができます。

2.2. コンテンツを正しく構成すること

スクリーンリーダーは、視覚障害のある方がウェブを閲覧する際によく使われます。スクリーン・リーダーのソフトウェアやハードウェアは、ウェブページの内容を音声や点字で表示します。人生を変えるほどの優れた技術ですが、スクリーンリーダーの仕事を簡単にし、ウェブサイトのアクセシビリティを向上させることができます。それは、見出しを正しく使用するという簡単なことです。

見出しタグ(<h1>、<h2>、<h3>)を正しい方法で使用すると、スクリーンリーダーがコンテンツを理解しやすくなります。

コンテンツを構成する際、見出しタグを本に例えて考えてみましょう。

  • H1は書籍のタイトルです。このタグは一度しか使用してはいけません。
  • H2はチャプター(章)です。ウェブページの各セクションの内容を明確にするために使用します。
  • H3は各章のサブセクションです。これは、コンテンツを消化しやすいように分割するために使用します。

ヘッダーの階層を飛ばしたり、順番を間違えたりすることは避けてください。これは、スクリーン・リーダーの問題を引き起こす可能性があります。例えば、<h1>の後に<h3>を使い、途中に<h2>がない場合、スクリーンリーダーはページ上にコンテンツがないと思うかもしれません。

見出しを正しく使用することは、ウェブサイトをよりアクセシブルにするための小さな、しかし意味のあるステップです。そうしない理由はありません。

3. デザインによるウェブサイトのアクセシビリティ向上

クリエイティブ・プロセスにアクセシビリティを組み込む。これには以下が含まれます。

使用する色を慎重に検討する。色覚異常(色覚異常とも呼ばれる)は、約3億人の患者がいると言われています。最も一般的なのは、赤と緑の色覚異常です。これらの色だけを使用すると、色覚異常を持つ人がウェブサイトにアクセスできなくなります。
コントラスト感度を意識する 様々な視覚障害があると、色のコントラスト感度が低くなることがあります。ウェブページをデザインする際には、前景と背景のコントラストを高く保つようにしてください。
鮮明なフォントを大きなサイズで使用し、色のコントラストにも気を配りましょう。コンテンツを読みやすくするために、細いフォントは避け、読みやすい大きさにしてください。また、白地に黒文字、黒地に黄色文字、青地に黄色文字というように、最適な色を選ぶことも忘れないでください。

4. 複数のメディアでコンテンツ提供

音声、動画、静止画像を混在させることは素晴らしいことですが、ウェブアクセシビリティを向上させるために、必ずテキストの代替手段を提供してください。

音声やビデオのコンテンツを簡単なテキストに変換する機能は、ぜひ取り入れたいものです。比較的短時間で簡単に作成することができ、ウェブサイトのアクセシビリティを向上させることができます。

また、画像には適切なaltテキストを表示する必要があります。Altテキストとは、画像の外観や機能を説明するものです。これもまた、スクリーンリーダーがウェブページの内容をより明確に把握するのに役立ちます。特にインフォグラフィックでは重要です。

また、Altテキストは、画像ファイルが読み込めない場合に表示されるので便利です。また、検索エンジンのクローラーに追加情報を提供することで、コンテンツのインデックス化を促進し、SEOを高めることができます。

5. 説明的なリンクとURLの使用

最後に、リンクとURLには、ユニークで説明的な名前を使うことを目指しましょう。

別のページにリンクする場合は、リンクをたどるとユーザーがどこに行くのかを正確に説明するテキストにリンクを固定します。ここをクリック」や「続きを読む」といった表現は、アクセシビリティの観点からは好ましくありません。例えば、メインの製品カタログにユーザーを誘導したい場合です。

「Click here to see our products.」という表現は避けてください。
代わりに、次のように使います。「To browse our full collection, visit the WordPress plugin catalog」と言ってください。
URLについても同様です。すべてのURLは、訪問者が特定のウェブページで見つけることができる内容を正確に説明する必要があります。読みやすさを考慮して複数の単語で構成されているのが理想的ですが、比較的シンプルであることに越したことはありません。Mozには、URLに関する素晴らしいガイドがあります。

6.結論

最初にアクセシビリティを最適化してウェブサイトを構築しなかったとしても、ウェブサイトをよりアクセシブルにするためにできることがあります。

Webサイトの構築を始めたばかりの方は、最初のプロセスにアクセシビリティを組み込むことは、誰にとっても素晴らしいことです。アクセシビリティとは、ウェブをできる限り包括的にすることです。

ここに挙げたヒントだけができることではありませんが、誰にとってもWebサイトのアクセシビリティを向上させるための素晴らしい出発点となるでしょう。ワールドワイドウェブを愛し、誰もが平等にアクセスできるべきだと考えています。

►►►サービスについて