Computer Science · 9th Grade · Programming with Purpose · Weeks 19-27

Designing Accessible Interfaces

Students will design software that is accessible to users with different physical abilities.

• Common Core State Standards
• CSTA: 3A-AP-16
• CSTA: 3A-IC-26

About This Topic

Accessible interface design asks students to move beyond building something that works for themselves and consider users with a wide range of physical abilities. This includes visual impairments, motor limitations, cognitive differences, and more. In the US, Section 508 and WCAG guidelines set legal and ethical expectations for digital accessibility, making this a real-world professional standard, not just an academic exercise.

Students often assume that accessibility features are add-ons for a small minority of users. The reality is that accessible design, things like keyboard navigation, color contrast ratios, and descriptive labels, tends to improve usability for everyone. Captions help in noisy environments. Large click targets help users on small screens. This is the core idea behind universal design.

Hands-on critique and redesign activities are the most effective approach here because students can directly experience the difference between an accessible and an inaccessible interface. Testing with screen readers or navigating a site using only a keyboard makes abstract accessibility guidelines visceral and memorable.

Key Questions

1. Explain how to design software that is accessible to users with different physical abilities.
2. Critique existing interfaces for their accessibility features.
3. Construct an interface that incorporates principles of universal design.

Learning Objectives

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

Before You Start

Introduction to User Interface (UI) Design

Why: Students need a foundational understanding of basic UI elements and layout principles before focusing on accessibility within those designs.

Basic Prototyping Tools

Why: Familiarity with tools for creating wireframes or mockups is necessary for students to design and present their accessible interfaces.

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.

Watch Out for These Misconceptions

Common Misconception

Accessibility only matters for users with permanent disabilities.

What to Teach Instead

Accessibility features are useful in situational and temporary contexts too: a broken arm, a loud environment, or bright sunlight. Simulation exercises where students navigate interfaces with artificial constraints help them see accessibility as a usability feature for all users.

Common Misconception

Accessible design means making things plain or boring.

What to Teach Instead

Accessible design is a constraint, like any other design constraint, that pushes toward clearer structure and better visual hierarchy. Many award-winning, visually striking designs also score highly on accessibility metrics. Redesign activities help students see that accessibility and aesthetics are not at odds.

Active Learning Ideas

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.

40 min·Small Groups

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.

25 min·Individual

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.

35 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.

15 min·Pairs

Real-World Connections

• Software developers at Microsoft design interfaces for Windows and Office applications following accessibility standards like WCAG to ensure usability for millions of users with diverse needs.
• UX designers at Google create accessible features for Android apps and websites, considering users who rely on screen readers, voice commands, or alternative input devices.
• Government agencies in the US, such as the Department of Transportation, must ensure their public-facing websites and digital services comply with Section 508 of the Rehabilitation Act, mandating accessibility for people with disabilities.

Assessment Ideas

Peer Assessment

Students pair up and exchange wireframes of a simple interface feature (e.g., a login form). Each student critiques their partner's design, identifying one area that could be more accessible and suggesting a specific improvement related to keyboard navigation or color contrast.

Exit Ticket

Provide students with a screenshot of a common website or app. Ask them to list two specific accessibility features they would add or improve, explaining why each change would benefit a particular user group.

Quick Check

Present students with a short scenario describing a user with a specific disability (e.g., a user who cannot use a mouse). Ask them to identify three actions that user would struggle with on a given interface and propose one design change to address each struggle.

Frequently Asked Questions

What are the WCAG guidelines for web accessibility?

WCAG (Web Content Accessibility Guidelines) are international standards for making web content accessible. The four core principles are: Perceivable (content can be seen or heard), Operable (interface can be used without a mouse), Understandable (content is readable), and Robust (compatible with assistive technologies). Most US federal and educational standards reference WCAG 2.1 AA compliance.

How do I check if my interface is accessible?

Start by navigating your interface using only the keyboard. Use a browser extension like axe or WAVE to scan for violations. Check color contrast using a tool like WebAIM's contrast checker. Test with a screen reader like NVDA (Windows) or VoiceOver (Mac). Each method catches different categories of problems.

What is universal design in software?

Universal design is the practice of creating interfaces that are usable by as many people as possible without requiring modification. It differs from retrofitting accessibility features after the fact. When students design with universal principles from the start, they produce interfaces that are more usable for everyone, not just users with disabilities.

How does active learning support understanding of accessible design?

Simulations and audits put students directly in the position of a user who cannot rely on standard inputs. This experiential learning makes abstract guidelines concrete. Students who have personally struggled to navigate a site with a keyboard are far more motivated to apply accessibility standards in their own designs.