Make your Webpage More Accessible

This is an individual project to make your webpage more accessible. Learning goals include

  • Some of the basic rules for web accessibility
  • How to use an accessibility checker to assess whether a web page is accessible
  • How to fix accessibility problems
  • How to work within the constraints of end-user content editing tools and still make something accessible

This project has two phases.

Phase one: Assess problems

In phase one, you will assess problems with the web page you choose.

Picking a webpage

You can assess your own website, if you have one. If not, a next best option would be your personal social media site (such as your linked-in page). If you don’t have one, but use social media such as facebook and twitter you can assess your posts on one of those sites. Finally, if none of those are options, just pick any site you think makes sense.

Running an accessibility checker

Once you have selected a web page, you should run it through an accessibility checker. The WebAim accessibility checker, WAVE, is a great choice for many sites. However, if the site requires that you log in, you may need an alternative. A great choice is the Chrome plugin Axe.

What to bring to class from Phase one

You should not change anything about the website you selected before class. You should bring your accessibility checking results to class and have read them over. We will work together in class on addressing the problems you found.

Phase two: Fixing problems

In phase two, you will fix problems on the website you chose. We will talk about how to write alt text, set up proper header structures, simplify language, and what else is possible within the constraints of the technology you are using.

Final Project

The goal of your final project is to explore an accessibility issue in more depth than you’ve been able to do in our projects so far. In choosing this project, you may want to draw from personal expertise, literature, or user data should you have access to it.

Your final project will have three phases:

Proposal

  • Proposal: Your proposal be a slide deck with 5 slides that describe your
    • promise: How the world will be better based on your project
    • obstacle: Why we don’t have this already.
    • solution: How you will achieve the promise. This will most likely be primarily technical, such as a novel device.
    • related work: It should also include a related work section with at least 5 references showing some evidence for the importance of this problem.
    • timeline: Finally, it should include a timeline showing that this is feasible.
  • Development: We will check in on projects in part of class and/or office hours on a weekly basis to help provide guidance about progress on the milestones laid out in your timeline

Midterm Writeup

Midway through the project you will turn in a brief update to your project. This should included an up-to-date written version of your promise, obstacle and solution (1-3 paragraphs) and a related work section, also updated based on feedback (3-4 paragraphs). The total should be less than a page long.

Final Project Writeup

The final 2-page report should be in the 2-column CHI template format: https://chi2020.acm.org/authors/chi-proceedings-format/

Requirements for this are below. In addition you should follow the writing guidelines put out by SIGACCESS for writing about disability.

In addition, you will participate in a poster session.

Poster

Your poster should cover the same basic items as your report, but in much less depth. It should have a section highlighting the key goals of the project, images of what you did and/or pictures that convey study results if you did one, and some explanation of how you accomplished things, as well as mentioning how a disability studies perspective informed your project.

It does not need a related work section, and you will want to put your names on it and a big title.

Written Document

The report should cover these main sections:

  • Introduction — 1-3 paragraphs: Present the promise/ obstacle/ solution for your project — what is the problem are you solving and why is it important to solve it? This can re-use text from your midterm report.
  • Related Work  — 3-4 paragraphs: Talk about relevant work that closely connects with your project. This can re-use text from your midterm report.
  • Methodology — about 1 page: What did you do in your project – If you worked with participants: how many people, what did they do. If you implemented a system, or designed something, what did you design?
  • Disability Studies Perspective – 1 Paragraph: How did a disability studies perspective inform your project
  • Conclusions — 1-2 paragraphs: describe what you learnt and how can this be extended/built on in the future
  • Personal reflection — 1-2 paragraphs, individual and handed in separately: describe what you personally learned from this project, and what your individual contributions were to the team.

Important notes and considerations

  • Language: You will be expected to use best practices in language and presentation. Here is the SIGACCESS guide on this.
  • The things we have emphasized in this class, namely a disability studies perspective and physical building, should be featured in your project as much as possible.
    • With respect to disability studies, you should think critically about whether and how your project empowers and gives agency to people with disabilities, as well as the extent to which it expects/engages the larger structural issues around the problem you’re trying to solve
    • With respect to physical computing, this is not required, but you should get approval from the instructor if you go in a different direction, and have a rationale
  • If you don’t have personal experience justifying the choice of problem, it is important to find studies that involved people with disabilities that help justify the sense of your proposed work. It is not feasible to do a full iterative design cycle in this project (and not necessarily an ethical use of the time of people with disabilities), but equally important not to come in with a ‘hero complex’ and simply believe you know what people need.
  • Your project can include designing and piloting a study, but only if you have significant experience already in this domain since we haven’t really taught that aspect of accessibility in this class. Better to spend time on skills you learned here! In addition, given the number of weeks available, be careful not to overcommit (e.g. creating a significant novel device and a lengthy study!)

