WordPressで実現するウェブアクセシビリティ：対応方法から注意点まで

2024年4月の障害者差別解消法の改正に伴い、ウェブアクセシビリティ対応に注目が集まっています。

今回の法改正では、「合理的配慮」が一般事業者にも義務化されました。ウェブアクセシビリティ対応が含まれる「環境の整備」については努力義務のままですが、今後のことも考えウェブアクセシビリティ対応を検討する企業も増えています。

今回はWordPressサイトにおけるウェブアクセシビリティ対応について、各種方法から注意点までをまとめました。

また、ウェブアクセシビリティの基礎知識については、こちらの記事でまとめていますので、参考にしてください。
ウェブアクセシビリティとは？義務化の範囲・基礎知識・対応手順をわかりやすく解説

WordPress公式のウェブアクセシビリティ対応について

海外では日本よりもウェブアクセシビリティ対応が進んでいると言われています。
海外プロダクトであるWordPressにおいても、ウェブアクセシビリティを念頭に置いた開発が行われています。

WordPressのコーディング規格（WordPress Coding Standards）のアクセシビリティコーディング規格（Accessibility Coding Standards）では、以下のように宣言されています。

Code integrated into the WordPress ecosystem – including WordPress core, WordPress.org websites, and official plugins, is expected to conform to the Web Content Accessibility Guidelines (WCAG), version 2.1, at level AA.

New or updated interfaces are encouraged to incorporate the Authoring Tool Accessibility Guidelines (ATAG) 2.0.

（翻訳）
WordPress エコシステムに統合されたコード (WordPress コア、WordPress.org Web サイト、公式プラグインなど) は、Web コンテンツ アクセシビリティ ガイドライン (WCAG) バージョン 2.1 のレベル AA に準拠することが期待されます。

新しいインターフェイスまたは更新されたインターフェイスには、オーサリング ツール アクセシビリティ ガイドライン (ATAG) 2.0 を組み込むことが推奨されます。

引用：Accessibility Coding Standards

※WordPressにおけるウェブアクセシビリティの対応内容の詳細は「WordPressテーマの作成」というページを確認すると良いでしょう。

※現段階でのWordPressのアクセシビリティ課題については、「アクセシビリティに重点を置いたチケット」で確認できます。

WordPress本体（コア）開発はアクセシビリティチームが存在

ウェブアクセシビリティ対応に力を入れているWordPressでは、2015年にウェブアクセシビリティチームが設立され、プロジェクト全体にウェブアクセシビリティの専門知識を提供しています。

フォーラムでのサポートに加え、アクセシビリティ・ハンドブックやベストプラクティスといった開発に役立つコンテンツの提供や、コアテーマのウェブアクセシビリティのテスト・監査、公式ライブラリに提出されるテーマのアクセシビリティチェックなども行っています。

WordPressサイトでウェブアクセシビリティ対応する方法

ここからはWordPressサイトをウェブアクセシビリティに対応する方法について解説していきます。

サイト全体を「JIS X 8341-3:2016」規格に対応する方法・手順については、以下の記事を参考にしてください。

ウェブアクセシビリティとは？義務化の範囲・基礎知識・対応手順をわかりやすく解説

WordPressサイトでウェブアクセシビリティ対応をおこなう3つありますが、それぞれにメリット・デメリットがあります。

それぞれ、詳しく見ていきましょう。

アクセシビリティ対応の既存テーマを活用する

WordPressに同梱されているデフォルトテーマについては、アクセシビリティチームによるチェックがおこなわれています。

また、基本的なアクセシビリティ対応項目について確認済みのテーマを公式テーマライブラリで公開しています。

これらを利用すれば大きな手間をかけることなく、ウェブアクセシビリティ対応されたテーマを活用することができます。

公式テーマはアクセシビリティ対応確認済み

公式テーマ（WordPress本体に同梱されているTwenty Twenty-Three などのデフォルトテーマ）については、アクセシビリティチームによって監修されているため、基本的なウェブアクセシビリティ対応はされている状態になります。

メリットは「アクセシビリティ対応」が確認されたテーマを使うことで、対応にかかるリソースが少なくてすむ、ということ。また、公式テーマなので定期的にアップデートされるため、セキュリティ的にも安心です。

デメリットとしては、既存テーマなのでデザインの自由度やカスタマイズ性はそのテーマに依存する、という点です。ウェブアクセシビリティ対応が確認されていても、デザインを重視したいサイトやこだわったサイトにしたい場合は満足できない場合もあります。

また、公式テーマを使えば「ウェブアクセシビリティ対応済み」と謳えるわけではないので注意が必要です。
ウェブアクセシビリティに完全対応ができているというわけではなく、基本的な項目が満たされているというだけです。

さらに、ナビゲーションの作成や画像のaltテキスト、音声・動画の掲載など、Webサイトとして完成させていく中で、ユーザー側でウェブアクセシビリティに沿わないポイントを作り出してしまうことも考えらえます。
運用時の注意点については、「WordPressサイト運用の注意点」の見出しで後述します。

