Accessibility
Building inclusive experiences that work for everyone, regardless of ability. Our commitment to accessibility ensures that all users can effectively interact with NH-UI components.
WCAG 2.1 Principles
Perceivable
Information must be presentable in ways users can perceive
Key Guidelines
Provide text alternatives for images
Provide captions for videos
Ensure sufficient color contrast (4.5:1 minimum)
Make content adaptable to different presentations
Operable
Interface components must be operable by all users
Key Guidelines
Make all functionality keyboard accessible
Give users enough time to read content
Don't use content that causes seizures
Help users navigate and find content
Understandable
Information and UI operation must be understandable
Key Guidelines
Make text readable and understandable
Make content appear and operate predictably
Help users avoid and correct mistakes
Use clear and simple language
Robust
Content must be robust enough for various assistive technologies
Key Guidelines
Use valid, semantic HTML
Ensure compatibility with assistive technologies
Support current and future assistive technologies
Test with actual assistive technology users
Implementation Areas
Keyboard Navigation
Complete keyboard accessibility for all interactive elements
Features
Tab order follows logical reading sequence
All interactive elements are focusable
Clear focus indicators with 2px outline
Skip links for efficient navigation
Proper focus management in modal dialogs
Implementation
// Focus management example
const Modal = ({ isOpen, onClose }) => {
const modalRef = useRef(null);
useEffect(() => {
if (isOpen) {
modalRef.current?.focus();
}
}, [isOpen]);
return (
<div
ref={modalRef}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
tabIndex={-1}
>
{/* Modal content */}
</div>
);
};Screen Reader Support
Comprehensive ARIA implementation for screen reader users
Features
Proper heading hierarchy (h1-h6)
Descriptive ARIA labels and descriptions
Live regions for dynamic content updates
Landmark roles for page structure
Button and link states properly announced
Implementation
// Screen reader example
<button
aria-label="Close dialog"
aria-describedby="close-help"
onClick={onClose}
>
<X className="h-4 w-4" />
</button>
<div id="close-help" className="sr-only">
Press Escape key to close this dialog
</div>Visual Accessibility
Optimized for users with visual impairments and color blindness
Features
High contrast ratios (4.5:1 for normal text)
Color is not the only way to convey information
Scalable text up to 200% without horizontal scrolling
Clear visual hierarchy and spacing
Support for dark mode and high contrast themes
Implementation
/* High contrast focus indicators */
.focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* Ensure sufficient contrast */
:root {
--text-on-background: hsl(0 0% 9%); /* 14.8:1 ratio */
--text-muted: hsl(0 0% 45%); /* 4.6:1 ratio */
}Internationalization
Support for multiple languages and cultural preferences
Features
RTL (right-to-left) language support
Proper character encoding (UTF-8)
Flexible layouts for different text lengths
Cultural considerations for color and imagery
Date, time, and number formatting
Implementation
// RTL support example
.container {
direction: ltr;
}
[dir="rtl"] .container {
direction: rtl;
}
.icon-before {
margin-inline-end: 0.5rem;
}Testing & Validation
A comprehensive testing strategy ensures accessibility compliance and real-world usability.
Automated Testing
axe-core
Industry-standard accessibility testing engine
Lighthouse
Built into Chrome DevTools for quick audits
Pa11y
Command-line accessibility tester
ESLint a11y
Catch accessibility issues during development
Manual Testing
Keyboard Navigation
Test all functionality using only keyboard
Screen Reader
Test with NVDA, JAWS, or VoiceOver
Color Contrast
Use WebAIM or Colour Contrast Analyser
Zoom Testing
Test at 200% zoom and different viewport sizes
User Testing
Disability Communities
Test with actual users who rely on assistive tech
Usability Studies
Observe real usage patterns and pain points
Feedback Channels
Provide easy ways for users to report issues
Regular Audits
Schedule quarterly accessibility reviews
Accessibility Checklist
Development Checklist
Use semantic HTML elements
Provide alt text for all images
Ensure proper heading hierarchy
Add ARIA labels where needed
Test keyboard navigation
Verify color contrast ratios
Test with screen readers
Validate HTML markup
Design Checklist
Design with sufficient color contrast
Don't rely solely on color for meaning
Provide multiple ways to access content
Design clear focus indicators
Use consistent navigation patterns
Plan for text scaling up to 200%
Consider reduced motion preferences
Test designs with real users
Common Accessibility Issues
Issues to Avoid
Keyboard & Navigation
Keyboard traps without escape routes
Invisible or unclear focus indicators
Illogical tab order
Missing skip links
Content & Structure
Missing or incorrect ARIA labels
Low color contrast ratios
Images without alt text
Broken heading hierarchy
NH-UI Accessibility Features
ARIA Support
All components include proper ARIA attributes
Keyboard Navigation
Complete keyboard support for all interactions
Focus Management
Automatic focus handling in complex components
Resources & Further Reading
Standards & Guidelines
WCAG 2.1 Guidelines
Official accessibility guidelines from W3C
Section 508
US federal accessibility requirements
EN 301 549
European accessibility standard
ARIA Authoring Practices
W3C guide for implementing ARIA
Tools & Testing
axe DevTools
Browser extension for accessibility testing
WebAIM Contrast Checker
Tool for checking color contrast ratios
NVDA Screen Reader
Free screen reader for testing
Accessibility Insights
Microsoft's accessibility testing toolkit