Web Literacy Basics II | 9. The Planets and Accessibility

• Preparation

  Do the activity on your own to become familiar with fair use, open licensing, copyright, search, reverse-image search, and embedding images in a webpage.

  1. Follow this link to the Thimble project for this activity.
  2. Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.
  3. Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.
  4. Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.

  You may also wish to set up student accounts on Thimble. This will save time later when learners are ready to embed images in their Thimble webpage remixes.

  Review the Web Literacy Map definitions of "accessibility" and "remix," so that you can help your learners (and colleagues!) understand the importance of composing and remixing for an accessible Web.

  Be sure to make room in your learning space for students to move around during the activity.

  Post the URL, or Web address, of today's project somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

  Familiarize yourself with accessibility. The Mozilla Developer Network defines accessibility like this:

  Accessibility in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.

  Today, your students will have the chance to make a webpage more accessible by making its purpose clear to its audience. Not every student will go about that work in the same way, but students who are interested in accessibility should keep best practices like these in mind:

  • Accessible webpages depend on clear structure, so there should be a relevant title in the head of the project.
  • Headings, like h1, h2, and h3 should be used to organize the page into meaningful chunks.
  • The page shouldn't skip over any level of headings. For example, h1 should be followed by h2, not h3.
  • There should be a high amount of contrast between the background colors on the page and the colors used for fonts.
  • Images and other media should have descriptive alt tags that describe the media for people who experience difficulty seeing or hearing them.

  You can learn more about accessibility from site like these:

  • IBM's accessibility web checklist.
  • Microsoft's Accessibility Best Practices.
  • The W3C accessibility page.
  • Webaccessibility.com

  Be prepared to help students exercise good judgment and common sense around image searches in this activity. You'll want to be alert to the possibility of image results you weren't expecting and have some norms or expectations in place for community members' behavior when they encounter questionable content online.

  Also, today's activity is fairly open-ended. Students will have a lot of room to interpret the challenge and build their webpages. Your focus as an instructor should be on thoughtful work rather than on a correct answer. Encourage students to learn through play.

• 2. Introduction

  20 minutes

  Welcome your students and explain that today we'll be talking about design and accessibility. Ask learners for definitions of "design" and "accessibility" and post their responses using your instructor computer and projector.

  Use helper questions to keep the conversation going like, "What do you do when you design something?", and, "What does it mean if you have 'access' to something?"

  After students have had the chance to puzzle out what "design" and "accessibility" mean, ask for their help in combining all of their ideas into two brief, useful definitions for today's work such as

  • Design: Making something so it works and people can understand how to use it.
  • Accessibility: Making sure something can be used by as many people as possible.

  Explain that next we'll take part in a shared design experience and try to move from something chaotic, messy, and inaccessible to something more ordered and accessible that captures the spirit of our first design.

  Here are the steps for the design activity.

  1. Pass out a Post-It note to each learner.
  2. Invite learners to draw something awesome any way they want. They can use stick figures or draw something more detailed. They can even just use words if they don't want to draw. Be ready to help anyone who experiences difficulty drawing or writing and scribe for them or make it clear students can help one another. Give students about 5 minutes to brainstorm ideas and draw or write or scribe and have extra Post-Its on-hand for kids who worry about messing up on their first one.
  3. Ask learners to stick their Post-Its up on a large piece of poster paper.
  4. Ask learners to form a semicircle facing their Post-Its.
  5. Ask learners to look at their constellation of Post-Its. Ask them if they see any intentional organization or ask them if the way the Post-Its are arranged makes sense.
  6. Ask learners if they can think of better ways to organize the Post-Its to make it clearer why they belong together.
  7. Invite learners to go up to the Post-Its one-by-one and to move or group their Post-Its into a clearer organizational scheme.
  8. Ask learners if they can think of a title for the cluster of Post-Its that would help someone make sense of them. Once the group has some ideas, try to reach consensus on a title and let a student write it on a poster-sized Post-It.
  9. Ask learners to look at the poster again. What's changed? What seems clearer now? What did our changes add to the poster? What did we lose in reorganizing the Post-Its?
  10. Further, ask learners how our definitions of "design" and "accessibility" connect to the exercise we just did together.

  After a brief reflective conversation about that last prompt, ask students to take their seats and to visit today's project on Thimble.

