こんにちは。デザイン事業部でデザイナーをやっている金沢です。

Webアクセシビリティは、すべてのユーザがウェブコンテンツを利用できるようにするために不可欠です。

本記事では、WCAGの達成基準・達成方法を読み進める中で出会う専門用語や、馴染みの薄い表現について、意味や使われ方を整理・解説します。この記事を読んで少しでもWCAGについて理解を深めていけるようになれば幸いです。

WCAGとは

WCAG（Web Content Accessibility Guidelines）は、ウェブコンテンツをすべての人々がアクセスできるようにするための国際的なガイドラインです。これらのガイドラインは、視覚、聴覚、身体、認知などの障害を持つ人々がウェブを利用しやすくすることを目的としています。

WCAG2.0は、大きく分けると「知覚可能」「操作可能」「理解可能」「堅牢」の4つの原則に基づいています。また原則の下に12のガイドラインが設けられており、さらに各ガイドラインには細かい達成基準が設けられています。それぞれの達成基準にはそれを満たすための達成方法が記されており、これを確認、実践することでより良いWebアクセシビリティへの対応を行うことができます。
参考：https://waic.jp/translations/WCAG20/Overview.html#guidelines

そしてこの「達成基準と達成方法」の解読が非常に難解で、日本語訳を読んでいるにも関わらず言っている意味かわからない…という状況によく陥ります。 そこで、この記事では私にとってあまり馴染みがなく、難しいと感じたWCAGに登場する用語について解説していこうと思います。

📌 フォームコントロール

「フォームコントロール」は
WCAG達成方法H44「テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する」や
WCAG達成方法G13「コンテキストの変化を引き起こすフォームコントロールへの変更が行われる前に、何が起こるのかを説明する」
などの達成方法に登場する言葉です。

フォームコントロール とは、ユーザがデータを入力・選択できるインターフェース要素 のことです。
HTMLでは、主に input, textarea, select, buttonなどの要素が該当します。

代表的なフォームコントロール

① テキスト入力系

フォーム要素 説明 例
input type=text 1行のテキスト入力 名前入力欄
input type=email メールアドレス専用入力 メールフォーム
input type=password パスワード入力 ログインフォーム
textarea 複数行のテキスト入力 コメント欄・問い合わせフォーム

② 選択肢を提供するコントロール

フォーム要素 説明 例
input type=radio 単一選択（ラジオボタン） 性別選択
input type=checkbox 複数選択（チェックボックス） 利用規約の同意
select ドロップダウンメニュー 都道府県選択

③ ボタン類

フォーム要素 説明 例
button ボタン 送信ボタン
input type=submit フォーム送信ボタン 送信ボタン

④ 特殊な入力コントロール

フォーム要素 説明 例
input type=date 日付選択 誕生日入力
input type=number 数値入力 年齢・数量入力
input type=file ファイル選択 画像アップロード

まとめ

  • フォームコントロールは、ユーザがデータを入力・選択する要素
  • テキスト入力、選択肢、ボタン、特殊入力などがある
    つまり「フォームコントロール = ユーザが直接操作する重要なUI要素」と認識しておきましょう。

📌 インタラクティブな要素

「インタラクティブな要素」は
WCAG 達成方法G59「コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する」
などに登場する言葉です。

まず英単語として”interactive”とはどういう意味であったか確認します。
形容詞として「相互に作用する，相互作用の」という意味があります。
「何かと関係して動く要素」ということが想像できますね。

「インタラクティブな要素」とは
ユーザが操作できるウェブページ上の要素のことを指します。
これらは通常、ユーザが何らかのアクションを行うことで反応するものです。

具体例:

  • リンク（aタグ）
    • ユーザがクリックしてページを移動するためのリンク
  • ボタン（button タグ）
    • フォーム送信やアクションをトリガーするボタン
  • フォームフィールド（inputや textareaタグ）
    • ユーザが情報を入力するためのフィールド

先ほど確認したフォームコントロールとほぼ同じ内容を指していることがわかります。
フォームコントロールとインタラクティブな要素の違いとは何か以下の表にまとめました。

観点 📌 フォームコントロール 📌 インタラクティブな要素
定義 情報の入力や選択を行うUI要素 ユーザが操作・対話するすべての要素
目的 データ入力・送信 操作全般（移動・表示・入力など）
例 テキスト入力欄、チェックボックス、ラジオボタン、セレクトメニュー、ボタン フォームコントロール＋リンク、メニュー、タブ、アコーディオンなど

つまりフォームコントロールはインタラクティブな要素の一部ということがわかります。

インタラクティブな要素とフォームコントロールの関係図

