デザイン面でのWebアクセシビリティ対策 -操作可能-

Writer：miyajima　更新日：2025/11/18

【操作可能】の視点でAAレベルを達成するためのポイント

操作可能面では、Aの基準で、キーボード操作や入力時間に制限時間を設けない こと、スライドショーなどの切り替えアニメーションに「停止・一時停止・非表示」機能を設けることなどが求められています。
そして、さらにAAの基準となった場合に求められるのが、

1. 複数の手段
2. 見出し及びラベル
3. フォーカスの可視化

です。今回はこの中でも比較的簡単に実装できるデザイン改善案のご紹介です。

「複数の手段」の改善方法

ここでいう「複数の手段」というのは、特定のページへのリンクに到達できる手段を 異なる経路で複数用意することを指します。
例えば、会社概要ページを例に考えると、複数の手段として考えられる誘導は以下の通りです。

1. ヘッダー（グローバル）メニューからのリンク
2. サイトマップページからのリンク
3. サイト内検索（検索結果）からのリンク
4. フッター（ページ下部）からのリンク
5. FAQページなどのリンク

また、リンクテキストは文脈に依存しない具体的な名称を付けるとよりアクセシブルです。

小規模サイトであれば、静的作成のサイトマップの作成も比較的ハードルが低いでしょう。
サイトマップの要素をフッターにデフォルトで埋め込む方法もナビゲーションとして有効です。

サイトマップページ例

フッター例

大規模なサイトでWordPressなどを利用している場合、サイトマップ作成用プラグインを利用すると手軽に作成できます。

例：WP Sitemap Page
サイトマップのリストに掲載したい内容をカスタマイズし、固定ページにショートコードを貼り付けて使用します。
さらに、リンクにはARIAラベルを付与することでスクリーンリーダー利用者にも理解しやすくなります。

「見出し及びラベル」の改善方法

ページタイトル（titleタグ）を正しく設定する

個別ページに全て社名だけを入れると、 ページごとの内容が識別できずスクリーンリーダーでも区別できません。
同じページ名にならないよう、具体的な名称を付けます。

例：

• お問い合わせ:社名
• サービスTOP:社名

また、記事詳細ページもタイトルが「お知らせ詳細」のままでは不十分です。
→ 記事ごとのタイトルを挿入する

記事カードのタイトルと詳細ボタンの順序を意識する

HTMLソース上で見出し→本文→リンクの順になるように調整することで、スクリーンリーダーや音声読み上げソフトで正しく読み上げられます。

フォームのplaceholderタグを見出しやラベルの代わりに使用しない

デザイン上スッキリさせるために placeholder だけで入力内容の説明をするのは避け、必ず label タグや fieldset 、 legend タグで明示的にラベルを付与します。
また、補足情報や注意書きも small や aria-describedby で表示することで、アクセシブルなフォームとなります。