Call to Action (Button)

Calls to Action are stylized links that attract visual attention and direct users to take a specific action, such as visiting another page or website.

Dos

Use specific language that tells users what will happen when they click on the link

Don'ts

Don’t use long labels - limit to 3 words or fewer

Don’t wrap labels onto 2 lines

Don’t repeat generic labels such as “Learn more” in multiple calls to action on the same page if alternative text can’t be provided for assistive devices

Variations

The Primary style should be used for high-priority user interactions. Used in a variety of components including Pathway and Section Intro.

Open in a new window Open in Playground

The Primary - Large style should be used for high-priority user interactions. Used in Hero components. On mobile, Large and Default are the same.

Open in a new window Open in Playground

Use when an icon is needed to alert users that an atypical action will occur (downloading a file, opening content in a new window).

Open in a new window Open in Playground

Use for a button and text link combination

Open in a new window Open in Playground

The most common style, recommended when many calls to action exist on a page. Use for Cards and groupings of links. This style is always used on mobile (as opposed to the Secondary Large version).

Open in a new window Open in Playground

This style is common. Use in large components such as Pathways and Section Intros. Not recommended for mobile. On mobile, Large and Default are the same.

Open in a new window Open in Playground

Use when an additional, de-emphasized link is necessary, such as a linking to a plain text version of a PDF

Open in a new window Open in Playground

The outline style is another secondary choice. This option is used when a ghost button option is desired. This option can be used in reverse (white text and outline).

Open in a new window Open in Playground

On mobile, Large and Default are the same.

Open in a new window Open in Playground

Another icon can be added in (not the non standard actions)

Open in a new window Open in Playground

Accessibility

Keyboard Accessible

Users are able to use the keyboard to navigate through the call to action (button) using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate and focus can be moved away from the component. WCAG 2.1.1: Keyboard; WCAG 2.1.2: No Keyboard Trap This navigation is done in sequential and logical order when there are multiple call to actions grouped together or when there is a call to action and a plain text file link. WCAG 2.4.3: Focus Order

Color Contrast

A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability WCAG 1.4.3: Contrast (minimum)

Responsive

The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

Plain text

The plain text slot in a download call to action specifically allows users to access a plain text file directly from the call to action element. It is represented as an anchor link within the button, styled distinctly but integrated within the overall call to action design, providing an alternative download option as a plain text file which offers a streamlined way to provide users with essential text files directly through the interface. Appropriate HTML elements and attributes (like aria-label or aria-labelledby) are used to communicate the relationship between the button and the text slot link. WCAG 1.3.1: Info and Relationships

Style, color, and different text styles are used to differentiate the download button from the plain text slot link to ensure that there are multiple visual means of conveying information and indicating an action. WCAG 1.4.1: Use of Color

Plain text

The link text for the plain text slot should clearly indicate that it leads to a plain text file download. By clearly labeling the slot with the action it performs (e.g., “Download Text File” or “View Source Code”), you ensure transparency and communicate the function directly to the user. WCAG 2.4.4: Link Purpose (In Context)

Link

Use effective text to describe what the link is and where it is taking the user. This should be clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. WCAG 2.4.9: Link Purpose (Link Only)

Example of effective text (preferred): Learn more about Innovate Maryland
Example of generic text (avoid): Learn more

Disclaimer: If the visible link text is not sufficiently descriptive, you can use an aria-label attribute to provide additional context for screen reader users. The aria-label should clearly describe the link's purpose and destination.

If the visible text is not necessary for screen readers (e.g., it's redundant or less descriptive), consider using aria-hidden="true" on the visible text element. This ensures that screen readers will prioritize the aria-label.

Example with aria-label and aria-hidden:

<a href="https://example.com/innovate-maryland" aria-label="Learn more about Innovate Maryland"> <span aria-hidden="true">Learn more</span> </a>

This ensures that the link is accessible while maintaining concise visible text.

Content

Recommended character limits

Call to Action text (primary)

12 characters (25 max)

Call to Action text (secondary)

12 characters (50 max)

Layout

Calls to Action contain icon indicator options for links that go off-site, to documents, or to text content for accessibility.