At Google, accessibility isn't optional — it's a launch requirement. 15% of the global population has some form of disability.
The Four Principles (POUR)
- Perceivable: Users can perceive the content (alt text, captions, contrast)
- Operable: Users can interact (keyboard nav, no time limits)
- Understandable: Content is clear (labels, error messages, predictable)
- Robust: Works with assistive technologies (semantic HTML, ARIA)
Semantic HTML is 80% of the Battle
<!-- Bad -->
<div class="button" onclick="submit()">Submit</div>
<!-- Good -->
<button type="submit">Submit</button>
<!-- Bad -->
<div class="nav">...</div>
<!-- Good -->
<nav aria-label="Main navigation">...</nav>ARIA: Use Sparingly
The first rule of ARIA is: don't use ARIA if you can use native HTML. ARIA doesn't add behavior — only semantics.
<!-- Custom dropdown -->
<div role="listbox" aria-label="Select country" aria-expanded="true">
<div role="option" aria-selected="true">India</div>
<div role="option" aria-selected="false">USA</div>
</div>
<!-- Live region for dynamic content -->
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>Keyboard Navigation
// Focus management in React
function Modal({ isOpen, onClose, children }) {
const firstFocusRef = useRef();
useEffect(() => {
if (isOpen) firstFocusRef.current?.focus();
}, [isOpen]);
// Trap focus inside modal
function handleKeyDown(e) {
if (e.key === "Escape") onClose();
if (e.key === "Tab") trapFocus(e);
}
return isOpen ? (
<div role="dialog" aria-modal="true" onKeyDown={handleKeyDown}>
<button ref={firstFocusRef}>Close</button>
{children}
</div>
) : null;
}Quick Wins Checklist
- All images have descriptive
alttext (oralt=""for decorative) - Color contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text
- All interactive elements are keyboard accessible
- Form inputs have associated
<label>elements - Skip navigation link for keyboard users
- Focus styles are visible (never
outline: nonewithout replacement)