Lesson 10: Designing for Accessibility

Overview

In this lesson, students will learn about accessibility and the value of empathy through brainstorming and designing accessible solutions for hypothetical apps.

Purpose

Through learning about accessibility, students recognize the impacts of computing beyond their own lives. Accessibility might not seem like a relevant CS topic, but creating technology that is accessible for underserved users helps make tech better for everyone else as well.

Agenda

Warm Up (5 min)

Main Activity (35 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • In their own words, describe the impact of mobile apps on the modern world.
  • Explain why accessibility is an important part of designing an app for users.
  • Improve upon an existing app design by addressing the accessibility needs of users.

Preparation

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Students

Support

Report a Bug

Teaching Guide

Warm Up (5 min)

Background and Motivation

Discuss: Ask students to define the term "app" in their own words. What is an app? What kinds of apps are there? Where do we use apps? While discussing, show screenshots or examples of apps on your smartphone or tablet if possible.

Say: Ensure that all students are on the same page regarding this topic by introducing some key terms and concepts.

  • In this course we have been learning how to code. Code is used to create computer applications. Games, web browers, media players... the list of applications goes on and on!
  • App is short for application. Usually, apps more specifically refer to applications running on small computers called mobile devices.
  • Smartphones and tablets are examples of mobile devices.

Discuss: Apps are everywhere! Ask students why they think apps have become so popular. Here are some example explanations:

  • Many people can more easily access or afford a mobile device (e.g., smartphone) than a larger computer with a keyboard, mouse, and so forth.
  • Apps can address a variety of needs. For example, if I need a ride somewhere, I might try a ride sharing app and get there quickly. If I want to know what movies I should watch, there's probably an app that can help me decide. And of course, if I want to call or text someone on my phone, I use apps for those as well!

Say: Introduce accessibility with the remarks below.

  • As apps become used by more and more people, app developers often come across issues that they had not considered, likely because they have never experienced those issues in their own lives.
  • Many of these issues are related to accessibility. In the world of computer science, accessibility is about creating technology for people with disabilities.
  • Disabilities include physical, auditory, visual, and many others.
  • Disabilities are diverse and impact people in different ways. For example, someone who is slightly visually impaired might simply wear glasses. Someone who is severely visually impaired might be considered "blind" and will need more assistance.

Transition: Tell students you'd like to introduce them to a few kids who, even though they have disabilities, are just like them.

Main Activity (35 min)

Designing for Accessibility Scenarios (10 min)

Display: Display each scenario from the Designing for Accessibility Slide Deck. While displaying a scenario image, read its accompanying script to the class (see below). Discussion questions are included in relevant slides.

Designing for Accessibility Scenarios

Slide 1: Meet Wei

  • Wei is a talented kid who LOVES music. She plays piano and sings very well!
  • Wei is visually impaired. While she is not completely blind, it is very difficult for her to see things, even if they are near to her eyes.
  • Wei has had to learn piano differently from kids who aren’t visually impaired, but that hasn’t stopped her from becoming a great musician!
  • Wei recently began creating her own music. She is very proud of it! She would like to record and share her music with her friends.

Slide 2: Introducing Grammaphone!

  • Grammaphone is a popular new app that allows people to upload and share their own music with friends.
  • Here is a screenshot of the home screen. What do you think about it? How do you think this app works?

Slide 3: Wei’s Problem

  • Wei needs to use Grammaphone to share her music. After all, it’s the most popular music sharing app!
  • However, she’s having a difficult time using the app. Why do you think that is?

Slide 4: Meet Roger

  • Roger is an energetic kid who loves video games! He especially likes playing sports games with his friends.
  • Things have been hard for Roger lately, though. Due to an accident a few years ago, Roger’s hand had to be “amputated” (surgically removed).
  • Thankfully, computer scientists, engineers, and doctors are working hard to provide Roger with a cool-looking robotic “prosthetic hand”, which will be awesome!
  • But for now, Roger wants to play sports video games with his friends!

Slide 5: Introducing Football Frenzy!

  • Football Frenzy is a new mobile game that everyone loves!
  • It has cool graphics, awesome sound effects, tight controls, and amazing action!
  • Here’s a screenshot of the game in action. Based on the interface, how do you think this game is played?

Slide 6: Roger’s Problem

  • All of Roger’s friends play Football Frenzy. It’s connected online so you can play it anywhere!
  • Roger wants to play Football Frenzy with them, but he is having a difficult time. Why do you think that is?

Slide 7: I Wish...

  • Neither of these apps were designed with people like Wei and Roger in mind.
  • When it comes to these apps, what specific features do you think Wei and Roger wish for?
  • Let’s make their wishes come true by redesigning these apps!

App Redesign Activity (25 min)

The final scenario allows students to sketch a redesign of one app from the scenarios ("Grammaphone" for Wei or "Football Frenzy" for Roger).

Students should primarily focus their efforts on making their redesigned app more accessible for either of them, along with any other accessibility features they can think of. Students can design as many screens for the app as they wish, and they do not need to make their app look anything like the original examples.

If there is time, students may redesign apps for both characters.

Distribute: Pass out crayons/pencils/etc to each student as they open their Thinkspot Journals.

Share: After designing, students share their app design with a neighbor, or if there is time, some students can share with the whole class. Each student should answer how their app design addresses the need of the user in question.

Wrap Up (5 min)

Discuss: Discuss real-world examples of how apps and other technology can be made more accessible. Ask students how they think making something more accessible can also make it better for others. One example is wheelchair ramps near building entrances. These were originally made for people with wheelchairs, but they are also convenient for people with baby strollers, dollies, and other wheeled equipment.

  • Levels
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 1B-AP-12 - Modify, remix or incorporate portions of an existing program into one's own work, to develop something new or add more advanced features.
  • 1B-AP-13 - Use an iterative process to plan the development of a program by including others' perspectives and considering user preferences.
CS - Computing Systems
  • 1B-CS-03 - Determine potential solutions to solve simple hardware and software problems using common troubleshooting strategies.
IC - Impacts of Computing
  • 1B-IC-18 - Discuss computing technologies that have changed the world and express how those technologies influence, and are influenced by, cultural practices.
  • 1B-IC-19 - Brainstorm ways to improve the accessibility and usability of technology products for the diverse needs and wants of users.
  • 1B-IC-20 - Seek diverse perspectives for the purpose of improving computational artifacts.

Cross-curricular Opportunities

This list represents opportunities in this lesson to support standards in other content areas.

Common Core English Language Arts Standards

L - Language
  • 4.L.6 - Acquire and use accurately grade-appropriate general academic and domain-specific words and phrases, including those that signal precise actions, emotions, or states of being (e.g., quizzed, whined, stammered) and that are basic to a particular topic (e.g
RI - Reading Informational
  • 4.RI.1 - Refer to details and examples in a text when explaining what the text says explicitly and when drawing inferences from the text.
  • 4.RI.7 - Interpret information presented visually, orally, or quantitatively (e.g., in charts, graphs, diagrams, time lines, animations, or interactive elements on Web pages) and explain how the information contributes to an understanding of the text in which it a