data-dismissタグについて

Question

おそらくBootstrapに固有のものと思うのですが、よくわからないコードがあります。

    <p class="success alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <strong>@flash.get("success")</strong>
    </p>

これらの要素の意味がよくわからず、調べても（調べ方が悪いのだとは思うのですが）よくわかりません。
data-dismissやaria-hiddenはどのような意味を持つのでしょうか？

Answer 1

dismissable は Dismissible alerts（「消せるアラート」みたいなもの）というBootstrapのコンポーネントの一つです。

【Components · Bootstrap】
http://getbootstrap.com/components/#alerts-dismissible

---

aria-hidden は WAI-ARIA で使う属性です。

【role属性とaria-*属性（WAI-ARIA）について【HTML5 Advent Calendar 2012 Day 9】 - E-riverstyle Vanguard】
http://blog.e-riverstyle.com/2012/12/roleariawaiariahtml5-advent-ca.html

【ARIA in HTML 日本語訳】
https://momdo.github.io/html-aria/

【WAI-ARIA の基礎知識 — Website Usability Info】
http://website-usability.info/2014/04/entry_140415.html

Comments

[退会済みユーザー]

回答ありがとうございます。
非常にスッキリしました。
このdata-dismissという要素はalert以外の値を持つことはあるのでしょうか？

[kei344]

> data-dismissという要素はalert以外の値を持つことはあるのでしょうか？
Bootstrap の他のコンポーネントでも使う可能性はありますが、全てを知っているわけではないのでわかりません。（質問文のコンポーネントの場合alert以外の値を持つことは無いと思います）

data-* という属性はHTML5で追加された「自分で勝手に属性値を作れる」独自データ属性というものです。なので、data-dismiss属性も Bootstrap が独自にデータとして使うために使用されているものなので、他のコンポーネントでも使われる可能性はあります。

ちなみに細かい話ですが質問文／コメントでdata-dismissを「タグ」「要素」とかかれていますが、「属性」です。