♿Accessibility Deep Dive

1// ✅ Accessible Form with Keyboard Support
2 
3function AccessibleForm() {
4  return (
5    <form onSubmit={handleSubmit}>
6      {/* Always use label with htmlFor */}
7      <label htmlFor="name">
8        Name <span aria-label="required">*</span>
9      </label>
10      <input
11        id="name"
12        type="text"
13        required
14        aria-required="true"
15        // Visible focus styles
16        className="focus:ring-2 focus:ring-blue-500"
17      />
18 
19      {/* Use real buttons, not divs */}
20      <button type="submit">
21        Submit
22      </button>
23 
24      {/* Checkboxes need labels too */}
25      <input
26        id="subscribe"
27        type="checkbox"
28      />
29      <label htmlFor="subscribe">
30        Subscribe to newsletter
31      </label>
32    </form>
33  );
34}
35 
36// ❌ Common Mistakes
37 
38// 1. Div as button (not keyboard accessible)
39<div onClick={handleClick}>Click Me</div>
40 
41// 2. Input without label
42<input placeholder="Name" />
43 
44// 3. No visible focus styles
45<button className="focus:outline-none">Bad</button>
46 
47// 4. Custom controls without ARIA
48<div onClick={toggle}>☐ Checkbox</div>
49 
50// ✅ Better Alternatives
51 
52// 1. Use real button
53<button onClick={handleClick}>Click Me</button>
54 
55// 2. Always add labels
56<label htmlFor="name">Name</label>
57<input id="name" />
58 
59// 3. Visible focus indicators
60<button className="focus:ring-2 focus:ring-blue-500">
61  Good
62</button>
63 
64// 4. Use native controls or proper ARIA
65<input type="checkbox" /> {/* Native */}
66<div
67  role="checkbox"
68  aria-checked={checked}
69  tabIndex={0}
70  onKeyDown={handleKey}
71>
72  ☑ Custom Checkbox
73</div>