Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
1 result
Blame Permalink
website.md 8.25 KiB 
layout: assignment
published: true

title: Website/App Accessibility Assessment
code: hw2

assigned: Jan 10, 2023
due: 
   - Jan 21, 2023, 5pm Pacific
   - Two day grace period, Jan 23, 2023, 5pm Pacific
   
   
revised: Jan 3, 2023
  • TOC {: toc}

Learning Goals

The goal of this homework is to learn about basics of website accessibility and how to assess; Learn how to use automated tools (and their limitations); Learn how to address the limitations of automated tools using accessibility tools; Learn how to write up an assessment and prioritize what problems to fix; Practice identifying paths to fixing problems. You will also have the opportunity to practice UI image description.

0. Pick a website and/or app and two tasks

You may submit your top three choices for website/app from listing below and include at most one of your own on the Ed Discussion thread for selection for this assignment. Our goal is to have at least four students* working independently on each website. Note that there is a task associated with each website/app (and if you pick your own, you should also have a task in mind).

{% details Possible websites/apps %} {% enddetails %}

Tasks

It will help to focus your effort if you have one-two specific tasks

Guidelines

You will use W3C guidelines for the site or app you are assessing.

The most relevant are probably WCAG 2.1 and How WCAG 2.0 Applies to Mobile (even websites may be used in mobile settings). If you are working on a mobile app, you should also review this PDF (which is numbered page 9): Epidemiology as a Framework for Large-Scale Mobile Application Accessibility Assessment.

1. Collect Data on the accessibility problems with that website and/or app

For each of these steps, you will record data about what you find so that you can complete the write up at the end.

Run an accessibility checker

You should run the website and/or app 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.

To install the Accessibility Scanner on android, search for it in the Play Store and install it on your device or emulator. The installation process will be the same for a physical phone or the emulator equipped with the Play Store. Follow the instructions on the Getting started with Google Accessibility Scanner page to get the scanner working on your device. Another option is to install the Android Accessibility Suite which contains both the Accessibility Scanner and TalkBack if it has not been installed before.

For iOS, you should install the Accessibility Inspector, which is freely available through the App Store. More details on testing for accessibility in iOS.

Test it yourself

Use a screen reader and switch input to assess the website and/or app, and your ability to complete the assigned task using accessibility tools. You may also use other accessibility tools if you feel there are things that does not address.

Here are some resources that may help you in gaining comfort with these accessibility technologies

Record the data in a Usability Aspect Report

Short (1 page max) report for each group of similar issues you find using this Usability Aspect Report Template

For example, consider this view of the the WebAIM automated accessibility checker. The red mountain with the X indicates that it is missing an image description. To write this up, you would record the

  • Name as "Missing Image ALT Text";
  • Evidence Guideline violated: 1.1 (Text Alternatives);
  • Explanation A screen reader won't be able to describe this image
  • Severity 2. Justification This is debatable, but frequency is low (it only occurs once on this site. If you are writing up all missing image alt text as a group, you might increase your estimate of frequency, but this site doesn't appear to have a lot of undescribed images); impact is low (it is possible to determine the purpose of this image by either clicking on it to see what it links to, or inferring some things from the external link and image file name (both unpleasant alternatives for a screen reader user); and persistence is high (it's not going to go away).
  • Possible Solution This is easy to solve, describe the image and all text in it. "December Update in a white circle surrounded by wintry trees. Around it are the words 'Hours Update', 'New Exhibits', 'Workshops' and 'Finals Help'"
  • Relationship to other problems Since we only have one example UAR here we don't have much to say, but this could mention for example other areas of the website which are missing labels such as form entries or buttons.

Turnin

You will turn in your UARs on the problems you found in one week on the Ed discussion thread for your website (To be posted)

In two weeks you will write up 5 page report documenting problems that you and others found on your website and suggesting solutions. Your report should be accessible (including proper use of headings, ALT text, table markup and so on) and have the following structure:

  • The first page should introduce the site or app, its purpose, and the task you assessed and state which tools you used in your assessment.
  • The first page should also have an executive summary of the biggest (most frequent, severe) problems, and your recommendations for fixing them. Keep this brief, you will provide more detail in the following pages.
  • The next section of the report should provide an overview, and detail, on the problems found.
    • You should start with an overview table that looks something like this.
WCAG # # Severe problems # Moderate problems Minor problems
... ... ... ...
:------- :------------------ :-------------------- :---------------
  • Next, there should be a subsection for each WCAG #
    • summarize the issue (s) found if any
    • give an example of a typical case
    • provide details if there are any special cases
    • list (briefly) all the other places it happens
  • Finally discuss the remedy that is needed

Competencies

This homework will contribute to your competency grade on

  • Can apply web/app accessibility rules to identify problems, including
    • 1 whether content is perceivable
    • 2 whether content is operable
    • 3 whether content is understandable
    • 4 whether content is robust
    • 5 the meaning of conformance
  • Can use an accessibility checker to assess whether a web page or app is accessible
  • Can use an accessibility technology to find web page or app accessibility problems that are not found with an automated accessibility checker
  • Familiarity with a range of accessibility technologies (especially for testing things that accessibility checkers cannot find)
  • Can articulate paths to addressing accessibility problems
  • Accessible written document creation
  • Image description
  • Your participation grade, as a percentage of completeness (are all the required parts present)