# Utility Actions

Utility actions for a webpage including print, email, RSS and more.

## Example

The example below shows utility actions for Print, Email and RSS.

<EmbeddedExample>
  <div className="ds-l-row ds-u-justify-content--end">
    <div className="ds-l-col--2">
      <Button variation="ghost" size="small">
        
        {'Print'}
      </Button>
    </div>
    <div className="ds-l-col--2">
      <Button variation="ghost" size="small">
        
        {'Email'}
      </Button>
    </div>
    <div className="ds-l-col--2">
      <Button variation="ghost" size="small">
        
        {'RSS'}
      </Button>
    </div>
  </div>
</EmbeddedExample>

### Available Actions

In Figma, use the toggle feature to select different utility actions.

<Table>
  <TableCaption>Available utility actions include:</TableCaption>
  <TableHead>
    <TableRow>
      <TableCell key="utility" id="utility">
        {'Utility'}
      </TableCell>
      <TableCell key="action" id="action">
        {'Action'}
      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow key="Print">
      <TableCell key="Utility" headers="utility" stackedTitle="Print Icon">
        <Button variation="ghost" size="medium">
          
          {'Print'}
        </Button>
      </TableCell>
      <TableCell key="Action" headers="action" stackedTitle="Print description.">
        {'Opens print terminal'}
      </TableCell>
    </TableRow>
    <TableRow key="Email">
      <TableCell key="Utility" headers="utility" stackedTitle="Email Icon">
        <Button variation="ghost" size="medium">
          
          {'Email'}
        </Button>
      </TableCell>
      <TableCell key="Action" headers="action" stackedTitle="Email description.">
        {'Opens default desktop email app'}
      </TableCell>
    </TableRow>
    <TableRow key="RSS">
      <TableCell key="Utility" headers="utility" stackedTitle="RSS Icon">
        <Button variation="ghost" size="medium">
          
          {'RSS'}
        </Button>
      </TableCell>
      <TableCell key="Action" headers="action" stackedTitle="RSS description.">
        {'Opens an XML feed in a different tab'}
      </TableCell>
    </TableRow>
    <TableRow key="Link">
      <TableCell key="Utility" headers="utility" stackedTitle="Link Icon">
        <Button variation="ghost" size="medium">
          
          {'Link'}
        </Button>
      </TableCell>
      <TableCell key="Action" headers="action" stackedTitle="Link description.">
        {'Copies link for current page to clipboard'}
      </TableCell>
    </TableRow>
    <TableRow key="Download">
      <TableCell key="Utility" headers="utility" stackedTitle="Download Icon">
        <Button variation="ghost" size="medium">
          
          {'Download'}
        </Button>
      </TableCell>
      <TableCell key="Action" headers="action" stackedTitle="Download description.">
        {'Initiates download'}
      </TableCell>
    </TableRow>
    <TableRow key="What's New">
      <TableCell key="Utility" headers="utility" stackedTitle="What's New Icon">
        <Button variation="ghost" size="medium">
          
          {"What's New"}
        </Button>
      </TableCell>
      <TableCell key="Action" headers="action" stackedTitle="What's New description.">
        <p>Opens sidebar with updates</p>
        <p>
          <em>Limited usage only for certain cases in Medicare child system</em>
        </p>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

## Use cases

- **Provide options for saving or sharing content:** Offer users the ability to print, email, or download content so that users may refer to or share information from a web page or document.
- **Subscribe to content updates:** When users want to stay informed about new content on a website or blog, providing an RSS feed allows them to easily subscribe and receive notifications of new posts or updates.
- **Highlight updates on relevant information:** Use the "what's new" feature to keep users informed about the latest developments, changes, or additions to your website. Note: the "what's new" feature is limited to sites using the Medicare Design System.
- Examples:
  - Enabling users to print search results (Medicare - [Care Compare](https://www.medicare.gov/care-compare/results?searchType=Physician&page=1&city=Washington&state=DC&zipcode=&radius=15&sort=closest&tealiumEventAction=Landing%20Page%20-%20Search&tealiumSearchLocation=search%20bar))
  - Enabling users to email or print important information (HealthCare - Find Local Help or [When can you get Health Insurance?](https://www.healthcare.gov/quick-guide/dates-and-deadlines/))

### Guidelines

- Utility actions are ghost buttons for available actions that do not take priority over primary or secondary call-to-actions (CTAs).
- Placement should be in the page header and top, right aligned.
- Include no more than 3 utility actions on a page to prevent cluttering the user interface (UI) and distracting the user.
- When pairing 2 or more utility action buttons, the preferred action goes on the left.
- Be consistent with the inclusion of utility actions and their order across pages and products.
- Follow any additional governance established by your UX and content lead for which utility actions to include.

### When to consider alternatives

- If an action (e.g. printing or emailing) is a critical call-to-action on a webpage, consider using a solid or outlined main button.
- If the utility action is opening a link in a new webpage versus triggering an action, [refer to guidance on links](/foundation/typography/links).
- Carefully consider which utility actions are used on mobile (since space is a premium.)

### Component behavior

- **Hover state**: A subtle highlight or change in color to indicate interactivity.
- **Focus state**: A border or outline, to show that the button is focused.
- **Click/tap behavior**: Execute the intended action (e.g., open print terminal, copy a link, etc.)
- **Accessibility**: Ensure that utility actions are accessible to users with disabilities, including providing appropriate ARIA attributes and keyboard navigation.

## Accessibility

### Accessibility Guidelines

- Always include both the icon and label in utility actions to meet accessibility standards.
- Don't create CTAs that duplicate utility actions on a page. Having multiple "print" actions on a page can hinder accessibility for screen reader users.
- Consider using ARIA labels.

### Accessibility testing

#### General

- Each utility action should have a unique, accessible name. [Get details on accessible names and descriptions](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/).
- The purpose of the utility action should be clear in the context of the whole page.

#### Keyboard testing

- Use the tab key to move the focus between elements on the page. The focused element should be visually indicated by a design-system-standard colored outline.
- Navigate to each utility action button and ensure that it can be focused and activated using the tab key.
- If any keyboard shortcuts are associated with utility actions, test that they work as expected.
- Ensure that the focus moves through the elements in a logical order, preventing users from getting stuck in unexpected places.
- Verify that all actions can be completed using the keyboard, without requiring a mouse or touchpad.

#### Screen reader testing

When using a screen reader (NVDA, JAWS, VoiceOver, TalkBack):

- Ensure that screen reader software can accurately read the labels associated with utility action buttons. The labels should clearly convey the purpose and functionality of each button.
- Check that appropriate ARIA attributes (e.g., <code>role</code>, <code>aria-label</code>) are used to provide additional context and information to screen reader users.