CMSを使った運用で見落としがちなアクセシビリティ

「画像をアップして、テキストを入力して、公開ボタンをクリック」

日々のCMS運用は、このようなシンプルな作業の繰り返しかもしれません。
しかし、無意識の作業によって、実は多くのユーザーに情報が届かない可能性があることをご存知でしょうか？

Webサイトは、様々な環境・様々な方法で閲覧されています。Webブラウザからの閲覧だけでなく、スクリーンリーダーなどの支援技術を使って情報を得ている方もいます。 CMSの自由度の高さは、その利便に反して更新担当者の判断ひとつで知らず知らずのうちにアクセシビリティの問題を生んでしまうことがあります。

なぜアクセシビリティが重要なのか

アクセシビリティへの配慮は、単なる「善意」ではありません。

• 法的要請: 障害者差別解消法の改正により、民間事業者にも合理的配慮が義務化
• 社会的責任: すべての人が平等に情報にアクセスできる社会を実現する責任
• ビジネスメリット: より多くのユーザーにリーチでき、SEOにも好影響

本記事では、当社が最低限推奨するアクセシビリティ基準であるWeb Content Accessibility Guidelines (WCAG) 2.2のシングルA項目から、CMS運用で特に見落としがちなポイントをご紹介します。

※ WCAGの達成基準の和訳については ウェブアクセシビリティ基盤委員会（WAIC）作成の日本語訳 から引用します。

「画像」に関する配慮

達成基準 1.1.1 非テキストコンテンツ

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。（中略）

よくある間違い

CMSで画像をアップロードして記事に挿入するだけで完了、としてしまうケースがあります。画像は表示されているので問題ないように見えますが、視覚情報の代替となる情報が不足しています。

<!-- 代替テキストが空、または未設定 -->
<img src="graph-sales-2024.png">
<img src="graph-sales-2024.png" alt="">

※ 出力されたページ上でソースコードやブラウザの開発者ツールから確認することができます。

一般的にCMSにおける画像登録にはalt属性（代替テキスト）も合わせて入力・設定できるように設計されていますが、もし設定することができない場合はCMSを管理されている方に問い合わせてみてください。

なぜ問題なのか

画面上で視覚的に閲覧している場合は情報を得られますが、スクリーンリーダーを使っている方や画像が読み込めない環境ではその画像が何を示しているのか全く分かりません。
「画像」とだけ読み上げられるか完全に読み飛ばされてしまいます。

正しい対応方法

画像の内容を適切にテキストで説明する alt 属性を設定します。

<!-- 良い例 -->
<img src="graph-sales-2024.png" alt="平成27年から令和6年までのグラフ。約1,000から約4,000まで右肩上がりで増加">

画像が伝える情報と代替テキストは等価である必要があります。必要以上に詳しく書きすぎても、逆に情報不足でもいけません。 ただし装飾目的の画像や前後の文脈で説明済みの場合は代替テキストを空（から）にする指定で問題ありません。

「文章構造」に関する配慮

達成基準 1.3.1 情報及び関係性

何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

よくある間違い

見た目を整えるために、記号や改行で「見出し風」「リスト風」に装飾してしまうケースがあります。

【重要なお知らせ】

・お申し込みは3月31日まで
・定員は50名です
・先着順となります

視覚的には見出しやリストのように見えますがHTMLとしての構造を伴わない単なるテキストです。

なぜ問題なのか

支援技術は「見た目」ではなく「構造」を読み取ります。
適切なマークアップがないと以下のような問題が発生します。

• スクリーンリーダーが見出しとして認識できず、ページ内を効率的に移動できない
• リストとして認識されず、項目数や階層が伝わらない

正しい対応方法

文脈に適したHTML要素を用いてマークアップします。

<h2>重要なお知らせ</h2>

<ul>
  <li>お申し込みは3月31日まで</li>
  <li>定員は50名です</li>
  <li>先着順となります</li>
</ul>

達成基準 1.3.2 意味のあるシーケンス

コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読むシーケンスはプログラムによる解釈が可能である。

よくある間違い

情報構造が考慮されず、不適切な見出しレベルが選ばれるケースがあります。

<h1>サービス紹介</h1>

...

<h3>特徴1: 高速処理</h3> <!-- h2を飛ばしている -->

...

<h2>特徴2: 安全性</h2> <!-- h3の後にh2が来ている -->

