Buttons
Used as either traditional buttons (submit stuff) or broad call to actions. Can be applied to either links or HTML5 buttons, or pseudo elements. If using an anchor tag as a button (not in terms of visual look, but in terms of interaction), ensure to add an ARIA role of 'button'.
During design and development phases, this guide is best viewed in Google chrome as it is still a working document.
Constructing an accessible (A11y) button
<a href="#" id="button-example" class="button button--a11y " title="Button Label"><span>Fully A11y Label</span></a>Notes
- By combining a wrapped span element and a CSS :after class, we can visually hide the button's text, and replace with the shorted text from within the title
- Ensure to add a descriptive title and full text within the span, and shorter text only within the title.
- When combining with a CMS, we advice that the button text is generated, and the label text is controlled.
- Use this style of button as default, unless prevented from doing so by CMS or plugins
Secondary buttons
<a href="#" id="button-example2" class="button button--a11y button--secondary" title="Button Label"><span>Fully A11y Label</span></a>Notes
You can extend buttons as you would any other element using BEMS