メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

インプットグループ（Input group） v4.0.0設定変更

テキスト入力、カスタム選択、カスタムファイル入力の両側にテキスト、ボタン、またはボタングループを追加して、フォームコントロールを簡単に拡張可能。

基本のインプットグループ（Basic example）v4.0.0設定変更

1つのアドオンまたはボタンをインプットの両側に配置。また、インプットの両側に配置することも可能。<label> はインプットグループの外に置くこと。

見本

●前にアドオン：.input-group-prepend

@

●後にアドオン：.input-group-append

@example.com

●ラベル付きアドオン

https://example.com/users/

●前後にアドオン

$
.00

●コントロールがテキストエリアの場合

テキストエリア付き
Bootstrap3.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group">
	<span class="input-group-addon" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオン<div class="input-group">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
	<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
ラベル付きアドオン<label for="basic-url">ダミーURL</label>
<div class="input-group">
	<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオン<div class="input-group">
	<span class="input-group-addon">$</span>
	<input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
	<span class="input-group-addon">.00</span>
</div>
コントロールがテキストエリア<div class="input-group">
	<span class="input-group-addon" id="basic-textarea">テキストエリア付き</span>
	<textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-addon1">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
	<div class="input-group-append">
		<span class="input-group-text" id="basic-addon2">@example.com</span>
	</div>
</div>
ラベル付きアドオン<label for="basic-url">ダミーURL</label>
<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	</div>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオン<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">$</span>
	</div>
	<input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
	<div class="input-group-append">
		<span class="input-group-text">.00</span>
	</div>
</div>
コントロールがテキストエリア<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-textarea">テキストエリア付き</span>
	</div>
	<textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>

