Skip to content
PatternFly logo

Brand

A brand is used to place a product logotype on a screen.

Accessibility

To implement an accessible PatternFly brand component:

  • Do not make the brand itself interactive or focusable via keyboard
  • Apply alternative text to the brand
  • Ensure assistive technologies such as screen readers can navigate to the brand if there is alternative text applied

Testing

At a minimum, a brand should meet the following criteria:

  • If a brand is placed inside of an anchor element, the anchor element should still receive focus.
  • If the brand is only decorative, the alt should have an empty string passed in as a value.
  • If the brand is decorative and is given an empty string for its alternative text, the brand should instead be skipped by assistive technologies.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop
Applied to
Reason
alt="[the brand name or text describing the brand]"
Brand
Provides an accessible description of the brand. Required

This prop will be used for all source elements and the fallback img when a picture brand is used.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class
Applied to
Reason
alt="[the brand name or text describing the brand]"
.pf-c-brand > img
Provides an accessible description of the brand. Required

This attribute will be used for all source elements and the fallback img when a picture brand is used.

Further reading

To read more about accessibility with a brand, refer to the following resources:


View source on GitHub