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.

Mountain landscape used as an example of imagery in a website interface </div>

♙</div><h3>Accessibility</h3><p>Help people with different abilities perceive, understand, navigate, and interact with a website.</p></div>

↖</div><h3>Usability</h3><p>Evaluate whether people can complete tasks and understand what the interface asks them to do.</p></div>

⌘</div><h3>CodePen workflow</h3><p>Use HTML, CSS, and the live preview. Keep your notes and written responses inside the Pen too.</p></div>

✓</div><h3>Evidence</h3><p>Test with a peer, record observations, make improvements, and explain your decisions in CodePen.</p></div>

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.

Mountain landscape example </div><ul><li>Low contrast</li><li>No clear focus style</li><li>Unhelpful alt text</li></ul></div>

🟢 Improved

Explore outdoors

Find your next adventure.

Mountain landscape example </div><ul><li>Readable contrast</li><li>Visible focus</li><li>Meaningful alt text</li></ul></div>

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.

Create a New Pen ↗</div>

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

▤Heading and text</div>

▧Image with alt text</div>

↗Navigation link</div>

▱Button</div>

☷Labeled form field</div>

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.

1</div><h3>Give a task</h3><p>Write the exact task you asked your tester to complete.</p></div>

2</div><h3>Record evidence</h3><p>Note hesitation, confusion, mistakes, and what the tester said or did.</p></div>

3</div><h3>Revise</h3><p>Describe what you changed in response to the test and why.</p></div>

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.

MDN Web Docs
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.