Accessibility & UX
- Build accessible and user-friendly interfaces.
Why Accessibility & UX Matter at Component Level
In real products:
Components are reused everywhere
Bugs repeat through components
Accessibility issues multiply fast
UX inconsistencies confuse users
Fixing components early:
Saves time
Improves quality
Scales better
Builds trust
Bad components = bad product, everywhere.
Accessible UI Components
What is an Accessible UI Component ?
An accessible UI component:
Can be used by everyone, including keyboard users, screen readers, and users with disabilities.
Accessibility is not optional -
it is a core requirement of professional UI.Core Accessibility Requirements for Components
Every UI component must support:
Keyboard navigation
Visible focus
Screen reader compatibility
Clear states (hover, focus, disabled)
Semantic meaning
Use Semantic HTML First
Always prefer native elements:
Purpose Correct Element Button <button> Link <a> Input <input> Select <select> Avoid:
<div class="btn">Click</div>
Use:
<button class="btn-primary">Click</button>
Native elements are accessible by default.
Keyboard Accessibility is Mandatory
Components must:
Be reachable using Tab
Be activatable using Enter / Space
Show visible focus
Test rule:
If you can’t use it without a mouse, it’s broken.
Visible Focus States
Every interactive component must show focus.
focus:ring-2
focus:ring-blue-400
focus:outline-none
Never remove focus without replacing it.
Don’t Rely on Color Alone
Error, success, or state changes must include:
Text
Icons
Structural cues
Bad:
Only red border
Good:
Red border
Error message
Icon or text
Common Accessibility Mistakes in Components
Custom buttons using <div>
No focus styles
Hover-only interactions
Missing labels
ARIA misuse
Reusable Component Design
What is a Reusable Component ?
A reusable component:
Can be used in multiple places without modification.
Reusable components:
Reduce duplication
Improve consistency
Speed up development
Simplify maintenance
Key Principles of Reusable Components
A reusable component should be:
Generic
Configurable
Predictable
Self-contained
Separate Structure from Styling
Avoid page-specific logic inside components.
Bad:
<button class="bg-blue-500 w-full mt-10">Submit</button>
Good:
<button class="btn-primary">Submit</button>
Page layout belongs to pages, not components.
Design for Variants
Components should support variations:
Primary / Secondary
Small / Medium / Large
Default / Disabled / Loading
Example naming:
btn-primary
btn-secondary
btn-disabled
Centralize Component Styles
Use:
@apply
Component files
Design tokens
This ensures:
One source of truth
Easy updates
Consistent UI
Avoid Over-Customization
Too many props / classes:
Make components hard to use
Break consistency
Rule:
Flexibility is good, chaos is not.
Reusable Component Anti-Patterns
One component per page
Huge conditional styling
Mixing layout + component logic
Inline hacks
If every component is “special”, reuse failed.
Consistent UI Patterns
What Are UI Patterns ?
UI patterns are:
Repeated interaction and visual behaviors across the application.
Examples:
Button styles
Card layouts
Form fields
Modals
Alerts
Consistency reduces cognitive load.
Why Consistency is Critical
Consistent UI:
Feels familiar
Reduces learning time
Builds trust
Feels professional
Inconsistent UI:
Confuses users
Feels broken
Reduces confidence
Consistent Visual Language
Keep consistent:
Colors
Spacing
Border radius
Shadows
Typography
Tailwind helps enforce this through configuration.
Consistent Interaction States
Buttons, links, inputs should:
Hover the same way
Focus the same way
Disable the same way
Users expect predictable behavior.
Consistent Layout Patterns
Examples:
All cards lift on hover
All primary buttons look identical
All error messages look the same
Consistency is comfort.
Component-Driven Consistency
Consistency should come from:
Components
Not copy-paste
If UI is consistent only by discipline → it will break.
Common Consistency Mistakes
Different button styles everywhere
Random spacing values
Multiple focus styles
Different error message designs
If UI feels “off” → patterns are inconsistent.