Accessibility Guide

WeBWorK VPAT (Voluntary Product Accessibility Template)

An accessibility analysis was performed for the release of version 2.10 in January of 2015. The resulting VPAT is available at http://spot.pcc.edu/~ajordan/WeBWorKVPAT2-10.pdf.

Accessibility Guide for WeBWorK

WeBWorK is committed to creating an experience for all users and continues to improve the accessibility of the system. It is designed to conform to WCAG 2 Level AA conformance whenever possible. This document is a guide for users so they can better interact with the application. It is perhaps more helpful than the VPAT, which is more of a summary report.

General Page Navigation

• The first link on a page allows you to skip to the main content of the page.
• WeBWorK uses headings and landmarks to define the page structure.
  • The heading 1 marks the beginning of the main unique content of the page.
  • The menus are denoted with a heading level 2
  • Each navigation area is marked as a navigation landmark with an appropriate description. Typically there are navigation landmarks for
    • the “main” navigation which allows you to jump to other places in the system
    • the “breadcrumb” navigation which shows you where you are in hierarchy of the system
    • the “question navigation” which lets you go to the next and previous questions, along with going back to the parent page

Interacting with Problem Sets

Problem sets are presented as a table, with each row containing information about a different problem set. There may be additional information about the problem set listed after the table under the heading level 2 “Set Info”.

Interacting with Questions

This section is primarily for screen reader users.

The questions in WeBWorK are a combination of text, math, and form inputs. Because of the freeform nature questions can take, there isn’t always a clear link from each input element to a corresponding label. To accurately read a question you cannot stay in forms mode or simply jump from input element to input element. You will need to read the entire contents of the question using your virtual cursor, using auto-forms mode, or simply reading the entire contents linearly, depending on the appropriate mode for your screen reader.

Some input elements will be specifically tied to labels, such as for a multiple choice question. However, in the case of something like a fill in the blank question, some input elements will simply be labelled as “answer input 1”. In the case of a matrix that needs filling in, each element of the matrix will be an input with a label like “row 1, column 1”.

Because of the complexities of working with math on the Web with screen readers, screen reader users should read the later section on “Accessible Math on the Web.”

Accessibility of Graphs and Charts

Because of the nature of what is being asked of students in particular questions, or because of the nature of the problem itself, charts and graphs might not be readily accessible and might require being converted into an alternative format. When possible, and when the author has provided it, charts and graphs will contain either a textual description or a tabular representation of the data.

Previewing and Submitting Answers

When submitting answers there are two options available - previewing the answers and submitting the answers. With either option, after previewing or submitting, the results table will be at the beginning of the next page. In addition to the results table, the problem will be presented again, and depending on the settings of the problem, you may be able to resubmit the question.

You can click on “Preview Answers” at any point in answering the questions, even if you have not filled in every answer. Previewing the answers shows you what you entered and how the WeBWorK interprets what you entered. This allows you to make sure you entered the math expression as you intended.

Submitting answers may also show you a results table with the appropriate feedback depending on how the problem set is configured. In this case the results table will also be located at the beginning of the main content.

Working with Gateway Quizzes

In a gateway quiz, there may be multiple questions per page. Each question will being with with a heading level 2 with the text “Problem” and the number of the problem. There is also a link called “Preview Answers” that will present your answers back to you how WeBWorK interprets your input.

There is also a quiz navigation region that allows you to jump to individual questions or between pages of a multi-page quiz.

Accessible Math on the Web

Historically, interacting with math on the Web in accessible ways was largely dependent upon a software application called MathPlayer. Because of recent changes in browser technologies there are now fundamental barriers to MathPlayer working with browsers. The best configuration for fully interacting with math in accessible ways on the Web is to use Internet Explorer 9 with MathPlayer, however, Internet Explorer version 9 is significantly older than the currently supported versions of Internet Explorer. Later versions of Internet Explorer do not work with MathPlayer, and no other browser supports working with MathPlayer.

For screen reader users, VoiceOver on OS X and iOS, and ChromeVox within the Chrome browser do offer some support for interacting with math accessibly. For other user groups, such as those with learning disabilities, there are no good browser based solutions for working with math accessibly.

