Exercise 1: Screen Reader Accessibility

Instructions

Below is a website built without semantic HTML. Try navigating it with a screen reader, then update it to use proper semantic elements.

1. Use your screen reader to navigate the example below
2. Notice how difficult it is to understand the structure
3. Update the HTML to use semantic elements like <header>, <nav>, <main>, etc.
4. Add appropriate ARIA labels where needed
5. Test again with your screen reader to verify the improvements