https://osmarpetry.dev/tags/css/Recent content in Css on Osmar PetryHugoen-USMon, 01 Sep 2025 00:00:00 +0000https://osmarpetry.dev/blog/web-accessibility/Mon, 01 Sep 2025 00:00:00 +0000https://osmarpetry.dev/blog/web-accessibility/<h2 id="summary">Summary</h2> <ul> <li>Course map covers <strong>Screen Readers</strong>, <strong>Accessible HTML</strong>, <strong>ARIA</strong>, <strong>Focus Management</strong>, and <strong>Visual Considerations</strong>, plus <strong>Debugging &amp; team process</strong>.</li> <li>Aim: ship <strong>perceivable, operable, understandable, robust</strong> experiences (POUR) with practical exercises and team-ready debugging habits.</li> </ul> <hr> <h2 id="topics--what-to-do-at-a-glance">Topics → what to do (at a glance)</h2> <ul> <li><strong>Screen Readers:</strong> learn how they work, enable them, write solid <strong>alt text</strong>, and test.</li> <li><strong>Accessible HTML:</strong> prefer <strong>semantic elements</strong> and set <strong>document language</strong>; fix invalid markup.</li> <li><strong>ARIA:</strong> add only when semantics aren’t enough; know <strong>roles, states, properties</strong>, <strong>names/descriptions</strong>, and <strong>live regions</strong>.</li> <li><strong>Focus Management:</strong> full keyboard support, <strong>skip links</strong>, logical <strong>Tab</strong> order, avoid <strong>focus traps</strong>, and review shortcuts.</li> <li><strong>Visual:</strong> check <strong>color contrast</strong>, <strong>reflow/zoom</strong>, <strong>reduced motion</strong>, and <strong>prefers-color-scheme</strong>; connect performance with accessibility.</li> <li><strong>Debugging:</strong> use linters/devtools, improve team workflows, go <strong>beyond compliance</strong>, and practice with hands-on exercises.</li> </ul> <hr> <h2 id="decision-heuristics">Decision heuristics</h2> <ul> <li><strong>Semantics first → ARIA last.</strong> If a native element already communicates role/state, <strong>don’t add ARIA</strong>.</li> <li><strong>Keyboard is the truth.</strong> If it’s not operable with keyboard and visible focus, it’s not accessible.</li> <li><strong>Name, role, value:</strong> can a screen reader expose them correctly? If not, fix semantics, labels, or ARIA.</li> <li><strong>Respect user prefs:</strong> <code>prefers-reduced-motion</code>, <code>prefers-color-scheme</code>, and zoom/reflow without loss.</li> </ul> <hr> <h2 id="team-workflow">Team workflow</h2> <ol> <li><strong>Set standards</strong> (WCAG targets, browser/AT matrix).</li> <li><strong>Lint &amp; test early</strong> (HTML validity, axe, devtools).</li> <li><strong>Exercise mindset:</strong> practice with screen readers and keyboard on real UI (modals, forms, navigation).</li> <li><strong>Go beyond checklists:</strong> optimize usability for assistive technology users, not just box-ticking.</li> </ol> <hr> <h2 id="dev-checklist">Dev checklist</h2> <ul> <li><input disabled="" type="checkbox"> Landmark structure (<code>header</code>, <code>nav</code>, <code>main</code>, <code>aside</code>, <code>footer</code>).</li> <li><input disabled="" type="checkbox"> Page language (<code>&lt;html lang&gt;</code>).</li> <li><input disabled="" type="checkbox"> Forms: <code>&lt;label&gt;</code> + programmatic names; error text announced.</li> <li><input disabled="" type="checkbox"> Interactive controls are <strong>native</strong> or fully re-created (role, keyboard, focus, ARIA).</li> <li><input disabled="" type="checkbox"> Focus order and <strong>visible</strong> focus style.</li> <li><input disabled="" type="checkbox"> Contrast meets WCAG; no information by color alone.</li> <li><input disabled="" type="checkbox"> Motion: provide a <strong>reduced motion</strong> path; avoid parallax autoplay by default.</li> <li><input disabled="" type="checkbox"> Respect zoom/reflow at 200–400% without horizontal scroll.</li> </ul> <hr> <h2 id="references">References</h2> <ul> <li><strong>Web Accessibility — All Topics (Frontend Masters companion site)</strong>: <a href="https://web-accessibility-v3.vercel.app/topics" target="_blank" rel="noreferrer">https://web-accessibility-v3.vercel.app/topics</a></li> <li><strong>GitHub repo</strong>: <a href="https://github.com/marcysutton/frontend-masters-web-accessibility-v3" target="_blank" rel="noreferrer">https://github.com/marcysutton/frontend-masters-web-accessibility-v3</a></li> </ul> <h2 id="related-notes">Related Notes</h2> <ul> <li>[[react-forwardRef|Forwarding Ref]]</li> <li>[[svg-are-the-best|SVG are the Best]]</li> </ul>