Syllabi

Expanding your audience: Designing for Accessibility

By Joanna Kao

Course Description

This course will look at how to utilize new (and old) technology to make news content — whether it’s static or interactive, on the web, in the form of words or a video — accessible to as many people as possible. Topics covered include web accessibility, accessible graphics, closed captioning, and methods for engaging with different communities. For the final project, students will create a prototype and detailed plan for producing a piece of content or platform (e.g. an article page with a graphic, an interactive video, a telephone-based communication system) that would make stories more accessible to a particular community. You should be comfortable with managing files and folders on your computer, learning new software, and experimenting with social media. Experience creating prototypes (either digitally or on paper), coding or editing video is useful, but not necessary to succeed in the course.

Learning Outcomes

By the successful completion of this course, students will learn:

  1. basic knowledge of how the web works, with an emphasis on components related to accessibility
  2. designing and redesigning accessible graphics (e.g. audio graphics)
  3. the theory behind and implementation of closed captioning
  4. foundation for understanding common disabilities that might affect the ability to consume information from traditional news platforms
  5. methods for engaging with different communities

Concepts learned in this class will have direct applications for anyone interested in developing new forms of storytelling, working in editorial design (or design in general), becoming a product manager or reporting on difficult-to-reach communities. Beyond direct applications, students will gain a better understanding of technology in media and practice applying design theory to a difficult problem that most news organizations still have yet to solve.

Course Requirements / Graded Activities

Every week, you will have the following work to complete:

  • Technical homework (usually learning how to use a tool or exploring under the hood of the web to get students more comfortable with technology) (Due Tuesday at 11:59 p.m.)
  • Write a summary of and comment on a reading assignment (Due Wednesday at 11:59 p.m.)
  • Bring in real world examples to discuss in class (sign up to present once during the semester) (Due Tuesday at 11:59 p.m. before the class you present)

You should expect about 6 hours of work a week.

The homework will be posted after class on Thursday evenings. If you have an idea for an alternate homework assignment that covers the same concepts as the assigned work, you can pitch your own assignment. You must email me a proposal within 48 hours of the assignment being posted, and we can work out the details so that you are working on assignments that you find most applicable to your interests.

Deadlines are extremely important in this course. Assignments must be completed and turned in on time. Late assignments will be docked 20% for the first day and 10% each subsequent day.

Final Grade Calculations

Your grade will be comprised of four parts:

Line item% of grade
Class participation/attendance15%
Weekly reading summaries/comments20%
Weekly homework35%
Final project30%

Course Readings and Materials

week 1

Introductions, what is accessibility, familiarity with the web

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1VivTG1RC87xnnB9c4uXATAMHxUIa Eyj6fpSC29MKEQI/edit?usp=sharing

Homework

week 2

Introduction to the web & accessibility

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1D5x4228XzIprl9gVA3HfdTKWubE3_OI2o_eZZdXDGUs/edit?usp=sharing

Homework

  • Read and comment on: Simple Meets Universal (pg 65-86)
  • Read:
    • https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/
    • https://medium.com/@ablerism/beyond-alt-text-103b00eec89#.na8ortc8u
    • http://webaim.org/techniques/screenreader/
  • Technical homework:
    • Take a look at the three screenshots at http://imgur.com/a/E7TSA and duplicate what you see using HTML/CSS. Submit three separate jsfiddle ( http://jsfiddle.net ) links with your answers. You don’t have match the sizes and colors exactly, but get as close as possible (e.g. if there are three different colors in the screenshot, make sure you have three different colors in your assignment). If you need help finding a CSS property, check this cheat sheet: https://media-mediatemple.netdna-ssl.com/wp-content/uploads/images/css3-che at-sheet/css3-cheat-sheet.pdf .
    • Create a new Tumblr blog in preparation for next week.
    • Practice using voiceover.

week 3

Web accessibility part 2, using voiceover

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1PC46xrjSnd7MZthURm6MbRXbT1hnpBMMEnJkw_pnIfk/edit?usp=sharing

Homework

  • Read and comment on: Identity Meets Ability (pg 87-110)
  • Read:
    • http://melodykramer.github.io/how-betty-who-is-89-gets-her-news/
    • http://newsforbetty.com/
    • http://thin.npr.org/
    • https://www.w3.org/WAI/intro/people-use-web/stories (skim this)
    • http://webaim.org/articles/voiceover/
    • http://webaim.org/techniques/alttext/
    • http://www.bbc.com/news/blogs-ouch-34615982
  • Technical homework: Take the news website you were assigned in class. If you were not assigned one in class, get in touch with me. “Read” the front page using a screen reader on your computer. Also read an article page that has an interactive/graphic component. Write at least one page (or two pages double spaced, minus any screenshots or visuals you include) on your experience and propose changes that would improve your experience, using specific steps from our class discussion or from the readings. Your write-up should at the minimum cover:
    • What did the site do well?
    • What did the site do poorly?
    • Which visually hidden spans worked well?
    • Where could the site benefit from using visually hidden spans?
    • How are photos treated? Is alt text being used appropriately (get more info on this from the reading assignment this week)?
    • How does the site treat ads? Are you able to skip over them?
    • How easy is it to get to the main content (e.g. are you able to skip over the menus?)
  • Expect to show your findings next week during class. I would recommend practicing on the BBC or NYT websites to get comfortable with VoiceOver (e.g. If your assigned site doesn’t behave the way you think it should, make sure that it is the site, and not because you’re having trouble with the screen reader). If you have issues with using VoiceOver, check out this guide from Apple: https://www.apple.com/voiceover/info/guide/_1131.html

