プログラミング

プログラミング

Webサイトのアクセシビリティを向上させるWordPressプラグイン10 選!

3,269 views

読了時間 : 約3分29秒

WordPressはバリアフリーのWebサイトを作る入門編として最適です。例えば、最近のデフォルトテーマのTwenty Seventeenは最初からアクセシビリティを念頭に作られています。しかし、これだけでアクセシビリティ対策は万全という訳ではありません。

 

ありがたいことに、プラグイン開発コミュニテイがその分野に力を注いでおり、現在ではアクセシビリティ向上のための様々なツールを選べるようになりました。本記事ではWebサイトのアクセシビリティを向上させるWordPressのプラグインをご紹介します。

 

 

1. WP Accessibility

https://wordpress.org/plugins/wp-accessibility/

フォントのサイズと色のコントラストを変えられるツールバーに加え、キーボードユーザーのためのナビゲーションスキップ、link :focus疑似クラスを使ったアウトライン、画像にlongdesc属性を付加するなど一般的なアクセシビリティ問題に対応する多機能プラグインです。

 

 

2. WP Accessibility Helper

https://wordpress.org/plugins/wp-accessibility-helper/

使いやすいツールバーで、カラーコントラストやフォントサイズを調整できる他、リンクへのアンダーラインやハイライト付加、イメージのグレースケール化、フォント変更、キーボードナビゲーションなど、様々な機能があります。また、サイトのアクセシビリティエラーをチェックするDOMスキャナーも付属しています。

 

 

3. Accessibility Widget

https://wordpress.org/plugins/accessibility-widget/

単にテキストの大きさを変えたいだけであれば、このシンプルなウイジェットがお勧めです。設定からそれぞれのHTML要素ごとに大中小サイズの指定ができます。

 

 

4. Accessible Poetry

https://wordpress.org/plugins/accessible-poetry/

フローテイングボタンをクリックするとツールバーが現れ、フォントとコントラストを調整できます。ページのズームイン・アウト、リンクのアンダーライン、スクリーンフラッシュの無効化等の機能の他、WordPressダッシュボード内のALTプラットフォームで、アップロードしたALTタグがない画像にタグを直接セットできます。

 

 

5. Contact Form 7: Accessible Defaults

https://wordpress.org/plugins/contact-form-7-accessible-defaults/

デフォルトのContact Form 7のアクセシビリティを改善するプラグインです。既にあるフォームは新たにテンプレートを使って作り直す必要があるので、Contact Form 7 と同時にこのプラグインもインストールするのをお勧めします。

 

 

6. WCAG 2.0 form fields for Gravity Forms

https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/

Gravity Formにアクセシビリティ機能を加えるプラグインです。チェックボックスやラジオボタンのフィールドセット化、入力エラー数の告知の他、様々なフィールドにARIA属性を加えるなどの調整ができます。

 

 

7. wA11y – The Web Accessibility Toolbox

https://wordpress.org/plugins/wa11y/

人気のあるアクセシビリティ分析ツールへ接続するプラグインです。Tota11yはページ上の全ての要素を注釈し、問題があれば提示します。WAVEは開いているページの詳しいアクセシビリティを分析します。

 

 

8. Text-To-Speech PHP/JS Script Converter

https://codecanyon.net/item/texttospeech-phpjs-script-converter/8070020

テキスト読み上げ機能を持つ市販のプラグインで、26種類の言語をサポートしています。特にフレームワークを追加する必要はありませんが、コードとHTMLラッパーを加える必要があります。

 

 

9. Divi Accessibility

https://wordpress.org/plugins/accessible-divi/

Diviテーマのユーザーであれば、このプラグインの導入を考えてみてください。ARIA属性を加え、キーワードナビゲーションを向上させる他、前述したtota11yもパッケージに含んでいます。

 

 

10. WP User Stylesheet Switcher

https://wordpress.org/plugins/wp-user-stylesheet-switcher/

スタイルシートを好きなだけ構成し、簡単にスイッチできるプラグインで、例えばアクセシビリティ対策としてテキストのみのレイアウトが必要になった時の作業がずっと簡単に行えます。

 

 

全てのユーザーのために

 

ここ数年でウエッブアクセシビリティの重要性に対する意識が大いに高まっています。サイトを全てバリアフリーにするには時間がかかりますが、やってみる価値は大いにあります。この記事でご紹介したツールで、あなたのWordPressサイトを全てのユーザーに活用してもらいましょう。

 

 

※本記事は、WordPress Plugins to Improve Website Accessibilityを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