Accessibility
a11y
ELI5 — The Vibe Check
Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision. It's not optional if you care about your users. And depending on your country, it might also be the law.
Real Talk
Web accessibility ensures digital content is perceivable, operable, understandable, and robust for users with disabilities (the WCAG guidelines). This includes proper semantic HTML, ARIA attributes, sufficient color contrast, keyboard navigability, focus management, alt text for images, and screen reader compatibility.
Show Me The Code
<!-- Inaccessible -->
<div onclick="submit()">Submit</div>
<!-- Accessible -->
<button
type="submit"
aria-label="Submit contact form"
aria-busy="true"
>
Submit
</button>
<img src="chart.png" alt="Bar chart showing Q1 sales up 20%" />
When You'll Hear This
"Run an a11y audit — the contrast ratio is failing on that grey text." / "Use aria-label when the button has no visible text."
Related Terms
ARIA
ARIA stands for Accessible Rich Internet Applications.
CSS (Cascading Style Sheets)
CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.
HTML (HyperText Markup Language)
HTML is like the skeleton of a webpage. You write tags like <h1> and <p> and the browser builds the bones of your site from them.
Responsive Design
Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.
Semantic HTML
Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs.