Case Study 10.3: Progressive Access—Good Practices for STEM Authoring

Based at the University of Birmingham, Volker Sorge has been at the forefront of conversations about alternative avenues for facilitating access to STEM notation and diagrams. Volker’s company, Progressive Access, provides software solutions for web accessibility. In particular, they specialize in creating SVG images that allow a user to zoom in without distortion and examine the particular parts of an equation or diagram.

In contrast to JPGs, PNGs, and other raster image files, SVGs are made up of geometric forms like lines, curves, and points that represent the overall image as discrete objects. The parts of an SVG can be tagged with semantic roles like “list” or “listitem.” By embedding information in the SVG that explains the function of the image’s parts, authors allow users to better understand equations, diagrams, or graphics as a sum of their parts.

To see what these SVGs look like in practice, check out the examples on the Progressive Access website. For instance, this molecular model of aspirin allows users to zoom in and explore the parts of the model.

In his talk at Virginia Tech’s Open Education Week, Volker suggested general accessibility tips for authors creating STEM resources. These suggestions include:

• Avoid spatial and layout manipulation (don’t add in elements like parbox, minipage, pbox, etc.)
• Write clean math without mixing text and math mode
• Avoid long inline equations
• No punctuation near math
• Use standard environments for lists, figures, and tables (no custom counters)

He further recommended that authors perform simple tests to assess the accessibility of their work. Quick checks include:

• Zoom: Attempt to magnify the equation or diagram (use Ctrl + on a PC or Command + on a Mac)

• Color contrast: View equation or diagram using high-contrast mode to determine if the image and descriptive text are still understandable (install Google Chrome’s High Contrast extension or another tool)

• Keyboard: Attempt to access materials using only a keyboard

• Browser and device compatibility: Try looking at material in different browsers; resize it to simulate different screen sizes; use something like Responsinator to simulate a tablet or phone.

• Screen reading: Test out equations and diagrams using a screen reader (NVDA, Apple Voiceover, Orca, ChromeVox, etc.)