week 4

Web accessibility for graphics (part 1): color, responsive design, mobile

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1-8yGCQkMeofdf_KRhitwTnOguyIxrmrX11n3lRPYWW8/edit?usp=sharing

Homework

week 5

Web accessibility for graphics (part 2): audio graphics, new forms of storytelling

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1wbr-pvAqDk1O9smK_AncJq4F0EnEr9NSvcvMOWqcu7o/edit?usp=sharing

Homework

week 6

Web accessibility for video, closed captioning

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1barefjHTmiUucr8OP4LNZjXrkpwSlcLV-O1M-cHgxNE/edit?usp=sharing

Homework

  • Read and comment on: Feeling Meets Testing (pg 135-154)
  • Optional reading:
  • Technical homework:
    • Part 1: Watch at least 10 minutes of a movie or television show that you are not very familiar with on Hulu, Amazon Video, Netflix, etc… with the sound off and closed captioning turned on. Then watch it again with the sound on. Write one paragraph about your reactions (e.g. what did you like? dislike? suggestions to improve closed captioning? did you miss any important information using only closed captioning?).
    • Part 2: Take a news video that features at least three people/voices and provide 60 seconds of closed captioning. If you use Amara, turn in the Amara link. If you use other software for closed captioning, upload your video and captions to Youtube or Vimeo (you can keep the video unlisted/password-protected so it isn’t public, but provide the link and password in your homework submission). The purpose of this assignment is to get comfortable with the best practices of closed captioning, so make sure to follow the guidelines suggested by WGBH , 3Play Media and Amara (see in-class powerpoint ) (e.g. length, identifying speakers, denoting sound effects, punctuation, spelling, etc…).

week 7

Web accessibility for video, closed captioning

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1mo5rXEQipuHUDYhgmoKCwelcgIMjCkhGOQuy2YVbr60/edit?usp=sharing

Homework

week 8

Accessibility in social media, VR, new media platforms, gaming

In-class powerpoint

https://docs.google.com/a/newschool.edu/presentation/d/1iXzl5J4v7nYDHHjHLFPU4K_HQwlavK00B9zaJQuWxzk/edit?usp=sharing

Homework

week 9

Field Trip to the NYPL (with Managing Librarian Lyman Clayborn)

Homework

Pick the proposal that you’d like to pursue for your final project. I would recommend sticking with your idea for the rest of the semester, so make sure you’ve given it some thought. You should have already received feedback from me on your proposals. Send me a note on Canvas or an email if you have any questions or want to talk through your idea. The earlier the better!

The purpose of the design brief is to help set the boundaries of your project. The design brief will identify the purpose of your project, define your audience and set design guidelines, assumptions and constraints for your project. You can think of the design brief as an introduction or methods section of a research paper.

The design brief should be at least one page single-spaced (or two pages double spaced) and cover the following:

  • Identify the purpose of your project. Are you solving a problem? Do you want your project to address a particular issue? Who is your audience?
  • Is anything out there that is similar to your project yet? If there are similar projects/products, how will yours be different? Do some research here.
  • What are the constraints of your project? What features will you address? Think about the way Apple designs its products, like the iPod Shuffle. The “Simple Meets Universal” chapter of our reading talks about constraining your specification. Do that here. Be as specific as possible. For example, if your plan is to design a website, what components will you focus on? Are you making the components more accessible for people who have visual impairments? Physical impairments? Difficulty getting a decent Internet connection? All of the above?
  • Include any resources you use in the design brief. I’m not picky about the format for your references as long as it’s clear where you are getting your information. Make sure that I (or any other reader) can find your sources while reading the text (e.g. don’t put a bulleted list of references at the end without connecting it in some way to the text above it with numbers or symbols, etc…).

You will be expected to talk about your design brief in class next week, so make sure you’re ready! If you have any questions, please let me know. For more details on the final project, see the Final Project Info document.

week 10

Present design briefs

Homework

week 11

Bridging language barriers, localization, accessibility in other countries

Guest Speaker

Alex Kelly / Willa from the NYPL talking about Visible Lives Oral History Project

Homework

  • Work on final projects. Rough drafts due next week.

week 12

Accessibility for people without reliable Internet access, “Beyond the Internet”

Homework

  • Work on final projects.

week 13

Whitney Museum tour

In-Class

We will meet on Monday, April 25 at 4 p.m. at the Whitney Museum. We will NOT have class on Thursday, April 28.

Homework

  • Final project presentations

week 14

Final project presentations, questions

In-Class

Final presentations

week 15

Final project presentations, questions

In-Class

Final presentations