まとめ

  • フォームコントロールは「ユーザが情報を入力する」ための要素
  • インタラクティブな要素は「ユーザが操作する」すべての要素
  • フォームコントロールはインタラクティブ要素に含まれる下位分類である

📌 ユーザエージェント

「ユーザエージェント」は
WCAG達成方法G142「ズーム機能をサポートする一般に入手可能なユーザエージェントのあるウェブコンテンツ技術を使用する」や
WCAG達成方法G149「フォーカスを受け取るときに、ユーザエージェントによって強調されるユーザインタフェース コンポーネントを使用する」
などに登場する言葉です。

「ユーザエージェント」とは
ユーザがウェブのコンテンツを見るために使っているソフトウェアのことを指しています。
人がコンテンツにアクセスするために使うアプリやソフトは、全てユーザエージェントです。

具体例

カテゴリ 具体例 説明
📌 ブラウザ Chrome, Firefox, Safari, Edge 最も一般的なユーザエージェント
📌 検索エンジンのクローラー Googlebot, Bingbot ウェブページを巡回するボット
📌 音声読み上げソフト（スクリーンリーダー） JAWS, NVDA, VoiceOver アクセシビリティ用途

まとめ

  • ユーザエージェント＝「ユーザがコンテンツを見るために使うソフト」
  • Chromeも、ユーザエージェントの一つ

📌 追加コンテンツ

「追加コンテンツ」は
WCAG達成基準 1.4.13 ホバー又はフォーカスで表示されるコンテンツ
の達成方法として以下の文脈で確認することができます。

  • 「ポインタホバー又はキーボードフォーカスを動かさずに追加コンテンツを非表示にするメカニズムが存在する。ただし、追加コンテンツが入力エラーを伝える場合や、他のコンテンツを不明瞭にしたり置き換えたりしない場合は除く。」
  • 「ポインタホバーによって追加コンテンツを表示させることができる場合、その追加コンテンツを消すことなく、ポインタを追加コンテンツ上で動かすことができる。」

「追加コンテンツ」とは
ユーザがフォーカスを当てたりホバーしたりすることで表示される補足的な情報のことです。
よく取り上げられるのはツールチップですが、これ以外にも以下のようなものがあります。

具体例

  • ポップオーバー
    • ユーザがボタンやリンクをクリックすると表示される、小さなウィンドウやボックス
    • 例: 「詳細を見る」ボタンをクリックすると、補足情報が表示される
  • モーダル
    • 画面の一部または全体を覆って表示される、重要な情報を示すダイアログ
    • 例: 「利用規約」ボタンをクリックすると、ポップアップウィンドウで規約が表示される
  • ドロップダウンメニュー
    • ユーザがクリックまたはホバーすると開く、メニュー形式の追加コンテンツ
    • 例: ナビゲーションメニューやフォームの選択肢
  • アコーディオン
    • セクションをクリックすると内容が展開・折りたたまれるUI要素
    • 例: FAQ（よくある質問）で、質問をクリックすると回答が表示される
  • 通知
    • 一時的に表示されるメッセージ。通常は一定時間後に消える
    • 例: 「変更が保存されました」というトースト通知

まとめ

  • 追加コンテンツ = ユーザのクリックやホバー、フォーカスによって表示される補足的な情報
  • 代表例はツールチップ

📌 フォーカスインジケータ

「フォーカスインジケータ」は
WCAG達成方法 G165: 視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する
WCAG達成方法 G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する
などで登場する言葉です。

「フォーカスインジケータ」とは
キーボード操作ユーザのために、現在どのインタラクティブ要素（リンクやボタンなど）が操作対象（フォーカス）になっているかを視覚的に明示する表示のことです。

フォーカスインジケータは、たとえば枠線や色の変化、下線、背景色の変更などで表現されます。
これにより、ユーザはTabキーなどで移動した際、どの要素がアクティブなのかを一目で把握できます。

iret.media上でTabキーを押すとアクティブになっている要素に青い枠がついてTabキーを押すごとにその枠が移動していくことがわかると思います。この青い枠こそフォーカスインジケータです。簡単に確認できるのでぜひ試してみてください。

つまり、フォーカスインジケータは今どこにフォーカスがあるかを誰にでも分かりやすく示すための「視覚的なサイン」であり、アクセシビリティの観点から非常に重要な役割を担っています。

またキーボード操作ユーザがフォーカスインジケータに関して独自の設定を行っている場合があるため、基本的にはブラウザデフォルトのフォーカスインジケータを使用するのが良いとされています。ブラウザのアップデートによる改善の恩恵も自動的に受けられることもあり利点があると考えられます。

一方で、ブラウザデフォルトのフォーカスインジケータとWebページの色で調和が取れておらず見にくい場合は、独自実装も検討する必要があります。その場合はコントラストやサイズ要件を満たす必要があるため注意しましょう。

