Accessible Math Using Markdown

Susan Mosteller scmosteller@pstcc.edu

Mary Monroe-Ellis mmonroeellis@pstcc.edu

Josh Dean TheJoshDean.com

PSCC Math

Where We Started

screenshot of a pdf of a handwritten key document

Accessible Math Using Markdown

Create accessible documents and content that can be easily edited in a Learning Management System and can be read by screenreaders.

\[\int_0^3\left(\frac{x^3}4-2x^2-e^x\right)\;\operatorname dx\;\]

Components of a Math Document:

  1. Text: Formatting/navigation Issues
  2. Equations: Screen Reader Issues
  3. Tables: Screen Reader Issues
  4. Images: Alternate Text

Google Docs

  • Supports LaTeX
  • Allows poor accessibility practices (i.e. multiple returns, spacing, etc.)

Markdown guides you to create an accessible document without these issues.

What is Markdown?

MarkDown is a text-to-HTML conversion tool.

MarkDown allows you to write using an:

easy-to read

easy-to-write

plain text format

that converts it to structurally valid XHTML (or HTML).

-daringfireball.net

Why Markdown?

Markdown is plain-text: margins, tab stops, page breaks, extra spacing, and formatting are all unsupported, ignored and therefore dropped. This is limiting but also helpful with accessibility.

Text

Multiple spaces, or line breaks in a markdown file are ignored when converted to an HTML document. A Word document copied into a markdown editor is stripped of all formatting and flourishes.

Formatting and styles can be added once we have an HTML file, but Markdown lets you focus on content first.

Basic formatting is easy using simple keystrokes found on the Markdown Reference Guide

Equations

Wiris Equation Editor

To edit and create our formulas we use the Wiris editor. Once we use the editor we have the tex code to paste into our markdown file.

screenshot of wiris editor webpage producing mathml and latex code

Example Equation

Right click on the math formula to see more options.

\[\int_0^3\left(\frac{x^3}4-2x^2-e^x\right)dx\]

Listen to the Jaws screenreader process the above formula:

The above formula is written using tex or latex code. \int_0^3\left(\frac{x^3}4-2x^2-e^x\right)dx

Don't worry we don't need to learn tex code!

Equations

MathType to LaTex

Equations that were created in MathType can be converted to LaTeX without retyping them in Wiris.

screenshot of a MathType equation and its conversion to LaTeX

Tables

HTML Table Generator

To edit and create tables we use the HTML Table Generator.

screenshot of table generator webpage producing html code

Images

![Alt Text](path to the image)

  • FROM THE WEB

    ![Type in the alternate text you want here](copy image address from the web and paste it here )

  • FROM A FILE

    ![Type in the alternate text you want here](This must be the path to your image--which is stored in the same location as your document)

Building an HTML Document

Putting Components Together

  • LMS
  • Markdown Editor
    • StackEdit
    • Markdown Pad
    • Marked
  • Web Snippet Tools
    • CodePen
    • Fiddle
  • TheJoshDean

CodePen

To edit and create Markdown we use CodePen.

screenshot of CodePen homescreen

CodePen

html

screenshot of where to choose markdown in codepen

CodePen

CSS

screenshot of where to choose the css code

CodePen

CSS

Other Formatting Options are Available

screenshot of Bootstrap Themes

CodePen

JavaScript (JS)

MathJax/MathML

JavaScript Library code looks through the document to find the LaTeX and converts that to MathML and Presentation Math which allows the screenreader to step through it.

Copy the Code Below and Insert in JS Settings in CodePen

CodePen

JS

screenshot of where to paste the JavaScript code in CodePen

CodePen

This link opens CodePen preloaded with Markdown, Bootstrap3, and the MathJax code settings.

Exporting Your Document

Export.zip

screenshot of Codepen export

Exporting Your Document

Create a Project Folder

screenshot of project folder with an images folder

Further Reading and Tools

Further Reading and Tools cont...

Further Reading

Further Reading and Tools cont...

Desktop Applications