0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「みんなのやさしいWEB診断」で行う、無料のWebアクセシビリティ検査の方法 〜AI時代にも求められるWebアクセシビリティ〜

0
Last updated at Posted at 2026-04-08

AI時代でも求められるWebアクセシビリティ対応

AI時代になった2026年現在では、Webサイトの要約や音声コミュニケーションをAIで使うことによって、視覚障がいを持った方のWeb利用は以前よりやりやすくなりました。
一方でAIでの要約には誤解や誤解釈があること、フォームでの入力操作などは従来通り行っていることが多いなど課題も見えてきています。

そんな中、2024年の法改正の影響もあって、役所の案件などではWebアクセシビリティへの対応を求められることが増えました。
実はAIの解釈や要約はHTML構造によるところも大きく、誤読や誤解釈を防ぐには結局のところセマンティックなHTML、アクセシブルなページ構造を担保するのが早道です。それどころか、間違いに対して責任の所在が曖昧なAIに対して、公共性のあるWebサイトなどでは「間違えさせない」という自衛の意味も込めて、Webアクセシビリティへ意識を向けることはかえって重要になってきています。

(いずれJSONやMarkdownなどを使ったAI向けの構造説明のレイヤーがWebアクセシビリティの規格に含まれる日も来るかも知れません)

まずは便利なツールで機械検査を

さて、そんなWebアクセシビリティですが機械的なチェックで済む部分は、miCheckerを使って検査する方法が一般的だと思いますが、Windowsでしか動かないのと、1URL毎に検査開始の操作が必要なので少し面倒な気がします。

そこで、今回はブラウザで使える無料のWebツール「みんなのやさしいWEB診断」を使った機械検査の方法をご紹介します。

スクリーンショット 2026-04-07 17.58.08.png

「みんなのやさしいWEB診断」でできること

このWebツールでできるのはWebアクセシビリティの機械チェックと、簡易なWebセキュリティの診断です。Webセキュリティの診断は今回関係ないので、Webアクセシビリティのチェックに絞って出来ることをリストアップすると以下のようになります。

  • JIS X 8341-3:2016(WCAG2.0)基準での機械検査
  • WCAG2.1/2.2基準での機械検査
  • PDF/UAを基準にしたPDFの機械検査
  • AIの簡単なコメント機能とレポート出力機能

使い方と検査方法

利用するには無料のアカウント登録が必要です。メールアドレスが1つあれば登録できるので、まずユーザー登録を済ませて、ログインしてください。

マイページ

ログインするとマイページが表示されます。画面右の「Webアクセシビリティ検査開始」またはヘッダーメニューにある「新規検査」からWebアクセシビリティ検査を選択してください。

マイページ.png

新規検査の登録画面

新規検査の登録画面が開きますので必要な設定を行います。

①検査対象URL
検査対象のURLを入力します。複数のURLをまとめて入れることも出来ますが、無料利用では1日に3URLまでの上限が設定されています。
②サイト全体をクロールして検査する
本来はサイトのトップページから自動でURLを収集して検査対象とする機能ですが、無料では上限がるので使いません。
③検査規格
検査の規格を選択します。A/AA/AAAなどのレベルは検査後に絞り込んで確認できます。
④W3C HTMLバリデーション(Nu HTML Checker)を実行する
HTMLの読込み時にW3CのHTMLバリデーションを実行します。チェックをいれておくとHTMLの文法的な観点からも指摘事項が生成されます。
⑤Basic認証を使用する
公開前のテストページ等、Basic認証が設定されたページを検査する際に利用します。

設定が終わったら「検査を開始」ボタンをクリックして検査を開始してください。

新規開始.png

検査の自動実施と完了通知

検査を開始すると、自動で検査対象のチェックが始まります。入力したURL全ての検査が終わるとメールで完了通知が届きます。検査にかかる時間は他ユーザーの利用状況などサーバーの混雑状況に左右されます。

検査完了通知.png

検査結果の一覧画面と詳細画面

検査結果には2つの画面があります。

①一覧画面
新規検査の開始画面で入力したURLが一覧になったページで、全体の概要を確認できます。全体の結果に対してAIに評価を求めることができますが、検査直後は機械的に検出された指摘事項が多くあるため、先に詳細画面で内容について確認・ステータス設定(適用なし/適合などのステータス設定)することをおすすめします。
②詳細画面
URLごとの詳細画面です。検査のメイン作業はこの画面で行います。指摘事項・参考情報が一覧になってでています。 各指摘事項について内容を確認してください。確認方法は次項をご覧ください(なお必要に応じてになりますが、全てのチェックが終えればURLに対する規格適合の検査結果表を出力できます)

一覧画面

結果一覧.png

詳細画面

結果詳細.png

詳細画面の使い方(指摘事項の確認方法)

