Accessibility

Accessibility

Boobstrap supplies visible focus treatment, reduced-motion safeguards, accessible color foundations, and .bs-sr-only. Your markup still owns semantics and behavior.

• Use native elements first: <button> for actions and <a> for navigation.
• Associate every form control with a visible <label>, or use .bs-sr-only when the visual design cannot accommodate one.
• Add aria-label to icon-only buttons.
• Use role="status" for non-urgent dynamic alerts and role="alert" for urgent messages.
• Do not rely on color alone to communicate state; pair it with text or an icon.
• When overriding tokens, re-check text and focus-ring contrast in both themes.

Name icon-only controls

The SVG is decorative; the button carries the action name announced by assistive technology.

<button class="bs-btn bs-btn-secondary bs-btn-icon" type="button" aria-label="Delete attachment"><i data-lucide="trash-2" class="bs-icon" aria-hidden="true"></i></button>

Connect descriptions and errors

Use IDs and aria-describedby so helper and validation text are announced with the control.

<div class="bs-form-group"><label class="bs-label" for="a11y-email">Email address</label><input class="bs-input" id="a11y-email" type="email" aria-invalid="true" aria-describedby="a11y-email-help a11y-email-error" value="not-an-email" /><span class="bs-form-text" id="a11y-email-help">Used for account recovery.</span><span class="bs-form-feedback bs-form-feedback-invalid" id="a11y-email-error">Enter a complete email address.</span></div>

Choose the right live-region role

Use status for polite updates and reserve alert for urgent information that needs immediate announcement.

<div class="bs-stack bs-gap-3"><div class="bs-alert bs-alert-success" role="status"><span><strong class="bs-alert-title">Draft saved</strong>Your work is up to date.</span></div><div class="bs-alert bs-alert-primary" role="alert"><span><strong class="bs-alert-title">Session expiring</strong>Save your work within two minutes.</span></div></div>