Accessibility

The Simple Header Bar ships as a neutral container: the styleguide owns its layout, surface, and the close control, and leaves the landmark semantics, accessible naming, and dismissal behaviour to you to apply per context. An accessible header bar keeps its text and controls readable on the saturated surface, exposes the CTA and close button to the keyboard with visible focus, gives the close button an accessible name, and — when the announcement warrants it — names the bar as a landmark region. It meets WCAG 2.1 AA.

For designers

• The message, CTA, and close icon must keep accessible contrast against both the Toyota flat surface and the Lexus copper gradient, across their full range. Source: WCAG 1.4.3 Contrast (Minimum).
• Never let the announcement’s meaning ride on the surface colour alone — the words have to carry it. Source: WCAG 1.4.1 Use of Color.
• The CTA and close button need a visible focus style that meets contrast on both surfaces and is clearly distinct from hover. Source: WCAG 2.4.7 Focus Visible.
• Use semantic colour tokens rather than fixed values so the bar adapts correctly across brands and surfaces.

For developers

The bar renders as a plain <div> with no implicit role. When the announcement is significant enough to be a landmark — for example a persistent service notice — wrap it as a region: add role="region" (or use a <section>) together with an accessible name via aria-label or aria-labelledby pointing at the message. Leave the role off for an incidental bar rather than adding an unnamed landmark or spamming several regions on one page. The CTA is an ordinary link and the close is an ordinary <button>, so both are keyboard-operable with no custom scripting; keep the visible focus ring intact. Because dismissal is your responsibility, move focus somewhere sensible after the bar is removed — the element that follows it, or the top of the page — so focus is never stranded on a removed node.

Keyboard interaction

Key	Action
Tab / Shift + Tab	Move focus between the CTA and close button
Enter	Follow the CTA link
Enter / Space	Activate the close button

The close button must present a large enough target for touch — at least the 24 px WCAG AA minimum — with comfortable spacing from the bar’s edges. Source: WCAG 2.5.8 Target Size (Minimum).

Focus order

Focus moves through the call to action, then the close button; the static message takes no focus, and right-to-left preserves this logical order while mirroring the layout.

This is a small description

This is a button

123

1. 1Message
2. 2Call to action
3. 3Close

Labelling elements

Give every element the role, name, and state assistive technology needs.

Header bar region

Optional. When the bar should be a landmark, give the container role="region" (or use <section>) plus an accessible name — aria-labelledby referencing the message, or aria-label when there is no suitable visible text. Omit the role for an incidental bar so you don’t add an unnamed or redundant landmark.

Message

Plain text that names the announcement. Keep it self-describing, since it doubles as the region’s accessible name when you label the bar with aria-labelledby.

Call to action

An ordinary link (<a>) with a clear, self-describing label. It carries its own accessible name from its text, so avoid vague wording like “click here”.

Close button

An icon-only <button> with no visible text, so give it aria-label="Close" (or "Dismiss"). The icon-close glyph inside is aria-hidden="true", so the button announces as its label alone.

Source: WCAG 4.1.2 Name, Role, Value.