チェッカーを用いた基準適合
Webコンテンツアクセシビリティガイドライン（WCAG 2.0）などの基準を満たしていない箇所を、自動検査ツール（チェッカー）を用いて効率的に見つけ出す方法です。 エラーとして検出された箇所を手動で修正する必要があります。
一定以上基準を満たすことができれば、「WCAG2.0準拠」をWebサイト上で謳うことができます。
WCAG 2.0は、Webコンテンツのアクセシビリティに関する国際的なガイドライン（JIS規格）です。すべての人がウェブコンテンツを平等に利用できるように、様々な基準が定められています。
閲覧ハードル解消
視覚障害者、聴覚障害者、運動機能障害者など、閲覧に困難を抱える方々に向けて、具体的な解消法を提供する方法です。
具体的な方法として、以下の方法があります。
視覚障害者向け
- 画像に代替テキスト（altテキスト）を挿入する
- 文字や要素の拡大機能や音声読み上げ機能の実装
- 色のコントラストを調整できるようにする
聴覚障害者向け
- 動画に字幕や音声解説をつける
- 文字起こしを提供する
運動機能障害者向け
- キーボード操作のみで全ての操作ができるようにする
WordPressにおいて、上記の2つの方法をプラグインで解決することができます。 チェッカーを用いて基準に適合しているか調べてくれるプラグインと、閲覧ハードルを解消するプラグインに分けてそれぞれご紹介します。
アクセシビリティをチェックするプラグイン
JWP-a11y
まず1つ目は日本製のプラグイン、「JWP-a11y」です。 作者の時代工房さんは他にも多言語化プラグインなどを作られており、大変お世話になっております。
メンテナンスも行われており（執筆時で一年以内にアップデートあり）、最新版WordPressにも対応しています（執筆時のWordPressはv6.5.5）。
ja.wordpress.org/plugins/jwp-a11y/
このプラグインのポイント
- ページごとにアクセシビリティのチェックができる。
- ウェブに公開ページされているページでチェックするのが基本だが、HTMLソースを入力してチェックすることも可能。
- お知らせなどの投稿を保存時に即時チェックしてくれる。
- アクセシビリティ方針ページの作成支援
- アクセシビリティ報告書作成支援
ページをアクセシビリティチェックした結果
記事投稿でアクセシビリティチェックを実行した場合
閲覧ハードルを解消するプラグイン
WP Accessibility Helper
次は閲覧ハードルを下げるためのツール群をWebサイト上に設置する、海外製のプラグインです。 メンテナンスも比較的活発（執筆時で3ヶ月以内）で、最新のWordPressにも対応しています。（2024/07/11現在）
ja.wordpress.org/plugins/wp-accessibility-helper/
利用できるツール（抜粋）
- 文字サイズ変更
- キーボードナビゲーション
- コントラストモード（背景色を選べる）
- CSSアニメーションのトランジションを削除
- CSSスタイルのON/OFF
- リンクに下線をつける
- リンクにハイライトを付ける
- 特定コンテナのみハイライトする（IDやクラス指定）
管理画面での設定項目
支援ツールをサイトに表示し、ツールを開いた状態
WP Accesibility
次も閲覧ハードルを下げる支援ツールを提供するプラグイン（海外製）です。 こちらもメンテナンスが活発で（執筆時で6日以内）最新のWordPressに対応しています。
ja.wordpress.org/plugins/wp-accessibility/
利用できるツール（抜粋）
- 文字サイズ変更
- ハイコントラストモード
- グレイスケール化
- リンクに下線をつける
- キーボードフォーカスの色変更
設定画面
支援ツールを有効にした状態
運用でアクセシビリティを損なわないための注意点
見出しの適切な使用
見出し要素(h1、h2、h3など)を正しく使うことで、コンテンツの構造をスクリーンリーダーなどのアクセシビリティツールに伝えられます。ビジュアルエディタで見出しスタイルを設定するか、ソースコードを直接編集して適切な見出しタグを指定しましょう。
順序立ったリストの作成
ビジュアルエディタでリストを作成する際は、番号付きリスト機能や箇条書きリスト機能を適切に使い分けることが大切です。ソースコードで確認すると、正しくol/ulとliタグが使われているはずです。
画像にはalt属性を設定
画像を挿入する際は、altテキストを設定して内容を説明します。ビジュアルエディタの画像設定から「代替テキスト」を記入できます。altテキストがあれば、画像を表示できない環境でも代替情報を得られます。
テーブルのマークアップ
データをテーブルで示す場題は、ビジュアルエディタのテーブル機能で適切にマークアップしましょう。ソースコードを確認すると、セル・行・列がきちんと対応するtableタグが使われているはずです。
リンクテキストの分かりやすさ
リンクを設置する際は、リンク先の内容が想像できるリンクテキストにします。「こちら」などの曖昧なテキストは避けましょう。 カラーユニバーサルデザイン ビジュアルエディタでカラーを指定する際は、色覚異常者にも見分けやすい配色を心がけましょう。コントラスト比もチェックします。
補助技術の干渉を避ける
JavaScript、フラッシュコンテンツ、自動音声再生など、スクリーンリーダーなどの補助技術と干渉する可能性のある機能は極力避けましょう。 ビジュアルエディタを使いつつ、上記の点に気をつければ、WordPressサイトのアクセシビリティを維持できるはずです。大切なのは、構造化マークアップ、代替コンテンツの用意、適切な配色やメディアコンテンツの利用などです。アクセシビリティ支援プラグインを併せて活用することをおすすめします。
まとめ
アクセシビリティにおいて念頭に置くべきは、基準を満たすことでアクセスできる人やデバイスの間口を増やすことが目的となります。
アクセシビリティのための機能を拡張するのも大事ですが、閲覧にハードルがあるユーザはすでに解決策を持っている場合があります。（アクセシビリティガイドラインとしてはそのような機能拡張を冗長と捉えている節があります）
これで全てではないですが、ブログのように記事が追加できるWordPressのようなCMSにおいてアクセシビリティ基準を達成するためには、入力する人のリテラシーであったり、入力するルールを綿密に策定する必要があると言えます。
株式会社デパートでは、ウェブアクセシビリティ向上をはじめとしたサイトの利便性向上をサポート可能です。自社のサイトに不安を抱える場合はぜひ一度、ご相談ください。
https://depart-inc.com/download/depart-webaccessibility/
|
Webマーケティング、Web制作に関することなら
|
