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

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.

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.

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.