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>
- 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
<a href="#" id="button-example2" class="button button--a11y button--secondary" title="Button Label"><span>Fully A11y Label</span></a>
You can extend buttons as you would any other element using BEMS