Wayfinding

There are multiple variations of our button component to allow for different variations of visual loudness. This allows designers to balance visual priority of content throughout the interface.

You can see an example of how a user with low literacy can use visual loudness to help complete there task.

Buttons as links

Our buttons can be implemented as links ( <a> ) or as buttons ( <button> ). We provide the flexibility so users can make the most semantic markup possible. Using incorrect HTML in certain situations can cause accessibility issues.

Underline on hover

Buttons have an underline on hover in order to address WCAG2.0 Criterion 1.4.1

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Note Focus state is not underlined as it is conveyed using the global focus outline.

Round corners

It was discovered during usability observation that the secondary button and text inputs could sometimes be mistaken for layout or design elements with borders. The border-width was increased, and a border-radius was added to interactive elements.

Note The border-radius is removed on focus. This is because the focus outline does not receive the radius.

Note The border-radius is not supported in IE8.