アクセシビリティ、準拠して終わりじゃない！サイト更新担当者が毎回確認したい6つのポイント

「専門業者にチェックしてもらって、やっとJIS準拠のサイトになった！」
そんな安心もつかの間、「明日から自分でお知らせやブログを更新するのが怖い…」と感じていませんか？

実は、ウェブアクセシビリティは「一度クリアすれば終わり」ではありません。日々の更新の積み重ねで、少しずつ「使いにくいサイト」に戻ってしまうことがあるのです。

今回は、HTMLの知識がなくても実践できる「更新時に守りたい6つのポイント」を、実際に弊社が対応した修正事例も交えながら解説します。

そもそも、なぜ日々の更新でアクセシビリティが下がるのか

専門業者によるチェックを経て「準拠」したサイトは、いわば「ぴかぴかの新築状態」です。しかし、CMSを使って担当者ご自身が更新される際に、ルールを意識しないまま更新を続けると、品質は少しずつ落ちていきます。

特に問題になりやすいのは次の場面です。

• ブログに写真を追加するとき
• バナーやスライド画像を自作するとき
• 新しいお知らせやページを作るとき
• PDFファイルをアップロードするとき

以下の6点を意識するだけで、せっかく高めたアクセシビリティを長く保つことができます。

ポイント1｜画像には必ず「説明文（代替テキスト）」を入れる

「代替テキスト」とは、目が見えない方が使う音声読み上げソフトが読み上げる画像の説明文のことです。
管理画面で画像を追加するとき「代替テキスト」や「説明」という入力欄がありませんか？
ここを空欄のままにしていると、読み上げソフトには「画像があること」しか伝わりません。

【NGの例】
入力欄を空欄のまま画像をアップロードする
「image001」「写真1」など、内容がわからない言葉を入れる

【OKの例】
「2026年度入社式の集合写真」
「秋の新作キャンペーンのバナー。10月1日〜31日まで」

その画像が表示されなくなったとき、または目をつぶって音声だけで聞いたとき、ページの内容が伝わるかどうかで考えてみましょう。

【実際の修正事例】
13枚の画像のうち、8枚に代替テキストが設定されていませんでした。
画像を一つひとつ確認し、内容に合った説明文を追加しました。

ポイント2｜リンクは「こちら」ではなく「行き先」がわかる言葉に

「詳細はこちら」「クリックしてください」というリンク文言は、音声読み上げソフトを使う方にとって不親切です。
読み上げソフトにはページ内のリンクだけを一覧表示する機能があり、その一覧で「こちら」「こちら」「こちら」と並んでしまうと、どれがどこへのリンクかまったくわかりません。

【NGの例】
「詳しい資料については こちら をご覧ください。」
「クリック してお申し込みください。」

【OKの例】
「2025年度の会社案内資料（PDF）をダウンロードする」
「アクセシビリティサービスページへ」

リンクの文字だけを取り出して読んだとき、「どこに行くか」「何ができるか」がわかれば合格です。

ポイント3｜見出しの「レベル」を飛ばさない

WordPressの編集画面では、文字を「見出し2」「見出し3」などの見出しブロックに設定できます。
この見出しは本の目次のような役割を担っており、音声読み上げソフトはこの構造をもとにページの内容を整理して伝えます。

「文字を大きく目立たせたいから」という理由で、見出しのレベルを飛ばして設定するのはNGです。

【NGの例】
見出し2「診療科のご案内」
→ 次に見出し4「内科」（見出し3を飛ばしている）

【OKの例】
見出し2「診療科のご案内」
→ 見出し3「内科」
→ 見出し3「外科」

見出しは「文字を大きくするためのボタン」ではなく「内容の階層を示すボタン」です。デザインの好みで選ぶのではなく、内容の構造に合わせて順番通りに使いましょう。

【実際の修正事例】
見出しの順番のずれによってスクリーンリーダーが内容を正しく伝えられない状態を複数のページで確認しました。
更新担当者が意識するだけで防げるケースがほとんどです。

ポイント4｜「色」だけで情報を伝えない

「必須項目は赤字で表示しています」「期限切れは赤くなります」という案内は、色の区別がつきにくい方（色覚特性のある方）や、音声読み上げソフトを使う方には伝わりません。
色は「補助的な手段」であり、「唯一の手段」にしてはいけません。

【NGの例】
赤い文字だけで「※この項目は必須です」と表示
色が変わっているだけで「期限を過ぎています」と伝える

【OKの例】
「【必須】この項目は入力が必要です」と文字でも記載する
「【重要】期限を過ぎています」とアイコンや言葉を添える

色をモノクロにしても情報が伝わるかどうか確認してみましょう。伝わらない場合は、言葉やアイコンを補う必要があります。

ポイント5｜PDFは「文字が選択できる形式」で保存する

チラシや案内を画像として作成し、そのままPDFにしてアップロードしていませんか？画像として書き出されたPDFは、音声読み上げソフトが中身を一行も読めないことがあります。

【NGの例】
デザインソフトで作った画像をそのままPDFに変換してアップロードする
→ 読み上げソフトには「PDFがあること」しか伝わらない

【OKの例】
WordやPowerPointなど、文字が入力されたデータから「テキスト情報付きPDF」として保存する
（Acrobatで「テキスト選択ができる状態かどうか」確認することも有効です）

保存したPDFを開いて、マウスで文字を選択（ドラッグ）できれば、テキスト情報が含まれています。文字を選択できない場合は、読み上げソフトにも読めないPDFです。

ポイント6｜表（テーブル）はシンプルに保つ

会社概要や料金表など、表を使ってコンテンツを整理することは多いと思います。
表はアクセシビリティ対応が難しい要素のひとつで、特に音声読み上げでは構造が正しくないと内容がうまく伝わりません。

・セルの結合（複数のセルをひとつにまとめること）をなるべく多用しない
・1つの表に情報を詰め込みすぎない
・表の直前に、その表の内容を説明する「見出し」を入れる

【実際の修正事例】
7つの表にキャプション（表の題名）が設定されていませんでした。視覚的なデザインを変えずに、音声読み上げソフトだけが認識できる「隠しキャプション」を技術的に追加しました。

「誰かが困るかも」と一瞬立ち止まる習慣を

アクセシビリティを維持するコツは「完璧を目指して更新を止めること」ではなく、「困る人のパターンを知っておくこと」です。

更新前にこの6点を思い出してみてください。

• 画像に説明文（代替テキスト）を入れたか
• リンクの文言は「行き先」がわかる言葉になっているか
• 見出しのレベルを飛ばしていないか
• 色だけで情報を伝えていないか
• PDFは文字が選択できる形式で保存しているか
• 表の上に内容がわかる見出しを入れているか

「この書き方で目が見えない方に伝わるかな？」とほんの一瞬立ち止まる。
その積み重ねが、誰にとっても優しいサイトを作り上げます。