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

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

閉じるアイコンボタン(Close icon)

アラートモーダルトーストなどのコンテンツを消すには、一般的に閉じるアイコンを使用。

aria-label には、必ずスクリーンリーダー用のテキストを入れること

見本

設定例 ※ボタン部分のみの記載
<button type="button" class="close" aria-label="閉じる">
 <span aria-hidden="true">&times;</span>
</button>

【設定】

  • button.close[aria-label] > <span aria-hidden="true">&times;</span>
  • アイコンとなる × は、&times; と記述してエスケープ処理をする

【注意】

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

  • アイコンとなる <button> に、
    • aria-label 属性(アイコンボタンのラベリング)
    • span[aria-hidden="true"](スクリーンリーダー等での読み上げをスキップさせる)
    を入れる

【変更履歴】

  • 【v4.0.0-beta.3】アイコンにカーソルを合わせた際に、指カーソル(cursor: pointer;)に変化しない仕様を取り止め