brand.md

id	section
Brand	components

import { Checkbox, List, ListItem } from '@patternfly/react-core';

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 has alternative text via alt.} description={If the brand is only decorative, the alt should have an empty string passed in as a value.} />

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