Learning intentions
- I can run a Lighthouse audit on my portfolio.
- I can interpret accessibility and performance scores.
- I can fix common accessibility issues.
Success criteria
- I have run Lighthouse on my portfolio and saved the report.
- My accessibility score is 90+.
- I have fixed at least 5 issues identified in the audit.
Do Now · 5 min
Run Lighthouse on any popular website: right-click → Inspect → Lighthouse tab → Analyze page load. Scores out of 100 across Performance, Accessibility, Best Practices, SEO.
Notice: even big sites often have accessibility issues. Today you make your portfolio better than many commercial sites.
I Do · ~10 min Teacher demonstration
Teacher runs Lighthouse on exemplar portfolio. Walks through common issues and fixes:
- Images without alt text - add descriptive alt attribute
- Low colour contrast - check in WebAIM, adjust palette
- Headings out of order (h1 → h3 skipping h2) - fix heading hierarchy
- Form inputs without labels - add
<label for="..."> - Links without text (
<a href="x"><img></a>) - add alt to the image or aria-label to the link - No lang attribute on html - add
<html lang="en-AU"> - No meta description - add
<meta name="description">
Also install WAVE browser extension and run on exemplar.
Validate your code with the W3C official validator
Before running Lighthouse, run your HTML through the W3C HTML Validator. It catches:
- Unclosed tags the browser silently "fixed"
- Missing alt attributes
- Invalid nesting (e.g. <p> inside <p>)
- Deprecated attributes
Same for CSS: W3C CSS Validator. These are free, official, and tell you what you broke.
Professional workflow: validator first (structural issues), Lighthouse second (quality issues), WAVE third (specific accessibility). All three should pass before publishing.
We Do · ~15 min Guided build
Together, test an exemplar page in DevTools with keyboard only (no mouse!):
- Tab through every focusable element
- Is the focus indicator visible?
- Can you reach every link and button?
- Is the order logical?
Fix any focus issues with CSS :focus-visible.
You Do · ~35 min Independent practice
Audit your own portfolio:
- Run Lighthouse in Chrome DevTools
- Screenshot the scores
- Work through the Accessibility and Best Practices lists
- Fix the top 5+ issues
- Re-run Lighthouse until accessibility is 90+
- Also run WAVE extension and fix any errors
- Test keyboard navigation on every page
This is the prep work for Assessment 2 submission tomorrow.
Differentiation
Support
Teacher runs Lighthouse with student, works through fixes one-by-one.
Core
Independent audit and fix.
Extension
Also run the WAVE tool and document each fix with before/after in an audit log.
Exit Ticket · 5 min
Exit ticket
Your Lighthouse Accessibility score: _____ /100
Top 3 fixes you made today:
1. __________________________
2. __________________________
3. __________________________
Save your Lighthouse screenshot — you need it for Assessment 2.
Resources for this lesson
📚 Deeper Reading
External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.
- Shay Howe · Ch 12: Writing Your Best Code
HTML + CSS best practices consolidated. Including 'avoid divitis' and 'separate content from style'. - UMich HTML5 · M3 L2: Validating Your Code
Using the W3C validator on your site before publishing. - W3C HTML Validator
Paste your URL or code, get a list of errors — free, official tool. - W3C CSS Validator
Same for CSS — catches syntax errors your browser silently ignores.