website.md

layout: assignment
published: true

title: Website/App Accessibility Assessment
code: hw2

assigned: Jan 10, 2023
due: Jan 16, 2023
  
revised: November 30, 2022

• 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 whac 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 identify and review the most approprate guidelines for review

You may pick your website/app from listing below or ask for instructor approval for one of your own. 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 %}

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, take notes about what you find so that you can complete the writeup 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 equipt 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.

Record the data

When you encounter a problem,

• Name the problem
• List one or more guidelines that are violated (or say it is not in the guidelines)
• Take a screen shot & specify the URL
• Assign a severity (from 3, ending the interaction to 1, a minor inconvenience)
• Assign a prevalance (from 3, will occur all the time to 1, is likely to be rare)

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";

• Guideline as 1.1 (Text Alternatives);

• Screen Shot as the image and URL (lib.washington.edu);

• Severity 2. This is debatable, but I lowered it from three for two reasons: 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). Further, this is not the most important feature of the site.

• Prevalence 1 if you are talking about this image only, and it only occurs once on the site. If this is a consistent issue throughout the whole site (i.e. when you are summarizing the problems in this category), you might mark the prevalence of this violation much higher.

Turnin

You will turn in your raw notes on the problems you found

You will also write up 5 page report documenting problems 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)