If you would like to extract the math from WeBWorK so that you can interact with it in a different application, WeBWorK offers options for displaying the math in alternative formats. Users can chose to have mathematical expressions in WeBWorK displayed as either images with alternative, using MathJax, or as plain TeX. When the math is displayed as an image the alternative text is the TeX format of the expression. When the math is displayed using MathJax, the user can choose to view the expression in its corresponding MathML or TeX format. You can also have WeBWorK display the math as plain TeX. Once you have the expression in one of these formats, you can then insert it into the assistive technology you prefer to use for interacting with math.

In WeBWorK, you can set the display option for the math under the “User Settings” link.

Pronunciation of the Application Name By Screen Readers

The software application is called “Web Work”, but because of the concatenation of the words and the capitalization of certain letters, screen readers often pronounce it like “we be were kay”.

WeBWorK accessibility presentations and videos

• A brief introduction to WeBWorK that was recorded for use in the July 2014 AHEAD Conference
• This is a one hour recording from the November 2014 Accessing Higher Ground Conference and the handouts
• A one and a half hour recording from the February 2015 AHEAD Access to Technology webinar series] and [https://www.ahead.org/learn/virtual-learning/at_webinars_14_15 the handouts (scroll to the February abstract).
• Test Video of NVDA Beta reading MathML (via MathJax) in Firefox. This is from March 11, 2015, and testing was only done on basic algebra problems.

Status of the WeBWorK Accessibility Project

In August 2014, a WeBWorK code camp was held in Portland with accessibility as its central theme. Participants were made aware of existing accessibility issues in version 2.8/2.9 and were shown tools that can be used to identify accessibility issues in general. Several of the accessibility issues will be addressed in time for the release of version 2.10, and a greater awareness of accessibility issues will be invaluable for development of version 3.0. The release of 2.10 will include a Voluntary Product Accessibility Template (VPAT) which will catalog accessibility strengths and weaknesses of WeBWorK. Additionally Greg Kraus created an Accessibility Guide for WeBWorK that is an excellent starting point for WeBWorK users interested in accessibility issues. A blog describing work from this camp is forthcoming.

Thanks to the help of the Adaptive Computing Technology Center (ACT) at the University of Missouri, we have access to the HiSoftware Compliance Sheriff scanning software, and have begun using this software to assess the extent to which WeBWorK meets both Section 508 accessibility regulations, and also more broad recommendations for enhancing the usability of WeBWorK for users accessing the application with assistive technology. This began with an initial consultation with the ACT on February 11, 2011, and our notes from that meeting are below. We have followed up by performing additional, deeper accessibility scans on WeBWorK, and enabled support for screen readers in all mathematics displayed in WeBWorK via the MathJax display mode. To summarize, currently,

• WeBWorK is not fully Section 508 compliant, but just barely. We plan to bring WeBWorK into full Section 508 compliance during Summer 2011.
• The core content of WeBWorK, the mathematics, can be made fully accessible to screen readers by enabling the MathJax display mode.

Instructions for using screen readers in WeBWorK with MathJax are given below, as well as our notes from the initial Feb. 11 consultation with the ACT.

How you can help

This is a high priority project for WeBWorK, and we would welcome help! We are looking for

• people who have expertise in this area and can offer advice or programming skills,
• people who use or are familiar with using assistive devices on the web and can report to us on the experience of using those tools with WeBWorK,
• people who have access to additional scanning tools,
• people who are willing and able to revise existing problems in the Open Problem Library to make them accessible,
• people who are just interested in moving this project forward!

Interested parties can contact us at webwork@maa.org.

Enabling accessible mathematics with MathJax

MathJax is "an open source JavaScript display engine for mathematics that works in all modern browsers." MathJax is the successor to jsMath. Both projects are led by Davide Cervone, who is also the author of the MathObjects extension to WeBWorK's PG problem authoring language. The jsMath display mode had long been available in WeBWorK, but was removed from version 2.9 as it has been entirely superseded by MathJax. MathJax has been available since 2.4.7.

At least as of version 2.9, MathJax is not the default display mode for mathematics. The "images" display mode typically performs faster as it does more work on the server side and can make repeat use of that work. To get the full benefit of the accessibility and other features of MathJax, system administrators or instructors may set MathJax as the default display mode on a system-wide or course-by-course basis.

To set MathJax to be the default display mode for every course on a WeBWorK server, edit the webwork2/conf/localOverrides.conf file to set

$pg{options}{displayMode} = "MathJax";

If MathJax is not the default display mode on the WeBWorK server, instructors may set MathJax to be the default for their courses. To do so, log in to the course as a professor, and navigate to "Course Configuration" -> "PG - Problem Display/Answer Checking".

Course Configuration

In the "PG - Problem Display/Answer Checking" table, choose MathJax from the dropdown menu (or for older versions of WeBWorK type MathJax into the text box to the right of "The default display mode" and then click the "Save Changes" button.

MathJax provides two important capabilities for visually impaired users.

• using the Microsoft Internet Explorer web browser enhanced with the free MathPlayer plugin from Design Science, users may have mathematical expressions read aloud.
• users may also temporarily enlarge any mathematical expression.

Using Internet Explorer and MathPlayer to have mathematics read aloud

With MathJax enabled, users who access WeBWorK using the Microsoft Internet Explorer (IE) web browser enhanced with the free MathPlayer plugin from Design Science may have mathematical expressions read aloud. MathPlayer only works with IE versions 6 through 9.

To get this working MathJax should be enabled as the default display mode as described above. Then users who wish to enable this feature should do the following:

1. Download MathPlayer and install it in Internet Explorer.
2. Access WeBWorK using IE and navigate to a page containing mathematics (such as a homework question).
3. There are two MathJax settings that must be changed.
   1. Right-click on any mathematical expression to access the MathJax contextual menu. Select "Settings"->"Math Renderer". The default is "HTML-CSS". This should be changed by selecting "MathML".
      
      Note that at this point you will be prompted by your browser to allow MathPlayer to run.
   2. Finally, to enable click-through access to MathPlayer, the MathJax contextual menu must be disabled. To do so, again right-click on any mathematical expression to access the MathJax contextual menu. Select "Settings"->"Contextual Menu". The default is "MathJax". This should be changed by selecting "Browser".
      
      Right clicking on mathematics will now return the contextual menu of the web-browser, not MathJax's contextual menu shown above. However, IE/MathPlayer users can still access the MathJax menu by ALT-clicking the math.

Note that the MathJax settings just made are saved in the MathJax menu cookie along with the other settings, and these are maintained for a year, so these should be sticky across sessions, on a user-by-user basis for a particular browser.

After following the steps above, the user will now see the MathPlayer options when right-clicking on a mathematical expression, options such as "Speak Expression" and "MathZoom":

Temporarily enlarging mathematical expressions

You can access MathJax's contextual menu and adjust "Settings"->"Zoom Trigger" and "Settings"->"Zoom Factor" so that math content can be temporarily enlarged for assisted viewing.

Report

We have received excellent advice from the folks at the University of Missouri who do accessibility testing. (Contact through Jason Aubrey User:aubreyja) They are willing to continue consultation/collaboration.

• One can make significant progress quickly in meeting 508 requirements, but really improving usability is a sizable project. Student manpower would be helpful.
• Establishing a good protocol for AltText in images would be a good start
• Implementing <label> tags for attaching labels to input entities would be useful.
  • It's somewhat preferable to adding label attributes to HTML entities.
• One would think that the equations and problems would be the chief barrier, but in fact there are substantial (and perhaps more important) barriers on the first pages. For example:
  • The front page which lists the courses
    • The every underscore is "pronounced" by the JAWS reader -- this makes many course names difficult to recognize.
    • The bullets are read (and they are not really necessary) -- there is some means to suppress this?
      • Fix?: Replace all underscores with spaces when printing to HTML pages. (John Jones has already done this in some locations.)
    • The masthead and links in the picture have too much prominence. The "not logged in" logo in the upper right hand corner is confusing (it is read before the login input)
  • The login page doesn't identify what to do with the User: and Password: input boxes. Should have a <label>?
  • The Course home page has "Sel." for select -- what does that mean? The download Hardcopy button comes after the selection of radio buttons -- so no clue why one would select anything until one "scans" down to there.
  • In general the Login, Course home pages were written using HTML for styling
    • This should be replaced by using HTML for hierarchical organization and CSS for styling.
      • For example the top "Main page" is an H3 because that gives the right size -- but it should be H1?
      • Practicing navigating the page using VoiceOver or JAWS gives some idea of what one is up against

Web Accessibility Tools and Resources

Introduction to Web Accessibility

• WebAIM’s Introduction to Web Accessibility - http://webaim.org/intro
• W3C Web Accessibility Initiative - http://www.w3.org/WAI/gettingstarted/Overview.html
• Mediawiki_and_Accessibility

Laws, Standards and Guidelines

• MU Web Policies and Guidelines -
  • http://webcom.missouri.edu/policy/web-policy.php
  • Missouri Information Technology Accessibility Standards
• Missouri Information Technology Accessibility Standards (MITAS) - http://oa.mo.gov/itsd/cio/standards/ittechnology.htm
• Section 508 -
  • http://www.section508.gov
  • http://www.access-board.gov/sec508/guide/1194.22.htm
• WebAIM Section 508 Checklist - http://www.webaim.org/standards/508/checklist
• Web Content Accessibility Guidelines (WCAG) 2.0 – http://www.w3.org/TR/WCAG20
• WebAIM's WCAG 2.0 Checklist - http://webaim.org/standards/wcag/checklist
• Examples of accessible and inaccessible tables
• Guidelines for accessible graphs

Free Online Web Accessibility Checkers

• Functional Accessibility Evaluator (FAE) - http://fae.cita.uiuc.edu
• W3C validator - http://validator.w3.org
• Cynthia Says - http://www.cynthiasays.com
• WebAIM’s Wave Web Accessibility Evaluation Tool - http://wave.webaim.org

Firefox Add-ons

• Fangs Screen Reader Emulator - http://www.standards-schmandards.com/projects/fangs
• HTML Validator - https://addons.mozilla.org/en-US/firefox/addon/249
• WebAIM’s WAVE Toolbar - http://wave.webaim.org/toolbar
• Accessibility Extension Firefox toolbar - https://addons.mozilla.org/en-US/firefox/addon/5809
• Web Developer - http://chrispederick.com/work/web-developer

Color Checking Tools

• a page that explains some issues in color choices
• Color Contrast Check tool at snook.ca can check for AA and AAA contrast compliance]
• Contrast-A at dasplankton.de is another color contrast checker]
• WebAIM Color Contrast Checker
• Colorblind Web Page Filter
• Color Oracle color blindness simulator
• Is your site color blind accessible? blog post on color blind accessibility

