Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Icon

Overview Style Guidelines Code Demos Accessibility
  1. Labelling icons
  2. Hiding icons
  3. ARIA Authoring Practices Guide (APG)
  4. Web Content Accessibility Guidelines
  1. Labelling icons
  2. Hiding icons
  3. ARIA Authoring Practices Guide (APG)
  4. Web Content Accessibility Guidelines

Labelling icons

If an icon is interactive or otherwise not merely decorative, it will need to be labeled using the accessible-label property, which will apply aria-label and role="img" automatically.

Image of a download icon, an arrow pointing down with an underline beneath it

However, when an icon is accompanied by text, the icon does not need to use accessible-label.

Image of a download icon with text, an arrow pointing down with an underline beneath it with accompanying download text

Learn more about using icons in interactive elements

Hiding icons

An <rh-icon> is hidden from assistive technology by default. If an icon is presentational, there’s no need to change the markup to hide the icon.

Icons will be hidden from assistive technology by default

There is no need to add the additional aria-hidden="true"

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

© 2021-2024 Red Hat, Inc. Deploys by Netlify