...

<h4>詳細説明</h4> <!-- 階層がちぐはぐ -->

...

なぜ問題なのか

見出しは文書の「目次」のような役割を果たすため、見出しレベルが不適切だと以下のような問題が発生します。

• 支援技術利用者が文書構造を正しく理解できない
• 見出しジャンプ機能を使用しているユーザーが混乱する

正しい対応方法

見出しレベルを階層的に順序よく設定しましょう。 文字を大きく見せたいからといってh1を多用するのは避けましょう（h1はページに1つが原則）。見た目のサイズはCSSで調整できます。

<h1>サービス紹介</h1>

...

<h2>特徴1: 高速処理</h2>

...

<h3>処理速度の詳細</h3>

...

<h2>特徴2: 安全性</h2>

...

<h3>セキュリティ対策</h3>

...

「表現方法」に関する配慮

達成基準 1.3.3 感覚的な特徴

コンテンツを理解し操作するための説明は、形、色、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない。

よくある間違い

位置や形状だけで説明してしまうケースがあります。

右の画像をご覧ください。

丸いボタンをクリックしてください。

上部のメニューから選択できます。

なぜ問題なのか

• 位置: RWD（レスポンシブデザイン）では、画面幅により配置が変わります
• 形状・色: 支援技術は、形や色を認識できない可能性があります
• 視覚障害のある方には、意味をなさない表現です

正しい対応方法

より具体的で、視覚に依存しない表現を使います。

「2024年売上推移グラフ」をご覧ください。

「お申し込み」ボタンをクリックしてください。

メインナビゲーションの「サービス一覧」から選択できます。

達成基準 1.4.1 色の使用

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。

よくある間違い

色だけで情報を伝えてしまうケースがあります。

赤いボタンは必須項目です

グレーのボタンは現在利用できません

なぜ問題なのか

色覚特性のある方や、モノクロ表示環境では色の区別がつきません。
色だけに頼ると情報が伝わりません。

正しい対応方法

色以外の手段も併用します。
テキストラベル、アイコン、パターン（点線、破線など）を組み合わせることで、色に依存しない情報伝達が可能になります。

<!-- テキストラベルを併用 -->
<button class="required">お名前<strong class="required-mark">（必須）</strong></button>

<button disabled>送信する（現在利用できません）</button>

必須項目には「必須」などのテキスト表記を追加し、非活性ボタンには disabled 属性を設定して状態を示しましょう。

記事公開前の3つのチェックポイント

CMSで更新する際は、以下の3点に注意してアクセシビリティを意識してみましょう。

• 画像に代替テキストを設定したか？
  • 画像が伝える情報をテキストで説明できているか確認
• 見出しやリストを適切にマークアップしたか？
  • 記号で装飾せず、正しい情報構造に則したマークアップがCMSから出力されているか確認
• 位置や色だけで説明していないか？
  • 「右の」「赤い」などの表現を使用しない

まとめ

ここでご紹介したのはあくまでも一例で、CMSの設計や運用方針によっては求められるものや発生しうる問題も異なります。

アクセシビリティへの配慮は、決して難しいものではありません。日々の更新作業の中で「ちょっとした意識」を持つだけで、多くの改善が可能です。

明日から始められること

• 画像アップロード時に代替テキストを入力する習慣をつける
• 情報構造を意識し、見出しやリストはマークアップで表現する
• 記事公開前に上記3つのチェックポイントを確認する

アクセシビリティの向上は、単なる障害者・高齢者対応にとどまりません。
情報が正しく構造化されることで、SEO効果の向上やメンテナンス性の向上にもつながり、結果として、すべてのユーザーにとって使いやすいWebサイトになるのです。

こんな課題はありませんか？

運用面で意識することも大切ですが、CMS自体の仕組みでサポートできることもあります。

• 画像アップロード時に代替テキストの入力を促す仕組みがない
• WYSIWYGエディタで見出しやリストを適切にマークアップできない
• 更新担当者のHTMLスキルにばらつきがあり、品質が安定しない
• 運用ルールやガイドラインが整備されていない

当社にはアクセシビリティの知識に長けたスタッフが多数在籍しています。
「自社のCMSでどこから改善すればいいか分からない」「CMS自体の見直しから相談したい」など、お気軽にご相談ください。よりよいCMS運用に向けて、お手伝いさせていただきます。