3D printing on the Ultimaker

Cura is the software yo ushould use. It has built in slicing, runs on macs and windows, and has pre-configured options for all Ultimaker models in the add-a-printer dialogue (instructions for adding a printer).

You will need to first export your model as an STL from OpenSCAD: First you render, not just preview, then you 3D print (the menu option just under Render in the image at right. You may need to debug your model. The result will be an STL file.

When you load an STL file into Cura, you then prepare your print. There are MANY options to consider, which are documented in detail on the ‘Mastering Cura’ webpage.  Keep an eye on predicted print time

You saw in class how to start a print. First, save to GCODE from CURA. Then bring it to the Ultimaker. The Ultimaker resources I am linking to are part of a series (look for the arrows at bottom right and left of each page) that walks you through everything you need to make that first print. I’d recommend trying this out with something really small from the essential calibration set in our drive such as the thin wall box. It should be something that prints in 20 mins or less. You can also experiment with settings such as rafts and brims in that small format.

Please see the Slides about Printer Operation (accessible to people in the class only) for more detail.

Use 3D printing to make something Accessible (Due 10/16)

The goal of this assignment is for you to develop basic familiarity with OpenSCAD. Your goal is to create a model of something that makes something more accessible for you or someone else. To keep this problem within reason for a first assignment, you should focus on things that are fairly simple to model. You should work in pairs on this assignment.

Examples would be a tactile label for something (such as a luggage tag), a guide (to make moving something along a path easier) or a lever (to make rotating something easier.

  • Your solution should be correctly sized (i.e. try to measure the thing you are modifying and to make sure that your printed object is appropriately sized).
  • You should use a simple method to attach things such as a zip-tie (simply requires small holes), or glue.
  • Your object should be small (be printable in 20 minutes to 2 hours)

You should create a Thingiverse “thing” which represents your object with a picture of your final object in use, your OpenSCAD file, and a picture of your model, along with a brief explanation of what problem it solves, how to correctly size it, how it attaches to or interacts with the real world. If you remixed something else on Thingiverse be sure to correctly attribute it (by creating a remix).

You should submit the link to your Thingiverse “thing” on Canvas.

You should also print it out to demo in class. Here is a page with information about using the Ultimaker printers. This slide deck about 3D printing also has lots of in.

The grading rubric for this assignment is as follows. When points are 1 or 0, this is pass fail (no nuance). When points are 0-3, use the following scale: 0 – Not done; 1 – Short shallow solution; 2 – Good solution; 3 – Outstanding solution.

Points Description Comments (by grader)
0-3 Create a 3D model that solves a problem
1 or 0Learn how to correctly size a model
1 or 0Apply an appropriate attachment method
1 or 0Learn the pipeline: Create a 3D printed object from your model
0-3Describe how a model should be used

Setting up your BlueFruit

Setting up your bluefruit is fairly straightforward, but there are a couple of things you will need to do. They are (almost) all documented on the AdaFruit website BlueFruit page. Some things you will need to do:

  • Install the Arduino software
  • Open Preferences and put ‘https://adafruit.github.io/arduino-board-index/package_adafruit_index.json’ in the Additional Boards Manager URL
  • Open Tools>Board…>Board Manager
  • Click on Adafruit nRF52 and click ‘Install’
  • Quit and re-open the Arduino IDE
  • Check if you have succeeded. You should be able to select the Bluefruit board from the Boards menu, select the correct port from Tools>Port and upload a sketch!

OS-specific Install Instructions

  • If you are on a mac, you will additionally need to install the USB to UART bridge drivers provided by Silabs. Be sure (within 30 minutes of install) to approve it in the Security and Privacy settings for your mac (you’ll see a button for this below “Allow apps downloaded from…”).
  • If you are Windows, you may need to install a driver (I did not have to on the windows machine in our classroom).
  • Check if you have succeeded. You should see a USB port in your Arduino Ports menu

Additional Software

  • You will need the Bluefruit LE Connect app on your phone, and here is the AdaFruit website describing how to install that
  • You’ll want the Bluefruit libraries and sample code. Go to Tools>Manage Libraries and search for bluefruit. Install the Adafruit BluefruitLE nRF51 suite

Sketches used in class

You can download the sketches used in our class from our class google drive, arduino folder.

Observation & Reflection (due by end of quarter)

Much of this quarter will likely be spent inventing and building accessibile technology, and you may not have time to also do the sort of participatory design project that would ideally ensure that your technology fully reflects your target user. This project is your opportunity to focus on learning rather than building, observing rather than inventing. Even if you already have a disability or have worked closely with people with disabilities before, you can always learn something new from going out into the field.

Up to 3 students at a time will attend a demo/ eval events involving assistive technology. I am still gathering details for this including timing and length.

During a device demonstration, students will have the opportunity to observe one of WATAP’s assistive technology specialists provide a guided exploration of the features and options of AT devices with the purpose of helping individuals with disabilities to make informed decisions and a confident choices about what AT would meet their functional needs. Evaluations are similar, but using information including the individual’s history, skills, decision and choice, environmental considerations, etc, the specialist will provide a written recommendation on what AT should be considered for purchase. You will have an opportunity to see the process of what information and considerations are used to make these recommendations.

At the end you should write a short reflection (about 1 page) about your experience. This reflection should touch on the following topics:

  • What did you observe (what stood out to you as interesting about the space, people, and task that you engaged with? Were there things that worked particularly well? Were there breakdowns?)
  • What did you learn (did you learn something about accessible technologies? Anything that might inform your approach to research?)

The grading rubric for this assignment is as follows. Please fill it out yourself, and ask a classmate to fill out and sign it. When points are 1 or 0, this is pass fail (no nuance). When points are 0-3, use the following scale: 0 – No answer to question; 1 – Short shallow answer to question; 2 – Good answer to question; 3 – Outstanding answer to question.

Points Description Comments (by grader)
1 or 0Student attended observation
0-3Paragraph on what was observed
0-3Paragraph on what was learned

Project 2: Build a Better Button

Learning Goals for the Project

  • Learn about Circuit design
  • Learn how to communicate between an Arduino and your phone
  • Build a simple circuit that is enhanced by its connection to your phone

Basic Requirements for Project

Your project should demonstrate your ability to either:

  • Take input from at least one button (or other sensor), and connect it to some interesting service
  • Your focus should be on circuit design and Arduino programming. You don’t need to create a custom phone app. You can if you want create a custom case or button using 3d printing.

You should make a case for why this is an assistive technology of some sort. For example, you could build a door opening sensor (using a button or proximity sensor) that causes your phone to announce the door was opened, or a single switch control for scrolling or tabbing through a web page, or a capacitive sensor that captures a log of how often a cane is used.

There is some great software that con be connected to the Arduino including 1Shield, AppInventor, Blynk and IFTTT. Some work only for Android, others for both Android and iPhone.

There are lots of really great examples online of arduino based projects, arduino projects that involve smartphones, and arduino projects that involve 3D printing or laser cutting. Many of them are too complex for the expectations of this project, though they might help to inspire final projects, or give you ideas for something simple you can do in a week. Here is a sample:

Hand In

Create a Thingiverse or Instructables page for your project with a brief description of the project, a video, any 3D printed files, and a schematic for your circuit. Turn the URL in by email with the subject: Project 2. Be prepared to demo your project in class.

PointsDescription
1 or 0 Project uses physical computing to solve an accessibility problem
1 or 0Project communicates with your phone in some way
1 or 0Project includes a working circuit that you designed
1 or 0Project includes at least one button
1 or 0 Project includes some kind of response to the button
1 or 0Thingiverse or Instructables page describes project in a reproducable fashion.

The Future of Access Technologies

Sieg 322, M/W 9-10:20

How can physical computing enable new solutions to accessibility, including both access to the world and access to computers? Similarly, how can a disability studies perspective guide us in developing empowering and relevant solutions to accessibility problems? This course explores both of those questions through a combination of discussions, reading, and building.

Access technology (AT) has the potential to increase autonomy, and improve millions of people’s ability to live independently. This potential is currently under-realized because the expertise needed to create the right AT is in short supply and the custom nature of AT makes it difficult to deliver inexpensively. Yet computers’ flexibility and exponentially increasing power have revolutionized and democratized access technologies. In addition, by studying access technology, we can gain valuable insights into the future of all user interface technology.

In this course we will focus on two primary domains for access technologies: Access to the world (first half of the class) and Access to computers (second half of class). Students will start the course by learning some basic physical computing capabilities so that they have the tools to build novel access technologies. We will focus on creating AT using sensors and actuators that can be controlled/sensed with a mobile device. The largest project in the class will be an open ended opportunity to explore access technology in more depth. 

Class will meet 9-10:20 M/W

Class Syllabus

Private Class Canvas Website

Tentative Schedule

Week 1 (9/25 ONLY): Introduction

Week 2 (10/2 ONLY): Introduction

Week 3  (10/7; 10/9): 3D Printing & Laser Cutting

Week 4 (10/14; 10/16): Physical Computing

In class: Connect simple LED circuit to a phone

Pair Project: Build a Better Button (Demo 10/30; webpage due 11/1)

Week 5 (10/21; 10/23): Finishing Arduino; Disability Studies

  • Disability Studies reading due: Pick ONE only to read. Hopefully among us we will cover a range of them. We’ll compare and contrast.
  • Open work time on Arduino projects

Week 6 (10/28; 10/30): Disability Studies; Input [Tentative]

  • Discussion of Arduino Projects
  • Starting on Input
    • Characterizing the performance of input devices (‘Design space of input devices’)
    • Digital techniques for adapting to user input capabilities (e.g. voice control, eye gaze)
    • Novel interaction techniques (e.g. mobile phone interaction, at the time)
    • Passive sensing and other real world input challenges
  • Reading 1: Slide Rule
  • Reading 2: The Design Space of Input Devices

Week 7 (11/4; 11/6): Output

Week 8 (11/13 ONLY): Applications

Week 9 (11/18; 11/20): The Web

Learn about “The Web,” how access technologies interact with the Web, and how to make accessible web pages.

WebAim.org — WebAIM has long been a leader in providing information and tutorials on making the Web accessible. A great source where you can read about accessibility issues, making content accessible, etc. Run it on your website or web page and look at the results before class.

Reading 1: Google Video on Practical Web Accessibility — this video provides a great overview of the Web and how to make web content accessible. Highly recommended as a supplement to what we will cover in class.

Optional Reading: If you want to supplement the reading with written guidance, check out WebAim.org Introduction to Web Accessibility, specifically the section titled ‘Principles of Accessible Design’ (which has links to how to properly write alt text; appropriate document structure, and so on).

Reading 2: What’s the problem?

Discussion: How can we make the web accessible when individual authors don’t? Also how can we improve web authoring?

Assignment: Assess a Web Page. In class, we will also make it more accessible. Please come prepared on 11/18.

Week 10 (11/25; 11/27):  Screen Readers (AKA Bigham (plus a few others) week 🙂

Week 10 (12/2; 12/4):  Working with Cognitive Impairment

Finals Week

Final Project Presentations will take place from 8:30-10:20 on Wednesday of finals week.

Final project presentations

Assistive Technology

Instructor: Jennifer Mankoffjmankoff@cs.cmu.edu
Spring 2005

HCII, 3601 NSH, (W)+1 (412) 268-1295
Office hours: By Appointment & 1-2pm Thurs

Course Description

This class will focus on computer accessibility, including web and desktop computing, and research in the area of assistive technology.

The major learning goals from this course include:

  • Develop an understanding of the relationship between disability policy, the disability rights movement, and your role as a technologist. For example, we will discuss we will discuss the pros and cons and infrastructure involved in supporting mainstream computer applications rather than creating new ones from scratch.
  • Develop a skill set for basic design and evaluation of accessible web pages and desktop applications.
  • Develop familiarity with technologies and research relating to accessibility including a study of optimal font size and color for people with dyslexia, word-prediction aids, a blind-accessible drawing program,
  • Develop familiarity with assistive technologies that use computation to increase the accessibility of the world in general. Examples include memory aids, sign-language recognition, and so on.

Requirements

Students will be expected to do service work with non-profits serving the local disabled community during one to two weekends of the start of the semester. This course has a project component, where students will design, implement, and test software for people with disabilities. Additionally, students will read and report on research papers pertinent to the domain.

Grading will be based on service work (10%); the project (60%); and class participation, including your reading summary and the lecture you lead (30%).

Other relevant documents

Course CalendarAssignmentsBibliography

Prerequisites

Prerequisites for this class are: Familiarity with basic Human Computer Interaction material or consent of the instructor (for undergraduate students)

It is recommended that you contact the instructor if you are interested in taking this class.