1.3 KiB
1.3 KiB
paths
| paths | |
|---|---|
|
Accessibility Patterns
Interactive Components
ariaLabel Prop
Always include ariaLabel prop with sensible fallback:
interface Props {
ariaLabel?: string;
}
<section aria-label={ariaLabel || "Default section label"}>
Disabled States
<button
disabled={isDisabled}
className="disabled:cursor-not-allowed disabled:opacity-50"
>
Focus Indicators
Custom focus indicators for consistent styling:
<button className="focus:outline-none focus:ring-2 focus:ring-foreground/50">
Media Components
Images
Use aria-hidden for decorative images:
<img
src={imageSrc}
alt={imageAlt}
aria-hidden={imageAlt === ""}
/>
Videos
Always include videoAriaLabel prop:
<video aria-label={videoAriaLabel || "Video content"}>
Semantic HTML
Heading Hierarchy
h1- Page title (one per page)h2- Section headingsh3- Subsection headingsh4- Card titles
Semantic Elements
Use appropriate semantic elements:
<section>- Thematic groupings of content<nav>- Navigation blocks<article>- Self-contained content<aside>- Tangentially related content<main>- Primary content area<header>/<footer>- Section headers/footers