Links & Buttons
Hover and focus styling must match
The styling of :hover (mouse) and :focus (keyboard)
pseudo states must be identical. For example, if a link/button changes color and/or
receives an underline when the user mouses over it (hover), those same changes must
be applied when the user tabs to the link/button via keyboard (focus).
Focus outline
The focus outline helps users with low vision to clearly identify which item on the page
has keyboard focus. Do not set outline: 0; without defining an alternative
visual indicator of focus.
Links
Text links can be blue (default) or dark gray.
Always specify href attribute
In order for <a> elements to receive keyboard focus,
they must have an href attribute value defined. Accessibility guidelines require
that all interactions provided to mouse users must also be made available to
keyboard users.
Default link styling
Dark gray link
Buttons
There are four styles of buttons from which to choose. Specific font classes do not
need to be applied to the buttons, as the corporate web font is specified directly
within the cx-button CSS style declaration.
Button Classes
Full-width Buttons
Add the full-width class to a button to make it fill the available container width.
Compact Buttons
Add the cx-button-compact class to a cx-button for smaller buttons (same font size, less padding).
Various HTML Elements as Buttons
Button classes should only be used on <button>, <input>, and <a> elements.
While technically they can be used on elements such as <div> and <span>, screen readers
may ignore keyboard events attached to these elements, leading to a failure of ADA compliance.
Always specify type attribute
Browsers can have different default values for the type attribute of
<button> and <input>elements, so always specify one.
Possible values are submit, reset, and button.
Links used as buttons
If an <a> element is used to mimic the behavior of a button –
for example, triggering in-page functionality instead of linking to another page –
the role of button should be included (role="button"). Never wrap a <button>
with an <a> element, or vice versa, to achieve this functionality as it is not semantic
and may cause issues with keyboard navigation.
Submit and button input elements
The superCuteForms plugin used on crocs.com finds all <input> elements present on a page
and applies custom markup, styling, and browser events. To prevent this behavior, add the
noSuperCute class to all <input> elements using the cx-button class.
Back to Top Link
Crocs Home Link
Button States
Buttons have four possible user interaction states.
Disabled buttons
The disabled class and disabled="disabled"
attribute/value should be added to buttons when interaction with them is
turned off. For example, the submit button for a form is disabled until
all required fields have been populated. Disabled buttons cannot receive
keyboard focus/input or mouse clicks.
Active state
Add the active class to a button to display it as selected.
Also, add the aria-pressed="true" attribute/value so that
the active state will be announced by screen readers.
| Default | Active/Hover | Focus | Disabled |
|---|---|---|---|