Week 12 · UI/UX Design Lab
Accessibility and Usability Testing
Make it work for everyone.
A website can look beautiful and still be difficult to use. In this lab, you will build, test, revise, and document an interface entirely in CodePen. Your writing, code, testing notes, peer feedback, and final reflection must all live in your Pen.
Accessibility
Help people with different abilities perceive, understand, navigate, and interact with a website.
Usability
Evaluate whether people can complete tasks and understand what the interface asks them to do.
CodePen workflow
Use HTML, CSS, and the live preview. Keep your notes and written responses inside the Pen too.
Evidence
Test with a peer, record observations, make improvements, and explain your decisions in CodePen.
01 — Understand the problem
Accessibility helps people with different abilities use a website. Usability considers whether people can complete tasks efficiently and understand what an interface asks them to do.
Look for common issues
- Text that is difficult to read against its background.
- Links and buttons that are difficult to identify.
- Interactive elements that cannot be reached by keyboard.
- Images without useful alternative text.
- Forms with missing or unclear labels.
- Headings and navigation that are hard to understand.
🔴 Common issues
Explore outdoors
Find your next adventure.
- Low contrast
- No clear focus style
- Unhelpful alt text
🟢 Improved
Explore outdoors
Find your next adventure.
- Readable contrast
- Visible focus
- Meaningful alt text
02 — Create your CodePen workspace
Open a new Pen. Use the HTML panel for your interface and written documentation, the CSS panel for visual and accessibility improvements, and the live preview to test your work.
Everything for this assignment belongs in CodePen. Do not create a separate report or write your reflection in another app. Put your audit, observations, peer feedback, and final reflection in a clearly labeled section of your HTML.
Suggested HTML structure
<main>
<section id="interface">
<!-- Your accessible interface -->
</section>
<section id="audit">
<h2>Accessibility Audit</h2>
<!-- Write your audit here -->
</section>
<section id="testing">
<h2>Usability Test Notes</h2>
<!-- Record observations here -->
</section>
<section id="reflection">
<h2>Final Reflection</h2>
<!-- Explain your revisions -->
</section>
</main>
03 — Build your interface
Create a small landing page, event page, service page, or interface related to your existing project. Use semantic HTML and make the design your own.
Your interface must include
04 — Audit and improve
In the HTML panel, create an Accessibility Audit section. Check at least five items and record each result as “Pass” or “Needs improvement,” followed by a short explanation.
Audit checklist
- Text and interface contrast
- Logical heading hierarchy
- Useful image alternative text
- Visible keyboard focus
- Keyboard-only navigation
- Labels connected to form fields
- Clear link and button wording
Try this CSS
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}
Navigate with Tab and Shift + Tab. Make at least three meaningful improvements and keep your audit notes in the HTML panel.
05 — Conduct a peer usability test
Ask a classmate to use your interface without explaining how it works. Give them two simple tasks, such as finding a link and completing a form field. Observe without coaching them.
Give a task
Write the exact task you asked your tester to complete.
Record evidence
Note hesitation, confusion, mistakes, and what the tester said or did.
Revise
Describe what you changed in response to the test and why.
Important: Write your testing notes and peer feedback directly into the HTML panel of the same CodePen. Do not submit a separate document.
06 — Document and submit
Your CodePen must contain all of the following. Keep your documentation in the HTML panel and style it with headings, lists, and cards so it is easy to read in the live preview.
Required sections in your HTML panel
- Accessibility audit: At least five checks, each marked Pass or Needs improvement, with evidence.
- Testing notes: Two user tasks, observations, and any feedback you received.
- Three revisions: Describe at least three changes you made and why.
- Before-and-after evidence: Add screenshots or clearly labeled image comparisons to the Pen, with brief captions.
- Final reflection: Explain the most important issue, the change that helped most, and what you would test next.
07 — Final reflection and submission
Before you submit
Save your Pen and test the shareable URL in a new browser tab. Make sure the HTML, CSS, accessibility audit, usability test notes, revisions, evidence, and reflection are all inside the same CodePen project.
Submit only the CodePen URL through the usual course submission area. The URL is the hand-in link; all assignment content stays in CodePen.
Free reference resources
Use these resources for guidance, but write your audit, notes, and reflection in your CodePen.
Accessibility fundamentals ↗ W3C Tutorials
Practical accessibility guidance ↗ WCAG 2.2
Web accessibility guidelines ↗
Remember: Automated tools can help identify problems, but they cannot replace keyboard testing, human feedback, and thoughtful design decisions. Your CodePen should show your design, your testing process, and what you learned.