Component
Download link
A link with a file download icon
For usability the provided link text should indicate the file type and size of the download.
How it looks (preview) (preview all)
How to call this component
<%= render "components/download_link", {
href: "/download-this"
} %>
Accessibility acceptance criteria
The download icon must:
- be presentational and ignored by screen readers
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
Custom link text (preview)
<%= render "components/download_link", {
href: "/download-map",
link_text: "Download Map (PDF)"
} %>