Skip to page content

Buttons

Overview

A more engaging and visible link on a page, in the form of a colored rectangular box that may have an icon (image) next to it to further define its function within the context of the content.

Button Names should provide meaningful calls-to-action, however, it is understandable that the real-estate for these Button Names is short due to the responsive nature of this area. If the other content in the area provide enough contextual meaning, you can use shortened language on the Button Name as long as you also include text in the Hidden Text area. This allows all links to have unique names for accessibility purposes of scanning links outside of context. The resulting link names will be the combination of the Button Name and the Hidden Text.

For example, if you have a Rotating News Block with a “Read More” Button Name on each news block, include in the Hidden Text what they are reading more about, such as “about web accessibility guidelines for email”. Note the lack of a space in front of “about”. This will automatically be appended for screen readers to read “Read More about web accessibility guidelines for email”.

Content Modules using this Layout Component

Example(s)

See the example(s) below for potential solutions for content organization. Please note that not all examples are available as many of these content molecules and components can be flexible. Contact Web Services for creative solutions.

Printable Donation Form