zenet_logo

-株式会社ゼネット技術ブログ-

トップ > フロントエンド > はじめてのアクセシビリティ対応 〜miCheckerで始める第一歩〜

はじめてのアクセシビリティ対応 〜miCheckerで始める第一歩〜

フロントエンド デザイン IT基礎知識

はじめてのアクセシビリティ対応

目次

はじめに

システム事業部の本田です。

2/19、2/20でDeveloperSummit 2026に参加してきました。

あるセッションでアクセシビリティ対応が取り上げられており、実際にどのような対応をするのか興味を持ったため調べてみました。

event.shoeisha.jp

本記事では、アクセシビリティ対応が初めての方に向けて、アクセシビリティチェックツールであるmiCheckerを用いた手法を紹介します。

アクセシビリティとは

アクセシビリティとは、高齢者や障害者を含むすべての人が、サービスや情報に支障なくアクセスできる状態のことを指します。

ウェブサイトにおけるアクセシビリティチェックは、そのウェブサイトがすべての人にとって使いやすいかどうかを、国際基準やガイドラインに基づいてチェックします。

なぜアクセシビリティ対応が必要なのか

  • 2024年4月の障害者差別解消法改正により、民間企業でも合理的配慮の提供が義務化された
  • 国際基準であるWCAGや、日本のガイドラインであるJIS X 8341-3への準拠が求められている

今回は無料で様々なサイトを試しやすく、信頼できる開発元であるアクセシビリティチェックツールとしてmiChecker(エムアイチェッカー)を利用します。

miChecker(エムアイチェッカー)とは？

miCheckerは、総務省が提供する無償のウェブアクセシビリティチェックツールです。
JIS X 8341-3への対応度合いを確認することができ、以下のような機能を持っています。

  • 音声ユーザビリティ視覚化：スクリーンリーダーによる読み上げ順を視覚的に確認できる
  • ロービジョンシミュレーション：弱視者がどのようにウェブサイトを見ているかを再現できる

www.soumu.go.jp

類似のツールとして、Google提供のLighthouse（無償）やWAIV2・axe Monitor（有料）がありますが、miCheckerは無償でありながら日本のガイドラインであるJIS X 8341-3に基づいた評価ができる点が強みです。

hellouniweb.com

miCheckerの使い方

1. インストール

miCheckerは総務省の公式サイトからダウンロードできます。
Windowsに対応しており、インストール後すぐに使用可能です。

注意
miCheckerの動作にはJava 64bit版 Version 17の実行環境が必要です。事前にインストールされているか確認し、インストールされていない場合はインストールしてください。

2. チェック対象のURLを入力する

miCheckerを起動後、チェックしたいウェブサイトのURLを入力し、ページを読み込みます。

3. 音声ユーザビリティ視覚化を実行する

📢アイコンをクリック / Ctrl+Shift+B で音声ユーザビリティ視覚化を実行します。

音声読み上げシミュレーションのスクリーンショット

スクリーンリーダーが読み上げる順番を視覚的に確認できます。
読み上げ順が不自然な場合、視覚に頼らないユーザーにとって情報が伝わりにくくなるため、注意が必要です。

4. ロービジョンシミュレーションを確認する

👓アイコンをクリック / Ctrl+Shift+O でロービジョンシミュレーションを実行します。

ロービジョンのスクリーンショット

弱視者の視点でウェブサイトがどのように見えるかをシミュレーションできます。
文字の色と背景色のコントラストが不十分な箇所など、視覚的な問題を発見するのに役立ちます。

⚠️ウェブサイトによっては画像のようにヘッダー部分がかぶってしまう場合があります。

シミュレーションのビューのみ確認したい場合Chromeの拡張機能が充実していておすすめです。

手順 ①確認したいWebサイトを表示 ②F12キーを押下し開発者ツールを表示 ③右上の3点を押下 ④More toolsを選択 ⑤Renderingを選択 ⑥Emulate vision deficienciesの項目を変更

5. ワークシートの作成

音声ユーザビリティ視覚化画面から結果を保存するとCSVファイルが作成され、インストール時に同梱されているワークシートに貼り付けると、結果をExcelで管理することができます。

miCheckerで検出できる問題の例

  • 画像のalt属性未設定：スクリーンリーダーが画像の内容を読み上げられない

  • 色のコントラスト不足：WCAGでは通常テキストのコントラスト比は4.5:1以上を推奨

adobe Colorのアクセシビリティチェックツールで色の組み合わせから
コントラスト比の数値の確認が可能

https://color.adobe.com/ja/create/color-contrast-analyzer

  • 読み上げ順序の不整合：HTMLの構造と視覚的なレイアウトが一致していないと読み上げ順が不自然になる

まとめ

  • アクセシビリティ対応は特定のユーザーのためだけでなく、すべてのユーザーが使いやすいウェブサイトを作るための取り組み
  • miCheckerを使うことで、初めての方でも問題点を視覚的に把握できる

まずは自分が関わるウェブサイトをmiCheckerでチェックしてみることをおすすめします！

おまけ：イベント参加感想

個人的に気に入っているセッションは「同じお題をどう描く？　IT漫画家3人に学ぶ“技術を伝える”技術」です。同じコンフリクトを描いてもどう捉えるか、何を伝えたいかによって表現が変わってくるんだと思いました。これからも自分が分かりやすいようにイラストや図を使って学習していこうと思いました。