WordPressサイトにWebアクセシビリティを組み込む方法

公開: 2020-02-15

WordPressは最も人気のあるウェブサイト構築プラットフォームです。 W3techsによると、すべてのWebサイトの35.7％がWordPressを使用しており、これにより、世界のコンテンツ管理システム（CMS）市場シェアの驚異的な62.5％になります。

ただし、WP Webサイトを作成する場合、Webアクセシビリティはおそらくあなたの心の最後のことです。

ただし、WordPressのアクセシビリティコーディング標準では、「 WordPressでリリースされたすべての新規または更新されたコードは、レベルAAのWebコンテンツアクセシビリティガイドライン2.0に準拠している必要があります。 」

言い換えれば、WP Webサイトを使用している場合、アクセシビリティは重要な要素です。

幸い、WPWebサイトにアクセスできるようにすることは不可能ではありません。 しかし、それを行う方法を説明する前に、Webアクセシビリティが何を構成するのかを理解しましょう。

A.Webアクセシビリティの4つの柱

Webの国際標準を開発しているWorldWideWeb Consortium（W3C）は、Webアクセシビリティの次の4つの原則をすでに考案しています。

  1. 知覚可能：すべての情報と要素を、誰もが知覚できる方法でWebサイトに表示する必要があります。
  2. 操作可能：すべてのナビゲート可能でインタラクティブな要素は、さまざまなユーザーが操作可能である必要があります。
  3. 理解できる：誰もがあなたのウェブサイトの情報とユーザーインターフェースを理解できるはずです。
  4. 堅牢：さまざまな種類の支援技術とユーザーが、Webサイトのコンテンツを読むことができるはずです。

B.WordPressWebアクセシビリティのベストプラクティス

上記の原則を念頭に置いて、次の手順を実行して、WordPressサイトに障害者がアクセスできるようにすることができます。

  1. テキストのアクセシビリティを向上させる

視覚障害者を含むすべての人が、Webサイトのテキストを読むことができるはずです。 デフォルトで大きなサイズのフォントを使用できますが、サイズ変更可能なテキストを提供すると、読みやすさがさらに向上します。 視覚障害のあるユーザーは、この機能を使用して、都合に合わせてフォントサイズを大きくすることができます。

また、必要に応じて、代替タグなどの代替テキストを必ず追加してください。 WP Accessibilityは、サイズ変更可能なテキストの追加、色のコントラスト、投稿タイトルの追加によるリンクの追加、適切な代替テキストの提供に役立つWordPressアクセシビリティプラグインの1つです。

  1. 構造化されたフロントエンドとバックエンド

各Webページには、適切に構造化されたフロントエンドとバックエンドが必要です。 これにより、コンテンツの全体的な読みやすさが向上するだけでなく、支援ツールが障害のあるユーザーにメッセージを伝えやすくなります。 セマンティックヘディングタグやメタディスクリプションなどのHTML要素を使用して、バックエンドを改善できます。

箇条書き、短い段落、および適切に構成された的確なコンテンツを使用することで、フロントエンドの改善に役立つはずです。 また、適切な見出しとタイトルを使用して、さまざまなコンテンツサブセクションを定義する必要があります。 派手なアニメーションやGIFはアクセシビリティに対応していないため、使用しないでください。

また、スキップリンクを追加して、スクリーンリーダーユーザーがコンテンツナビゲーションを簡単に行えるようにします。 このシンプルなユーザー補助機能により、ユーザーは不要な資料を経由することなく、コンテンツのあるセクションから別のセクションにジャンプできます。

  1. より良い相互作用のためのキーボードナビゲーション

また、Webサイトがキーボードでナビゲート可能であることを確認する必要があります。 リンクとメニュー、特にドロップダウンメニューを含める必要があります。 すべてのユーザーは、Tab（進む）およびShift + Tab（戻る）を使用して、リンク、メニュー、ボタン、フォームなどの要素にアクセスできる必要があります。

また、表示されているフォーカスインジケーターを使用する必要があります。これは、無効になっているユーザーがWebページのどこにいるかを示します。 WordPressのテーマは、デフォルトのフォーカススタイルをリセットすることがよくあります。 この機能をリセットしないWordPressテーマを使用してください。 Diviアクセシビリティテーマは、アクセス可能なドロップダウンメニューとフォーカス可能な要素の視覚的なアウトラインを使用して、キーボードに適したナビゲーションを設定するのに役立ちます。

  1. ARIAランドマークを追加する

ARIAはAccessibleRichInternetApplicationsの略です。 ARIAランドマークの役割を使用すると、Webページのさまざまな領域を定義できるため、支援技術のユーザーはWebサイトを簡単にナビゲートできます。

最も一般的なARIAの画期的な役割には、バナー、メイン、補完、コンテンツ情報、検索、およびナビゲーションが含まれます。

  • バナー：ロゴ、会社名、Webサイトのタイトルなどのサイト見出しを定義します。
  • メイン： Webページのメインコンテンツを定義します。
  • 補完：メインコンテンツの重要な部分であるサポートコンテンツを検出します。
  • コンテンツ情報：脚注、著作権、プライバシーに関する声明などの親文書に関する情報を提供します。
  • 検索：サイト上のの検索フォームを示します。
  • ナビゲーション： Webページのナビゲーション要素をマークします。

ARIAランドマークを使用する最大の利点は、すでにセマンティックなHTML5要素を処理できることです。 その結果、既存のWordPressテーマのHTML5要素でそれらを使用できます。

  1. インタラクティブ要素：色のコントラスト

CTAやフォームなどのインタラクティブな要素の場合は、テキストの背景として常に高コントラストの色を使用してください。 WCAG 2.0レベルAAでは、通常のテキストで少なくとも4：5：1、大きなテキストで3：1のコントラスト比が必要ですが、レベルAAAでは、通常のテキストで少なくとも7：1、4：5：のコントラスト比が必要です。大きなテキストの場合は1。

通常、白い背景に黒いテキストを使用すると、最高の色のコントラストが得られます。 黄色の背景に黒のテキストを使用することも、その逆も可能です。 ただし、赤の背景に緑のテキスト、緑の背景に赤のテキストなどの組み合わせは避けてください。

別れの言葉

Webサイトのアクセシビリティは、Webサイト上のマルチメディアなどの他のインタラクティブな要素にも拡張されます。 ビデオ、オーディオ、スライダー、カルーセルなどのマルチメディアには、障害のあるユーザーにとって重大な障壁となるデフォルトの自動再生オプションがないことを確認してください。 代わりに、すべてのマルチメディアコンテンツは、ユーザーの操作後にのみ再生を開始する必要があります。

ビデオのトランスクリプト、音声ガイド、キャプションに加えて、アクセス可能なメディアプレーヤーを使用してください。 Able Playerのようなプラグインを使用すると、WordPressサイトの任意のページにアクセス可能なメディアプレーヤーで囲まれたビデオとオーディオを追加できます。

WordPress Webサイトにアクセスできるようにするには、その設計と開発のフローを変更する必要があり、アドバイザーとの手動プロセスを介して行うことができます。 自動Webアクセシビリティソリューションは、わずかな時間とリソースの投資を必要とし、ポジティブなブランドイメージ、より広い市場リーチ、より良い検索ランキング、そして言うまでもなく売上の増加など、多くの利点をもたらします。

WordPressサイトにアクセスできるようにする方法についてまだ疑問がある場合は、コメントにクエリをドロップしてください。

DigiproveシールThis content has been Digiproved © 2020 Tribulant Software