指摘一覧の部分に「HTMLチェック」「ロービジョン」のタブがあります。HTMLチェックは、当該URLのHTMLやCSSを解析して検出される指摘事項、ロービジョンはブラウザでサイトを描写した際にわかる色覚に関する指摘事項(主にコントラストなど)を検出しており、タブで切り替えて見ることが出来ます。
なお、絞り込み条件で適合レベル「A」「AA」「AAA」を選択できますので、必要に応じて利用してください。

指摘事項の確認

下の図はHTMLチェックで検出された文字の色に関する指摘です。特定のテキストに色がつくようにスタイルが指定されているものの、背景色に関する色指定がないため「もしかしたらコントラストが低いかも知れないから確認して欲しい(※なお、背景色が入っていればその色と文字色との差を判断できます)」というような指摘です。

指摘事項.png

「該当HTMLを表示」をクリックすると、どの部分のテキストが検出対象となったのか表示することができます(機械的にやっているので、たまに変なところを指すことも)。

指摘HTML.png

このように指摘された内容を確認していきますが、もしも最終的に検査結果から規格適合の検査結果表を出力したいような場合は、「指摘ステータス」を設定します。

未対応
デフォルト値です。この指摘事項に対して何らアクションを起こしていない状態です。
適合
指摘事項を解消した、もしくは指摘が誤検知であって正しく適合できている場合に選択します。
不適合
確かに指摘事項の問題が存在しており、解消できていない場合に選択します。
適用なし
指摘されている懸念がそもそも存在しないときや(例:動画に関する確認事項がでたが、そのサイトで動画を使っていない場合など)、何かしらの事由で今回の検査ではその規格を適用しない場合に選択します。

ここで選択されたステータスを「検査結果登録画面」で使用します(後述)。

スクリーンのプレビュー

画面右側には色覚シミュレーション付きのスクリーンプレビューが表示されます。色覚に障がいを持っている人にどのように見えるかをシミュレーションしています。

色覚シミュレーション.png

なお、このシミュレーションは「ロービジョン」の指摘事項に反映されます。ロービジョンの指摘事項では「ハイライト表示」をすることで、問題の箇所が画面上のどこにあるのかビジュアルで確認できます。

ハイライト表示.png

PDFのコントラスト確認

このスクリーンのプレビューはPDFが検査対象であっても機能します。ただし、使ってみた感触では「明朝体」のような細いフォントや、文字サイズが小さく薄くみえるような場合は、コントラスト費が適切であっても要確認事項として指摘があがってきてしまうようです。

AIによる評価

指摘ステータスを変更し終わったら「AI評価」の欄にある「更新」ボタンをクリックしてみてください。数分程度でAIが評価コメントを出してくれます。

AI評価ただしいもの.png

検査結果登録画面と検査結果表の出力

公共性のあるサイトでは、Webアクセシビリティの検査結果をサイト上に公開しなければならない事があります。「みんなのやさしいWEB診断」では、そんなときに使える検査表を自動で生成してPDFダウンロードすることができます。

スクリーンショット 2026-04-08 19.03.00.png

検査結果表の作成手順

まず、前述の詳細画面にて指摘ステータス(未対応 / 適合 / 不適合 / 適用なし)を設定してください。その結果を踏まえ、一覧で並んでいる規格項目ごとに現在のステータスが表示されます。

現在のステータス.png

ヒント
検査結果表には「ページ毎に出すもの」と「検査対象にした複数のURLをまとめて出すもの」とあります。各URLの「詳細画面」からはページごとの検査結果登録になりますので、検査対象とした複数のURLをまとめて検査結果登録する場合は、「一覧画面」から「全体の検査結果登録」ボタンをクリックしてください。

全体の検査結果.png

未だ「未対応」状態の項目は、「詳細」ボタンが表示されています。クリックすると「どこが未対応なのか」を示してくれますので、詳細画面に戻ってステータスを変更してください。

逆に「適合」となっているもの(そもそも指摘を受けなかった規格項目も「適合」としてでてきます)は、状況に応じてステータスを変更できます。例えば、「詳細画面で指摘を受けなかったので適合になっているが、適用なしの方が適切だ」というような場合に変更します。
また、問題を認識しているがすぐに適合作業を行えない場合は、「対応予定」という項目を選択することもできます。その場合には、事情を備考欄に入力するとよいでしょう。

適合.png

検査の適合レベルを選択してPDFを出力する

ステータスの確認が完了したら、適合レベル(A〜AAA)を選択してPDFを出力できます。なお、ここで表示される規格は、検査の新規登録時に設定した規格です。ですので、JIS規格(WACG2.0)で検査を行ったものについては、JIS規格(WACG2.0)の検査結果表のみを作成できます。

検査表の出力.png

おわりに

ご紹介した「みんなのやさしいWEB診断」はあくまでも機械チェックツールなので、実際に人間が目で見て判断、操作をしてみて確認しなければならない部分も多くありますが、「あやしい所を指摘してくれる」だけでも検査のスピードは上がると思います。ぜひご活用ください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?