• 3. Evaluating the Planets

  10 minutes

  Before students hit the "Remix" button on "The Planets," take a moment to go over the project together as a group. What stands out from this page? What seems easiest to understand or focus on as a user? What seems difficult to understand? What seems accessible or inaccessible about this page? Does it have a clear purpose? A clear structure?

  There is no pre-set way to change the page thematically or by content, so encourage students to identify the design challenges they see.

  Ask learners what they think this page is all about and how its design and accessibility could be improved to show that. Allow for multiple possibilities - maybe this is a page about the planets. Maybe this is a page about .gif art. As students make suggestions about what the page should be, ask them how it could be improved in each case.

• 4. Designing for Accessibility

  45 minutes

  Next, ask learners to click the big green "Remix" button in the upper right-hand corner of the window. This will take learners inside Thimble's code editor where they will see a sidebar of project files on the left, a code editor next to that for changing the webpage, and a preview pane on the right that can switch back and forth between how the webpage looks and a tutorial written to help learners revise the page for accessibility.

  Take students through the screen and show them its parts on your projected computer.

  After you have familiarized your students with the layout of Thimble's code editor, ask them to click on the tutorial tab which is right above the preview window - or pane - showing The Planets webpage as it is.

  Review the big ideas of the tutorial with learners. They will

  1. Evaluate - or judge - the page and look for accessibility problems. What is difficult to understand and/or see on this webpage?
  2. Pick a direction for the webpage. Will they purposefully revise it to be more clearly about planets? About a single planet? About .gif art?
  3. Identify things they can change to make their webpages more accessible and in line with their design decisions.
  4. Gather any information and media from the Web that they need to add to their pages.
  5. Use the instructions in the tutorial to add, change, and/or cut parts of their webpages to achieve their design goals.

  Students don't need to produce copies of the same, "correct," final webpage, but they should all make design decisions and then change their webpages so that those pages reflect their design decisions. They should make their remixed webpages more accessible, regardless of topic.

  Give students about 45 minutes to an hour of revision time. If learners seem way into the activity, consider breaking after 45 minutes and offering more time next class, meeting, or session.

  When students finish their projects, ask them to hit the "Publish" button in the upper right-hand corner of the screen and to describe their projects in the dialog box that pops up on-screen. Then, once the pages are published, gather the URLs, or Web addresses of students' projects for later reference.

• 5. Sharing Work

  20 minutes

  Once every student has had the chance to publish, let learners walk around the room and check out one another's remixes for accessibility. Ask them to keep track of the design changes they see that seem especially effective at making their peers' webpages more accessible.

  After about 10 minutes of this "gallery walk" time, call the group back together. Invite volunteers to share their sites on the projected computer and to think-aloud through the changes they made. Try to get 3-5 volunteers to share in the next 10 minutes.

• 6. Reflection

  15 minutes

  Facilitate a reflective discussion about designing for accessibility on the Web.

  Before you begin, remind students of community norms about kindness and encourage them to talk about their own learning, not about other people.

  Use questions like these or develop your own.

  • What did you learn about design today? About accessibility?
  • Why is it so important to design for accessibility online?
  • How should designers balance creative expression and accessibility online?
  • Can you think of webpages where accessibility makes more or less difference than in other cases? Should every webpage be held to a single standard of accessibility? Why or why not?
  • How would this project have been different if you had to design an accessible webpage from scratch?
  • What are other issues of design and/or accessibility you can find in the world around you?
  • How did your design and accessibility work on "The Planets" connect back to our shared activity at the beginning of the lesson?

  You may ask students to document or record their answers for assessment. Be sure to help each student find a way to share that works for her, as well as for you, so you can gauge her learning about today's topic without a particular tool (like paper/pencil) blocking a student's expression.

  If you or your learners are curious to learn more, check out this Introduction to HTML from the Mozilla Developer Network Learning Area.