Brand

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:

• The brand itself is not interactive and cannot be focused via keyboard.If a brand is placed inside of an anchor element, the anchor element should still receive focus.
• The brand has alternative text via alt.If the brand is only decorative, the alt should have an empty string passed in as a value.
• The alternative text of the brand is announced to users via assistive technologies when they navigate to it.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-v5-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:

• WCAG 1.1: Text Alternatives
• Alternative text by WebAIM