Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
閉じるアイコンボタン(Close icon)
アラート、モーダル、トーストなどのコンテンツを消すには、一般的に閉じるアイコンを使用。
aria-label には、必ずスクリーンリーダー用のテキストを入れること。
見本
設定例 ※ボタン部分のみの記載
<button type="button" class="close" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
【設定】
button.close[aria-label]><span aria-hidden="true">×</span>- アイコンとなる
×は、×と記述してエスケープ処理をする
【注意】
- 実際に閉じる動作をさせるには、
button.close[aria-label]にdata-dismiss="xxx"を入れる
(xxxの部分は、アラートの場合はalert、モーダルの場合はmodal、トーストの場合はtoast)
【アクセシビリティの設定】
- アイコンとなる
<button>に、aria-label属性(アイコンボタンのラベリング)span[aria-hidden="true"](スクリーンリーダー等での読み上げをスキップさせる)