テーマライブラリは「アクセシビリティ対応」で検索できる

また、WordPressでは、確認済みテーマをライブラリとして公開しています。
こちらの公式テーマライブラリでテーマを探す際、「アクセシビリティ対応」という項目でフィルターをかけることができます。

これによって、アクセシビリティチームが確認済みのテーマだけを検索することができます。

ただし、こちらも公式テーマ同様、テーマを利用するユーザー側でウェブアクセシビリティを損なってしまう、という可能性があるため、WCAGのガイドラインに沿ったサイト制作を行う必要があります。

プラグインで対応する

ウェブアクセシビリティ対応が可能なプラグインも複数公開されています。

プラグインを導入することで、対応する項目についてアクセシビリティ対応を行うことが可能です。

ただし、いくつか注意点もあります。

プラグインでウェブアクセシビリティ対応する際の注意点

プラグインでウェブアクセシビリティ対応する場合の注意点は大きく以下の3つです。

• プラグインの対応範囲に注意
• プラグインの入れすぎはNG

プラグインの対応範囲に注意

対象となるプラグインがウェブアクセシビリティ項目のどの範囲をカバーしているかは注意して確認しておきましょう。全ての項目をカバーできるわけではありません。

どの項目をプラグインで補いたいかをあらかじめ確認し、その項目をカバーできるプラグインを選択しましょう。

プラグインの入れすぎはNG

ウェブアクセシビリティ対応のプラグインを複数入れることはおすすめできません。
あるプラグインが対応していない項目を別のプラグインでカバーする、といったことは避けましょう。

プラグイン同士の相性が悪い場合、不具合に繋がることがあります。ウェブアクセシビリティ対応を目的としたプラグイン同士なら重複する機能も多いため、バッティングする可能性も高くなるでしょう。

また、ウェブアクセシビリティ対応のプラグインに限らず、プラグインを多数導入することで、処理に時間がかかるようになり表示スピードの低下にも繋がります。

オリジナルテーマでウェブアクセシビリティ対応する

ウェブアクセシビリティ対応項目や達成度を自由にコントロールしたい、デザインや機能をこだわりたい、という場合は、オリジナルテーマを作成しウェブアクセシビリティ対応をしていく必要があります。

WordPress開発、Web制作、ウェブアクセシビリティ対応の知識・ノウハウが必要となるため、難易度が高くなります。

具体的な対策方法や対応手順をまとめた記事もありますので、ご参考ください。

ウェブアクセシビリティ対応を行う前に知っておきたいこと

ウェブアクセシビリティ対応を行う上で、各項目についてどういった人がどのようなシーンで必要としているのかを知っておくことは重要です。

単純な作業としておこなうのと、作業の先の目的を理解して取り組むのでは自ずと結果も変わってきます。

障害者のWebサイト利用方法

総務省の「情報バリアフリー環境の整備」というページでは、以下の3つの動画が公開されています。

• 視覚障害者（全盲）のウェブページ利用方法※Youtube動画
• 視覚障害者（弱視）のウェブページ利用方法※Youtube動画
• 肢体不自由者のウェブページ利用方法（平成18年1月18日掲載）
  ※こちらのみYoutubeではなくダウンロードする形式です

また、以下のような記事も参考になります。
盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術

その他のアクセシビリティを必要とするケース

また、勘違いされがちですが、ウェブアクセシビリティ対応は障害がない人にとっても重要です。
以下のように特定の環境下でも、問題なくWebサイトやサービスを利用できるようにすることに繋がるためです。

• 一時的に怪我をして片腕が使えなくなった
• メガネが壊れた、コンタクトをなくした
• マウスが壊れた
• 周りがうるさい、音が出せない環境
• 日光で画面が見づらい

ウェブアクセシビリティを損なわないための運用時の注意点

WordPressサイト完成時には、アクセシブルな状態だったとしても、日々の運用によってはウェブアクセシビリティを損なってしまうかもしれません。
WordPressサイト運用時には、以下のような点に注意しましょう。

見出し・見出し構成

音声読み上げコンテンツなどを利用する方は、見出しごとにスキップする機能を使う場合があります。
見出しの内容や見出し構成がわかりづらいと、それだけでアクセシブルではなくなります。

また、初心者の方に多いのが、装飾目的で見出しタグを使用してしまうケースです。
以下の例のように、太文字やフォントサイズを大きくする目的で、見出しタグ（見出しブロック）を使用してしまうと混乱の原因になります。

見出しを挿入したいのか、テキストを装飾したいのか、目的をはっきりさせて使い分けるようにしましょう。

alt属性

alt属性もアクセシビリティを損ないやすい要素のひとつです。
通常のWebサイトでもalt属性を空にすることは非推奨ですが、ウェブアクセシビリティ対応においてはより適切に使用する必要があります。