まとめ

  • フォーカスインジケータには、現在どの要素がキーボードフォーカスを持っているかを視覚的に明示する役割がある
  • キーボード操作や支援技術を使うユーザにとって、操作対象を見失わないために不可欠な機能である
  • ブラウザのデフォルトフォーカスインジケータは、WCAGの視認性やコントラストの要件を標準でクリアしているため、基準遵守が簡単

📘 関連ワード「キーボードナビゲーション」

フォーカスインジケータを語る文脈でよく「キーボードナビゲーション」というワードも見かけます。
「キーボードナビゲーション」とは
マウスを使わず、キーボードだけでWebページを操作できるということです。
例えば、Tabキーや矢印キーなどでリンクやボタン、フォーム要素間を移動し、EnterやSpaceキーで操作できる状態が求められます。

具体例:

  • Tab：フォーカスを次の操作可能な要素（リンク、ボタン、フォームなど）に移動
  • Shift + Tab：前の要素に戻る
  • Enter / Space：リンクを開く、ボタンを押す
  • 矢印キー：ドロップダウンリストやメニューの選択

以上を踏まえると、フォーカスインジケータとキーボードナビゲーションの関係は
「キーボードナビゲーションが上位概念」であり、その一部として「フォーカスインジケータ」が位置づけられます。

つまり「キーボードナビゲーション」は
キーボード操作でウェブサイトの全機能にアクセス・操作できること、そして
「フォーカスインジケータ」は
キーボードナビゲーション時に、現在どの要素が操作対象（＝フォーカスされている）かを視覚的に示すもの、ということです。

まとめ

  • キーボードナビゲーションは、ウェブサイトをキーボードだけで操作・移動できることを指す上位概念である
  • フォーカスインジケータはキーボードナビゲーションを成立させるための必須要素であり、キーボードナビゲーションの一部である

📌 ユーザインターフェース コントロール（ユーザインターフェースコンポーネント）

「ユーザインターフェースコントロール」は
WCAG 達成基準 4.1.2 名前 (name) ・役割 (role) 及び値 (value) の
「この達成基準の意図は、支援技術がコンテンツにあるユーザインタフェース コントロールの状態に関する情報を収集し、有効化 (又は設定) 及び最新の状態を保つように保証することである。」
のような文脈で登場する言葉です。

「ユーザインターフェースコントロール」とは
ユーザがウェブページ上で操作できるUIの部品や要素を指します。
つまり、ユーザが情報を入力したり、何らかの操作を行うための画面上のパーツが該当します。

またユーザインターフェース コントロールは、ほぼ同義でユーザインターフェースコンポーネントと語られることもあります。

具体例

  • ボタン
    • クリックすると何かが起こる
  • リンク
    • 別のページや場所に移動する
  • 入力欄
    • テキストや数字を入力する
  • チェックボックス
    • 複数の選択肢を選べる
  • ラジオボタン
    • 一つだけ選べる選択肢
  • スライダー
    • 数値や音量を調整できる

これらのコントロールは、マウス、キーボード、音声コマンドなど、さまざまな方法で操作できる必要があり、支援技術（スクリーンリーダーなど）にも状態や役割、変化が正しく伝わることが求められます。

これらを踏まえるとユーザインターフェース コントロールは先ほど確認したインタラクティブな要素であるということになります。

まとめ

  • ユーザインタフェース コントロールとは、ユーザが操作可能なUI部品全般を指す
  • アクセシビリティ確保のためには、これらの部品が誰にとっても操作しやすく、情報が取得しやすいように設計・実装されていることが重要
  • 標準的なHTML要素だけでなく、カスタムで作られたコントロールも含まれ、どちらもアクセシビリティ対応が求められる

最後に

これまでWCAGの達成基準、達成方法を読み進めると出会うあまり馴染みのない言葉・用語について一部抜粋し整理してきました。

ガイドラインを読み手に明確に伝えるべく同じような意味の言葉が違う単語として登場していたことが、この記事で確認できたかと思います。またその言葉を見て、なんとなくは意味を想像はできるけれど具体的に説明できるかと言われれば難しい単語が多かったようにも思います。
これらの積み重ねでWCAGのガイドラインは難しい…となってしまっているのではないかと個人的には感じています。

単語に加えて、WCAGの達成基準、達成方法は言葉の言い回しが独特であったりするので、単語の理解だけでは完全に理解し切ることは難しいところがありますが、少しでもWCAGの読み解きの助けになれば嬉しいです。

アイレットではアクセシビリティ対応のウェブサイト制作を行っています。
ご興味ございましたら、以下のWebサイトをご覧ください。
https://cloudpack.jp/lp/a11y/

最後までお読みいただきまして、ありがとうございました！