【設定】

  • 前にアドオン：.input-group > [div.input-group-prepend > span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 後にアドオン：.input-group > [input.form-control《コントロール》 + div.input-group-append > span.input-group-text《アドオン》]
  • ラベル付きアドオン：<label> + .input-group
  • 前後にアドオン：.input-group > [div.input-group-prepend > span.input-group-text《アドオン》 + input.form-control《コントロール》 + input.form-control《コントロール》 + div.input-group-append > span.input-group-text《アドオン》]

【注意】

【アクセシビリティの設定】

  • <input> には、
    • アドオンが1つだけの場合は aria-describedby 属性（アドオン部のIDを指定）
    • アドオンが2つの場合は aria-label 属性（代替テキストを指定）
    を入れる

【変更履歴】

  • 【v4.0.0】
    • アドオン：span.input-group-addon ⇒ div.input-group-{prepend|append} > span.input-group-text

 

インプットグループのラッピング（Wrapping）v4.2.1新設

インプットグループ内のカスタムフォームフィールドの検証に対応するために、インプットグループはデフォルトでは flex-wrap：wrap（折り返しあり）で囲まれている。.flex-nowrap（折り返しなし）でこれを無効に。

見本
@
設定例
<div class="input-group flex-nowrap">
	<div class="input-group-prepend">
		<span class="input-group-text" id="addon-wrapping">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addon-wrapping">
</div>

【設定】

  • .input-group に .flex-nowrap を追加

 

インプットグループのサイズ（Sizing）

相対的なフォームサイズのクラスを .input-group 自体に追加すると、その中の内容は自動的にサイズ変更される。各要素のフォームコントロールサイズのクラスを繰り返す必要はない。

個々のインプットグループ要素のサイズ設定はサポートされていない。

見本

●大きめ：.input-group-lg

大きめ

●小さめ：.input-group-sm

小さめ

※デフォルト（参考）

デフォルト
設定例
大きめ<div class="input-group input-group-lg mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroup-sizing-lg">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-lg">
</div>
小さめ<div class="input-group input-group-sm mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroup-sizing-sm">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-sm">
</div>

【設定】

  • .input-group に .input-group-{size}（上記の「サイズの種類」から選択）を追加

 

チェックボックスとラジオボタン（Checkboxes and radios）

インプットグループのアドオン内にテキストではなくチェックボックスまたはラジオボタンのオプションを配置。

見本

●チェックボックスの場合

●ラジオボタンの場合

設定例
チェックボックスの場合<div class="input-group mb-3">
	<div class="input-group-prepend">
		<div class="input-group-text">
			<input type="checkbox" aria-label="...">
		</div>
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>
ラジオボタンの場合<div class="input-group">
	<div class="input-group-prepend">
		<div class="input-group-text">
			<input type="radio" aria-label="...">
		</div>
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>

【設定】

  • チェックボックス：.input-group > [div.input-group-{prepend|append} > input[type="checkbox"]]《アドオン》
  • ラジオボタン：.input-group > [div.input-group-{prepend|append} > input[type="radio"]]《アドオン》

【アクセシビリティの設定】

  • チェックボックスやラジオボタン部分の <input> にも aria-label 属性（代替テキストを指定）を入れる

 

マルチインプット（Multiple inputs）v4.0.0新設

複数の <input> が視覚的にサポートされているが、検証スタイルでは単一の <input> を持つインプットグループに対してのみ使用可能。

見本
名前と名字
設定例
<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">名字と名前</span>
	</div>
	<input type="text" class="form-control" aria-label="名字">
	<input type="text" class="form-control" aria-label="名前">
</div>

【設定】

  • コントロール部分に複数の input.form-control を入れる

 

マルチアドオン（Multiple addons）

複数のアドオンがサポートされており、チェックボックスやラジオボタンの入力バージョンと混在させることも可能。

見本

●前にアドオン

$ 0.00

●後にアドオン

$ 0.00
設定例
<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text">$</span>
		<span class="input-group-text">0.00</span>
	</div>
	<input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
</div>
後にアドオン<div class="input-group">
	<input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
	<div class="input-group-append">
		<span class="input-group-text">$</span>
		<span class="input-group-text">0.00</span>
	</div>
</div>

【設定】

  • 片側に2つのアドオンを入れる（アドオンはチェックボックスやラジオボタン付きでも可）

 

ボタンアドオン（Button addons）v4.0.0設定変更

アドオン部分がボタンになっている。

見本

●前にボタン

●後にボタン

●前後にボタン

●前に複数のボタン

●後に複数のボタン

Bootstrap3.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
</div>
後にボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>
前後にボタン<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>
前に複数のボタン<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
</div>
後に複数のボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" id="button-addon1" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon1">
</div>
後にボタン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon2">
	<div class="input-group-append">
		<button type="button" id="button-addon2" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
前後にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
前に複数のボタン<div class="input-group mb-3">
	<div class="input-group-prepend" id="button-addon3">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon3">
</div>
後に複数のボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon4">
	<div class="input-group-append" id="button-addon4">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
設定例

【設定】

  • .input-group > [div.input-group-{prepend|append} > button.btn]《アドオン》

【変更履歴】

  • 【v4.0.0】
    • span.input-group-btn ⇒ div.input-group-{prepend|append}

 

ドロップダウン付きボタンアドオン（Buttons with dropdowns）v4.6.1設定変更

アドオン部分がボタンドロップダウンになっている。

見本
メニュー1 メニュー2 メニュー3 その他リンク
メニュー1 メニュー2 メニュー3 その他リンク
Bootstrap3.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			アクション <span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			アクション <span class="caret"></span>
		</button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
</div><!-- /.input-group -->
Bootstrap4.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			アクション
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-prepend -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			アクション
		</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-append -->
</div><!-- /.input-group -->

【設定】

  • .input-group > {div.input-group-{prepend|append} > [button.btn.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}《アドオン》
  • 後にボタンドロップダウンがつく場合は、div.dropdown-menu に .dropdown-menu-right を追加

【変更履歴】

  • 【v4.0.0】
    • アドオンボタン：.input-group-btn ⇒ .input-group-{prepend|append}
    • キャレット（▼）：<span class="caret"></span> の設定は不要
    • ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
    • 仕切り線： li.divider ⇒ div.dropdown-divider

 

分離ボタンのアドオン（Segmented buttons）v4.6.1設定変更

アドオン部分が分離ボタンになっている。

見本
メニュー1 メニュー2 メニュー3
その他リンク
メニュー1 メニュー2 メニュー3
その他リンク
Bootstrap3.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">アクション <span class="caret"></span></button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">アクション <span class="caret"></span></button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
</div><!-- /.input-group -->
Bootstrap4.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">アクション</button>
		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-prepend -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary">アクション</button>
		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-append -->
</div><!-- /.input-group -->

【設定】

  • .input-group > {div.input-group-{prepend|append} > [button.btn《ボタン》 + [button.btn.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》]}《アドオン》
  • 後にボタンドロップダウンがつく場合は、div.dropdown-menu に .dropdown-menu-right を追加

【アクセシビリティの設定】

  • .dropdown-toggle と同じ要素に、aria-expanded="false" 属性（要素の開閉の状態を示す）を入れる

【変更履歴】

  • 【v4.0.0】
    • アドオンボタン：.input-group-btn ⇒ .input-group-{prepend|append}
    • キャレット（▼）：<span class="caret"></span> の設定は不要
    • ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
    • 仕切り線： li.divider ⇒ div.dropdown-divider
  • 【v4.6.1】
    • ドロップダウンボタンの設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に

 

カスタムフォーム（Custom forms）v4.0.0新設

インプットグループには、カスタム選択とカスタムファイル入力のサポートが含まれる。これらのブラウザのデフォルトバージョンはサポートされていない。

カスタム選択メニュー（Custom select）

見本
設定例
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<label class="input-group-text" for="inputGroupSelect01">オプション</label>
	</div>
	<select class="custom-select" id="inputGroupSelect01">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にアドオン<div class="input-group mb-3">
	<select class="custom-select" id="inputGroupSelect02">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<div class="input-group-append">
		<label class="input-group-text" for="inputGroupSelect02">オプション</label>
	</div>
</div>
前にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<select class="custom-select" id="inputGroupSelect03" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にボタン<div class="input-group">
	<select class="custom-select" id="inputGroupSelect04" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<div class="input-group-append">
		<button class="btn btn-outline-secondary" type="button">ボタン</button>
	</div>
</div>

【設定】

【注意】

  • 選択メニューの幅は、メニューの幅ではなく100%になる

カスタムファイル選択（Custom file input）

※注意：v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済

見本
アップロード
アップロード
設定例
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
	</div>
	<div class="custom-file">
		<input type="file" id="inputGroupFile01" class="custom-file-input" aria-describedby="inputGroupFileAddon01">
		<label class="custom-file-label" for="inputGroupFile01" data-browse="参照">ファイル選択...</label>
	</div>
</div>
後にアドオン<div class="input-group mb-3">
	<div class="custom-file">
		<input type="file" id="inputGroupFile02" class="custom-file-input" aria-describedby="inputGroupFileAddon02">
		<label class="custom-file-label" for="inputGroupFile02" data-browse="参照">ファイル選択...</label>
	</div>
	<div class="input-group-append">
		<span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
	</div>
</div>
前にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
	</div>
	<div class="custom-file">
		<input type="file" id="inputGroupFile03" class="custom-file-input" aria-describedby="inputGroupFileAddon03">
		<label class="custom-file-label" for="inputGroupFile03" data-browse="参照">ファイル選択...</label>
	</div>
</div>
後にボタン<div class="input-group">
	<div class="custom-file">
		<input type="file" id="inputGroupFile04" class="custom-file-input" aria-describedby="inputGroupFileAddon04">
		<label class="custom-file-label" for="inputGroupFile04" data-browse="参照">ファイル選択...</label>
	</div>
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
	</div>
</div>

【設定】

  • コントロールの部分を div.custom-file > [input.custom-file-input[type="file"] + label.custom-file-label] のカスタムファイル選択にする

【注意】

  • ファイル選択の幅は、メニューの幅ではなく100%になる

 

アクセシビリティ（Accessibility）

すべてのフォームコントロールに適切なアクセス可能な名前を付けて、それらの目的を支援技術のユーザーに伝えることができるようにする。これを実現する最も簡単な方法は、<label> 要素を使用するか、ボタンの場合は、<button>...</button> コンテンツの一部として十分に説明的なテキストを含めること。

可視の <label> や適切なテキストコンテンツを含めることができない状況では、次のようなアクセス可能な名前を提供する別の方法がある：

  • .sr-only を使用して非表示にされた <label> 要素
  • aria-labelledby を使用してラベルとして機能できる既存の要素を指す
  • title 属性を提供
  • aria-label を使用して要素にアクセス可能な名前を明示的に設定

これらのいずれも存在しない場合、支援技術は placeholder 属性を <input> 要素と <textarea> 要素でアクセス可能な名前のフォールバックとして使用することに頼ることがある。このセクションの例では、いくつかの提案されたケース固有のアプローチを提供する。

視覚的に非表示のコンテンツ（.sr-only, aria-label さらにはフォームフィールドにコンテンツが含まれると表示されなくなる placeholder コンテンツも）を使用すると支援技術のユーザーにメリットがあるが、ラベルテキストが表示されない場合もあり、特定のユーザーにとって問題がある。アクセシビリティとユーザビリティの両方において、一般的に何らかの形の可視ラベルが最善のアプローチである。

ページ移動