I will apply accessibility and layout improvements to my website or project wireframe using CSS and visual design tools.
I can identify at least two accessibility issues in my layout and fix them using contrast, spacing, and clear structure.
Web developers are responsible for making digital spaces inclusive.
Accessibility isn’t an add-on — it’s a professional standard.
Today’s work ensures your designs are usable, readable, and ready for real-world audiences before we move into advanced CSS next week.
| Term | Definition | Example |
|---|---|---|
| Accessibility (a11y) | Designing for all users, including those with disabilities | Adding keyboard navigation or captions |
| Contrast Ratio | The difference in brightness between text and background | Black text on white background = high contrast |
| Semantic HTML | Tags that describe content clearly for screen readers | <header>, <nav>, <article>, <footer> |
| Responsive Design | Layouts that adjust to different devices and screen sizes | Flexbox or media queries |
| Validation | Checking code for errors or accessibility violations | Using Lighthouse or WAVE tools |
“Think about a time when a website frustrated you. What made it hard to use?”
Write or share one example — and how you would fix it as a designer.
Optional share-out: collect examples on board under “Accessibility Fails” → “Accessibility Fixes.”