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"]
(スクリーンリーダー等での読み上げをスキップさせる)