Manual Web Accessibility Testing Guides

• Using JAWS to Evaluate Web Accessibility - http://webaim.org/articles/jaws
• Using NVDA to Evaluate Web Accessibility - http://webaim.org/articles/nvda
• Using VoiceOver to Evaluate Web Accessibility - http://webaim.org/articles/voiceover/
• Evaluating Cognitive Web Accessibility - http://webaim.org/articles/evaluatingcognitive

Webinars/Online Trainings

• EASI: Equal Access to Software and Information - http://easi.cc/clinic.htm
• WebAIM - http://www.webaim.org/articles
• High Tech Center Training Unit - http://htctu.net/trainings/manuals/tutmain.htm
• CATEA accesselearning - http://www.accesselearning.net

Mobile Devices

• mobiForge - http://mobiforge.com/Testing

WebAIM Articles

• Skip Navigation - http://webaim.org/techniques/skipnav
• Appropriate Use of Alternative Text - http://webaim.org/techniques/alttext
• Creating Accessible Forms - http://webaim.org/techniques/forms/controls
• Creating Accessible Tables - http://webaim.org/techniques/tables

More tools

• Daisy
• LOUIS database
• Curtin University Centre for Accessible Technology (Australia)
  • LOUIS - Macintosh Braille Translator download and updates
• AccessibleMath.org, Resources

Updates

• 2018, February: Comments in the forum on new features in MathJax for accessibility: [1]
• 2013, Summary by Disability Services at Portland Community College on reviewing WeBWorK: Making Math More Accessible at Portland Community College