Designing Accessible Interfaces

Active learning works because accessibility design demands empathy beyond abstract rules. Students must physically experience limitations to internalize how barriers shape user experience, turning guidelines into lived practice rather than distant requirements.

• 9th Grade
• Computer Science
• 4 activities
• 15 min–40 min

Learning Objectives

1. Critique an existing software interface for at least three specific accessibility barriers, referencing WCAG guidelines.
2. Explain the principles of universal design and how they benefit users with diverse abilities.
3. Design a wireframe for a new software feature that incorporates keyboard navigation and sufficient color contrast.
4. Evaluate the effectiveness of different accessibility features, such as screen reader compatibility and adjustable font sizes.

Gallery Walk

⏱ 40 min·Small Groups

Gallery Walk: Accessibility Audit

Post screenshots of five real websites around the room. Student groups rotate through each, using a provided checklist (contrast, alt text, keyboard navigation, label clarity) to score the site's accessibility. Groups share their worst finding with the class and suggest one fix.

Prepare & details

Explain how to design software that is accessible to users with different physical abilities.

Facilitation Tip: During the Gallery Walk, position yourself at a midpoint so you can overhear discussions and redirect common misconceptions about what counts as an accessibility feature.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Case Study Analysis

⏱ 25 min·Individual

Simulation Experience: Keyboard-Only Navigation

Students attempt to complete a set of tasks on a website using only the keyboard, no mouse or trackpad. They document which tasks were impossible or frustrating, then discuss what interface changes would have helped.

Prepare & details

Critique existing interfaces for their accessibility features.

Facilitation Tip: For the Keyboard-Only Navigation simulation, physically sit next to students to see where they hesitate or resort to mouse use, then ask them to verbalize their struggle.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Case Study Analysis

⏱ 35 min·Pairs

Redesign Challenge: Make It Accessible

Pairs receive a wireframe of an inaccessible form or interface. They identify at least four accessibility violations and produce a revised wireframe that addresses each. Pairs present their before-and-after to another pair for peer feedback.

Prepare & details

Construct an interface that incorporates principles of universal design.

Facilitation Tip: In the Redesign Challenge, provide color contrast checkers and keyboard testers so students validate their solutions against measurable standards rather than aesthetic preference.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Think-Pair-Share

⏱ 15 min·Pairs

Think-Pair-Share: Who Benefits from Captions?

Students individually list all the situations where video captions are useful beyond deaf viewers. They share with a partner, then the class compiles a full list. This reframes accessibility as universal benefit rather than accommodation.

Prepare & details

Explain how to design software that is accessible to users with different physical abilities.

Facilitation Tip: Keep the Think-Pair-Share small groups to three or four so every voice is heard when identifying who benefits from captions beyond the deaf community.

Setup: Standard classroom seating; students turn to a neighbor

Materials: Discussion prompt (projected or printed), Optional: recording sheet for pairs

• Understand
• Apply
• Analyze
• Self-Awareness
• Relationship Skills

Teaching This Topic

Teach accessibility as a design constraint, not a checklist. Use repeated simulations to build frustration first—frustration that fuels better design decisions. Avoid framing it as charity; emphasize that inclusive design expands audiences and improves usability for everyone. Research shows students retain accessibility principles better when they experience the barriers directly rather than read about them.

What to Expect

Students will move from recognizing accessibility to applying it. They should articulate specific design choices that remove barriers, justify those choices with user needs, and critically assess interfaces against real-world standards.

Watch Out for These Misconceptions

Common Misconception

During the Keyboard-Only Navigation simulation, watch for students who assume accessibility only applies to permanent disabilities.

What to Teach Instead

After the simulation, ask students to describe situations where temporary limitations—a sprained wrist, a phone held in bright light—would force them to rely on keyboard-only navigation, then connect those moments to universal design.

Common Misconception

During the Redesign Challenge, watch for students who equate accessibility with removing visual appeal.

What to Teach Instead

During the peer review phase, have students compare their redesigned interfaces against the originals and identify two features that improved both accessibility and visual hierarchy, reinforcing that constraints drive creativity.

Assessment Ideas

Peer Assessment

After the Redesign Challenge, have students exchange their final wireframes and complete a two-part critique: identify one accessibility improvement their partner made and suggest one additional enhancement using keyboard navigation or color contrast.

Exit Ticket

After the Gallery Walk, give students a screenshot of a familiar interface and ask them to list two specific accessibility features they would add, explaining how each feature benefits a particular user group they observed during the walk.

Quick Check

During the Think-Pair-Share, present a scenario like 'a user with low vision using a screen reader in a noisy café' and ask students to identify three interface elements that would be difficult to use, then share one design change that would address each difficulty.

Extensions & Scaffolding

• Challenge: Ask students to find an interface they frequently use and redesign one element for three distinct user groups in a 10-minute sprint.
• Scaffolding: Provide a partially completed audit template with prompts like 'Where would a screen reader user get stuck?' for students who need structure.
• Deeper exploration: Have students research how assistive technologies like screen readers parse semantic HTML, then redesign a sample page to optimize that parsing.

Key Vocabulary

Universal Design	The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
WCAG (Web Content Accessibility Guidelines)	A set of international standards that provide guidelines for making web content more accessible to people with disabilities.
Keyboard Navigation	The ability to operate software or a website using only a keyboard, without a mouse, which is crucial for users with motor impairments.
Color Contrast Ratio	A measure of the difference in luminance between the foreground (text) and background colors, essential for users with visual impairments.
Screen Reader	An assistive technology that reads aloud the content displayed on a computer screen, enabling visually impaired users to interact with software.