初心者でもできる!ウェブアクセシビリティチェックの第一歩

初心者でもできる!ウェブアクセシビリティチェックの第一歩

「ウェブアクセシビリティ」って最近よく聞くんですが、うちのホームページ、対応できてるんでしょうか…?
専門知識もないし、予算もあまり取れないんですけど…

大丈夫ですよ!まずは無料でできるチェックから始めましょう。
Google Chromeに入っている「Lighthouse」を使えば、専門知識がなくても5分で診断できるんです。

無料で今すぐできるんですか?それなら試してみたいです!
でも、ウェブアクセシビリティって、そもそもなぜ必要なんでしょう?

実は2024年から法改正もあって、民間企業にも対応が求められるようになったんです。詳しく説明しますね!

目次

なぜ今、ウェブアクセシビリティが重要なのか?

合理的配慮イメージイラスト

法改正で「合理的配慮」が民間企業も義務化

2024年4月の障害者差別解消法改正により、民間企業にも障害のある方への合理的配慮が法的に求められるようになりました。

ホームページにおける合理的配慮とは、障害のある方から「このホームページが使いにくい」という申し出があった場合、過重な負担にならない範囲で改善対応を行うことです。

日頃からウェブアクセシビリティを意識した「環境の整備」を進めておくことで、個別対応の必要性を減らし、万が一の申し出にもスムーズに対応できるようになります。

ビジネスメリットも大きい

ウェブアクセシビリティの向上は、コンプライアンス対応だけではありません。

顧客層の拡大
高齢者や障害のある方、一時的に怪我をしている方など、より多くの潜在顧客にリーチできます。

ユーザビリティの向上
誰にとっても使いやすいホームページは、離脱率の低下やコンバージョン率の向上につながります。

SEOへの好影響
サイト構造が整理されることで、検索エンジンが情報を理解しやすくなり、検索順位の向上も期待できます。

【無料・5分で完了】Lighthouseで現状を把握しよう

Lighthouseとは?

LighthouseはGoogleが提供する、Webページの品質を診断する無料ツールです。
パフォーマンス、SEO、そしてウェブアクセシビリティなど、複数の観点から自動診断してくれます。

Chromeブラウザがあれば誰でも使えるので、まずはここから始めましょう。

チェック手順(3ステップ)

ステップ1:診断したいページを開く
Google Chromeで、自社ホームページのトップページや主要なページを開きます。

ステップ2:デベロッパーツールを起動

  • キーボードのF12キーを押す
  • または、ブラウザ右上のメニュー(⋮)→「その他のツール」→「デベロッパー ツール」を選択
Lighthouseの設定画面

ステップ3:Lighthouseを実行

  • デベロッパーツール上部の「Lighthouse」タブをクリック
  • 「カテゴリ」で「ユーザー補助」にチェックが入っていることを確認
  • ページ読み込みを分析」ボタンをクリック

たったこれだけで、数秒後にアクセシビリティスコアと改善点が表示されます。

結果の見方

Lighthouse診断結果の画面

診断結果は0〜100点で表示され、主に以下の情報が得られます。

スコア
サイトのアクセシビリティの達成度を数値化したもの。90点以上を目指しましょう。

改善が必要な項目
具体的なエラー内容が表示されます。

よくある指摘内容
画像要素に[alt]属性が指定されていません画像に代替テキストがない
背景色と前景色には十分なコントラスト比がありません文字と背景の色の差が小さく、読みづらい
フォームの要素にラベルが関連付けられていません各フォーム要素には、プログラム的に関連付けられたラベル要素が必要
ページに見出し、スキップリンク、またはランドマーク領域が設定されていませんページに見出し(h2など)が設定されていない

これらの指摘は、視覚障害のある方がスクリーンリーダー(画面読み上げソフト)を使う際や、キーボードのみで操作する際に問題となる項目です。

Lighthouseの限界を知っておこう

Lighthouseで100点取れたら、もうアクセシビリティ対応は完璧ですか?

実は、そうではないんです。Lighthouseは便利ですが、あくまで機械的な自動チェック。検出できない重要な項目がたくさんあるんですよ。

Lighthouseは非常に便利なツールですが、機械的な自動チェックのため、以下のような重要な項目は検出できません。

Lighthouseでは検出できない重要な項目

キーボード操作の実用性
すべてのリンク、ボタン、フォームが、マウスを使わずキーボードだけで操作できるか?(Tabキー、Enterキーなど)
見出し構造の適切性
見出し(h1, h2, h3…)が論理的な階層になっているか?ユーザーが目的の情報を探しやすい構造になっているか?
動画コンテンツの配慮
動画に字幕や音声解説がついているか?

日本の標準規格であるJIS X 8341-3:2016では、これらを含む多岐にわたる項目が定められており、Lighthouseだけでは全体の一部しかチェックできないのが実情です。

つまり、Lighthouseで100点でも、アクセシビリティ対応が完璧とは言えません

より本格的な対応には専門家のサポートを

Lighthouseの次のステップ

Lighthouseで基本的なエラーを修正したら、次は以下のステップに進むことをおすすめします。

STEP
専門ツールによる網羅的チェック

Lighthouseより詳細な項目を診断できる専用ツール(総務省が提供しているmiCheker等)を使用

STEP
手動チェック

キーボード操作、スクリーンリーダーによる実際の使用感を確認

STEP
JIS X 8341-3:2016準拠を目指す

国内標準規格に基づいた本格的な対応

ハマ企画の強み

ハマ企画では、診断だけでなく、具体的な修正指示と実装サポートまで一貫して対応しています。

私たちのサービス内容

サービス内容
専門ツールによる診断「miCheker(総務省提供)」を使用し、Lighthouseでは検出できない項目まで徹底診断
JIS準拠の手動チェック経験豊富な専門家が、キーボード操作やスクリーンリーダーでの検証を実施
具体的な修正指示書「どのページの」「どの部分を」「どう修正すればよいか」を明確に提示
準拠までの伴走サポート修正後の再チェック、追加の相談対応など、準拠達成まで継続的にサポート

こんな方におすすめです

・入札条件でアクセシビリティ対応が必須になった
・リニューアル後、本当に対応できているか不安
・社内に専門知識を持った担当者がいない
・制作会社との連携もお願いしたい


まずはLighthouseから、そして専門家へ

ウェブアクセシビリティ対応は、決して難しいものではありません。

今日できること

  1. この記事を読んだら、Lighthouseで自社ホームページをチェック
  2. 指摘された項目で対応できそうなものから改善
  3. ホームページの現状を把握する

次のステップ

Lighthouseで見つかったエラーを修正しても、それはまだアクセシビリティ対応の「入口」です。
より多くのユーザーに快適に使ってもらえるホームページを目指すなら、専門家による本格的なチェックと改善支援をご検討ください。

ウェブアクセシビリティチェックの導入やホームページ改善についてお悩みの方は、ぜひハマ企画にご相談ください!
初回のご相談から診断、改善提案、再チェックまで、ワンストップでサポートいたします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次