Copy Text

Copy Text Button provides the ability to copy the text into the clipboard
  • Examples
  • Properties
  • Accessibility

Examples

Web Component

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the copy text button.
Shift + TabMoves focus to the previous focusable element.
Enter,SpaceActivates the copy button and copies the text to the clipboard.

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Guidance for developers
  • Ensure the copy button is a button element with a clear label, such as Copy to clipboard.
  • Use aria-live="polite" to announce successful copying to screen readers.
  • If using an icon for the copy button, ensure it has an aria-label or accompanying text for clarity.
  • Provide a visually hidden confirmation message to notify users when text is copied.
  • Ensure focus remains on the button after activation and does not shift unexpectedly.
  • Avoid auto-closing tooltips immediately—allow users enough time to perceive the copied confirmation message.
  • Ensure adequate color contrast between the button, text, and background.
Guidance for designers
  • Ensure the copy button is visually distinct and clearly indicates its function.
  • Provide a tooltip or confirmation message upon successful text copying.
  • Use high-contrast colors and avoid relying solely on color to indicate success.
  • Ensure the button has a large enough click/touch target (at least 44x44 pixels).
  • Use a consistent icon (e.g., a clipboard icon) to represent copy actions across the interface.
  • Ensure animations or changes in state are subtle and non-intrusive.

Explore live examples in the ARIA Practices Guide.

Resources

  • WCAG 2.2 Non-Text Content: Guidelines for ensuring non-text UI elements have accessible labels.
  • MDN Button role: Explanation of how to implement accessible button elements, including those used for clipboard interactions.

Other recommendations

Find additional accessibility tips in our Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
  • Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
  • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)