-
Notifications
You must be signed in to change notification settings - Fork 0
E047
Note: Below is the original page from the Bootlint documentation, some of the info here might not apply to Bootlint-NG!
.btn
is used to style an element as an interactive, clickable button.
Creating button-ish widgets using elements other than <a>
, <button>
, <input>
, or <label>
can cause problems for users of assistive technologies (such as screen readers) since by default such widgets won't be recognized as interactive by the technology, unless you put in extra work involving ARIA attributes, tabindex
attributes, and custom JavaScript.
Such widgets are also semantically dubious. A <button>
element represents a button, with the inherent associated semantics (e.g. can be interacted with via clicking). By contrast, a <div>
or <span>
element has no such inherent meaning (although utilizing ARIA can remedy this, to some degree).
Wrong:
<span class="btn btn-primary">Button</span>
<div class="btn btn-primary">Button</div>
Right:
<a class="btn btn-primary">Button</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Button">
<label class="btn btn-primary">Button</label>
Bootlint-NG documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc. For the original Bootlint documentation this is a fork of, see https://github.com/twbs/bootlint/wiki.