Accessibility Guide

From WeBWorK_wiki
Jump to navigation Jump to search

Status of the WeBWorK Accessibility Project

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 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 has long been available in WeBWorK, and MathJax are available is available in recent (2.4.7+) releases.

Since MathJax is a relatively new addition to WeBWorK, it is not yet set as the default display mode for mathematics. 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/global.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, type "MathJax" (no quotes) into the textbox 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 double click on any mathematical expression to temporarily enlarge it.

Using Internet Explorer and MathPlayer to have mathematical expressions read aloud

With MathJax enabled, users who access WeBWorK using the Microsoft Internet Explorer web browser enhanced with the free MathPlayer plugin from Design Science may have mathematical expressions read aloud.

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 that browser 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".
Select MathJax renderer.png
    1. 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".
Select MathJax contextual.png


The problem with using Accessible is that it disabled the MathJax contextual menu in IE with MathPlayer, and so students using that combination will not be able to access the features of the contextual menu. I'm not sure it is best to restrict everyone else's access for the relatively small number of users with screen readers.

An alternative would be to use TeX-AMS-MML_HTMLorMML-full or TeX-AMS_HTML-full (my preference), but to activate an additional menu item that is not normally available. The Settings submenu can have a "Contextual Menu" selection that lets you select "MathJax" or "Browser". Those who have screen readers that need the click-through to MathPlayer could select Settings->ContextualMenu->

Browser to get the same effect as showMathMenuMSIE:false without taking the menu away from everyone else. (And the IE/MathPlayer users could still access the MathJax menu via ALT-clicking the math.)

You can achieve this by adding

      <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        MathMenu: { showContext: true }
      });
      </script>

somewhere prior to the <script> that loads MathJax. (Or if you are loading the default.js configuration, you can set it in that instead.) I think the setting of this menu is saved in the MathJax menu cookie along wiht the other settings, which are maintained for a year, so that should be sticky across sessions, on a student-by-student basis.

Temporarily enlarging mathematical expressions

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

Laws, Standards and Guidelines

Free Online Web Accessibility Checkers

Firefox Add-ons

Colorblind Checkers

Manual Web Accessibility Testing Guides

Webinars/Online Trainings

Mobile Devices

WebAIM Articles

More tools