Accessibility (a11y): Building Inclusive Web Applications | DevPrep

Accessibility (a11y): Building Inclusive Web Applications | DevPrep

<!-- 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>

<!-- 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>

// 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;
}