Search
4 results for “semantic-html”
Search results
Web Accessibility Fundamentals
Why the W3C's own first rule of ARIA is to avoid ARIA whenever a native HTML element already does the job, and what WCAG's 4.5:1 versus 3:1 contrast ratios actually apply to.
What is the "first rule of ARIA," and why does a native <button> beat a <div role="button"> even though both can be made accessible?"
The W3C's own first rule of ARIA use is direct: if a native HTML element or attribute already provides the semantics and behavior you need, use it instead of re-purposing a different element with ARIA. A native `<button>` comes with keyboard interaction (Enter/Space activates it, Tab reaches it), focus management, and correct semantics built into the browser for free. A `<div role="button">` requires manually replicating every one of those behaviors with JavaScript and additional ARIA attributes, tabindex, keydown handlers for both Enter and Space, and it is easy to miss an edge case a real button never had in the first place. ARIA can make a div accessible in theory; a native element already is, with less code and less risk.
What do WCAG's 4.5:1 and 3:1 contrast ratios each apply to, and why does the threshold change for large text?
WCAG 2.1's AA-level contrast requirement is 4.5:1 for normal text, text smaller than 18 point (or 14 point bold), and a relaxed 3:1 for large text at or above that size threshold. The reasoning given is that larger text with wider character strokes is inherently easier to read at lower contrast, so the stricter 4.5:1 ratio is reserved for the smaller, harder-to-read text where insufficient contrast is much more likely to genuinely block reading for people with low vision, color-vision deficiencies, or age-related contrast sensitivity loss. It is not an arbitrary aesthetic distinction, it is calibrated to actual legibility at different sizes.
A custom dropdown built entirely from styled divs passes a visual design review. What is likely still broken for a keyboard-only or screen-reader user, and why doesn't looking right catch it?
Without the correct ARIA roles/states (or, better, a native `<select>`), a div-based dropdown typically has no way to be reached or operated via keyboard alone (no built-in Tab/Enter/Arrow-key handling), and a screen reader has no semantic information telling it "this is a dropdown, it is currently closed, here are its options," so it may announce nothing meaningful at all. A purely visual review can't catch this because the div looks and behaves correctly with a mouse, the missing behavior only surfaces via keyboard navigation or assistive technology, which is exactly why accessibility has to be tested directly with a keyboard and a screen reader, not inferred from how a component looks.