例えば、以下の猫の画像にaltタグをつける場合、どのようにつければいいでしょうか？

どのような文脈で画像を使用するかにもよりますが、以下のように単純に「猫」とするだけでは不十分と考えられます。

例えば、以下のように、どのような画像かを代替して説明するテキストである必要があります。

リンクテキスト

リンクテキストについても、リンクテキスト単体でリンクの目的を判別できるようにしましょう。

例えば、「お問い合わせはこちら」と設定してしまうと、リンクテキストだけでは意味が伝わりづらくなります。

「お問い合わせはこちら」のように、リンクテキストだけで意味が伝わるように心がけましょう。

本文テキスト

「Classic Editor（旧エディタ）」を使用している場合、エディタ内での改行がWordPressに消されてしまい、改行を行うために文字色を白（背景と同一色）にして見た目上の改行を行う、というケースがあります。

音声読み上げソフトの利用者からすると、突然、本文と無関係な文章が読み上げられるので混乱の原因となります。
改行削除機能をオフにする、改行のbrタグを使用するなど、適切な対応を行いましょう。

また、箇条書きリストをリストタグを使わずに、通常テキストを使用するのもやめましょう。
致命的ではないものの、コンテンツの理解を妨げる要因となります。

映像、音声、動画コンテンツ（時間依存メディア）

映像や音声、動画コンテンツは時間依存メディアと言われます。

テキスト等による代替コンテンツや動画へのキャプション挿入など、ウェブアクセシビリティ対応では配慮すべき項目があります。

最近では動画埋め込みなども簡単に行えるようになりましたが、何も考えずに使用すると、アクセシビリティを損なう原因になるため注意が必要です。

ウェブアクセシビリティ対応可能なWeb制作会社への外注も選択肢

知識・ノウハウがない中で社内リソースだけで、一定規模以上のWebサイトのウェブアクセシビリティ対応をおこなうのは困難といえます。

ウェブアクセシビリティ対応が可能なWeb制作会社への外注も選択肢として考えると良いでしょう。
社内対応と外注時のメリット・デメリットを比較すると以下のようになります。

ウェブアクセシビリティ対応は、サイトの規模にもよりますが、数ヶ月〜半年程度のプロジェクトになるケースが多いです。それだけの期間、社内エンジニアのリソースを使うとなると、よほどエンジニアリソースがあまっていない限り、他の業務進行が滞ってしまいます。

その点、外注できればプロが対応してくれるので、通常業務への影響は最小限になります。ただし、外注する際にも注意が必要なのは、ウェブアクセシビリティ対応は日本国内で重視されてこなかったため、対応可能なWeb制作会社も多くはない、という点です。

ウェブアクセシビリティ対応可能なWeb制作会社の選び方

ウェブアクセシビリティ対応可能なWeb制作会社選びで失敗しないためには、以下の点に注意しましょう。

• ウェブアクセシビリティ対応サイトの制作実績があるか
• 担当者にウェブアクセシビリティの知識があるか
• 適切なロードマップが引けるか

一番確実なのは、制作実績にウェブアクセシビリティ対応サイトがあるかどうかです。実績が確認できれば、また、実績のサイトのウェブアクセシビリティ対応度・対応レベルが自社の求める基準と合致していれば、依頼しても問題ないでしょう。

また、窓口となる担当者にウェブアクセシビリティ対応の知識があるかもチェックしておきましょう。実際の制作に関わらない営業担当だったとしても、最低限の知識がないとプロジェクト進行中にやりとりに不要なコストがかかる可能性があります。

必ず、無理のない適切なロードマップ・スケジュールが引かれているかを確認しましょう。特にウェブアクセシビリティの試験を行う場合は、試験と試験後の修正だけで１ヶ月程度は見ておいた方が良いですが、公開期限ギリギリに試験を行うようなスケジュールの場合は、後々トラブルになることも予想されます。

WordPressサイトのウェブアクセシビリティ対応はお任せ！

今回は、WordPressでウェブアクセシビリティ対応を行う方法について解説しました。
WordPressサイトで対応を検討されている場合は参考にしていただければ幸いです。

ウェブアクセシビリティ対応が本格的に注目されて日が浅いため、対応しているサイトも対応可能な制作会社も少ないのが現状です。

もし、WordPressサイトのウェブアクセシビリティ対応にお困りなら、ぜひ「wp.make」にご相談ください！
本ブログを運営する「wp.make」は、WordPressのプロフェッショナルチームです。

WordPressに関することなら、ウェブアクセシビリティ対応も含めあらゆるお悩みを解決いたします。
ぜひ、お気軽にご相談ください。

>> wp.makeに相談する

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

• WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
• セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
• WordPressに最適なサーバーの選定や構築から依頼したい…
• SEO対策や高速化も考慮したサイト構築を行なってほしい…
• 制作後の保守・運用についてもサポートしてほしい…
• 今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する