The web was designed to be universal. When you build inaccessible sites, you are actively locking out 15% of the global population (over 1 billion people). Accessibility (a11y) isn't just about avoiding lawsuits; it's about building a better, clearer, and more robust product for everyone.
Semantics Matter
Don't use a <div> with a click handler to make a button. Use a <button>.
- Screen Readers: Announce "Button" so blind users know it's clickable. A div is just announced as "group."
- Keyboard Nav:
<button>automatically handles Tab focus and Enter key activation.<div>requires you to write custom JS for key listeners. - Maintenance: Semantic HTML is easier for developers to read and debug.
Color and Contrast
Light gray text on a white background might look "minimalist," but it's unreadable for millions of people with low vision or older monitors. Rule: Text must have a contrast ratio of at least 4.5:1 against the background (AA Standard). Use tools like the Chrome DevTools "CSS Overview" or Stark to check this automatically during design.
Alt Text is Essential
Empty alt="" attributes hide images from screen readers (which is good for decorative icons). Missing alt attributes make the screen reader read the raw filename (e.g., "IMG_5920.jpg"), which is confusing/annoying.
Good Alt Text: "Dashboard showing revenue chart rising by 20% in Q1."
Bad Alt Text: "Chart" or "Image". Descriptive text helps search engines (SEO) too.
Focus States
Never do this: outline: none;.
When a user Tabs through your site, they need to see which link is selected. The default blue ring exists for a reason. If you remove it for aesthetics, you make navigation impossible for keyboard-only users. If you don't like the default, replace it with a custom, high-contrast focus style (e.g., a thick purple border).