Welcome to this presentation on Accessible
Math on the Web Part one, "The simple way
to use MathJax." My name is Greg Kraus, University
IT Accessibility Coordinator at NC State University.
So what's the problem with math on the Web?
When writing math on the Web, both the characters
that you use and the layout of the characters
and how they relate to one another spatially
both convey meaning. So, for example, in the
quadratic equation, we have a number of characters
but they also are positioned in specific spots
to convey meaning.
There's a fraction, so, I know what's on top
of the fraction has a meaning and I know that
the characters on the bottom of the fraction
have meaning. When I look at the b squared,
the two is slightly higher on the line, so
I know that there is an implied meaning there.
There's a square root symbol, so I know everything
under that square root symbol has meaning
as well.
Often you think, "Well, I can just use some
plain text to write this equation," but plain
text won't actually reveal the same meaning.
I could write this equation out just using
a bunch of ASCII characters. Visually, I can
understand what this is but if I use an assistive
technology, like a screen reader, it won't
make any sense at all. So let's hear how this
sounds to a screen reader user.
Quadratic formula in ASCII characters. Underline,
underline, underline, dash B plus or minus
V B caret 2 dash 4 ack X equals dash dash
dash two A
So you can see it's virtually impossible to
understand what this equation actually is
using plain text.
You might think, "Well, maybe I can just make
an image of the equation and then I can write
some alt text for it to describe what the
equation is." This is not recommended because
whenever you're writing a textual description
of an equation, there's a very specific grammar
that you need to use and a specific way that
it needs to be written out. Unless you are
an expert in this field and know a lot about
it, you're probably not going to get this
right. There are tools that will do this for
you.
For example, to write the alt text for this
equation, the quadratic equation, this is
what it's going to look like. You can see
there's a lot of nuances in there even from
the words that are used and the special way
some words are written. So, when a screen
reader reads them, the letters actually sound
correct. There's a lot of special rules that
have to be followed. So, don't try this at
home.
Why is this the simple way? Any time you're
writing math on the Web, putting math on a
Web page has lots of options and parameters.
You have to know things like what language
am I going to write the math in? Am I going
to write it in TeX, or LaTeX, or MathML? You
have to know what type of document it's going
to be in. Is it going to be an HTML 4 document,
an XHTML document, or an HTML5 document? You
have to know which namespace to use in the
document in order to make the math render
correctly.
If all of this is confusing to you and you
don't know what all of this is, that's why
we have the simple way, to show you the simple
way to always to get math to work correctly
online.
In a later tutorial, we'll look at other ways
that you can put math online that takes advantage
of some other technologies.
What is the simple way to write math? First
you need to create your equation in a program
called MathType. MathType is a program that
lets you graphically build your equation and
then export it to a number of plain text formats
that will work on Web pages. You take your
equation, you write it in MathType, and you
copy and paste the plain text version of it
into your HTML document either as TeX or LaTeX.
Then you're going to add in the MathJax libraries
to your page. It's just a single line of code
that's going to call these extra libraries
that will convert your plain text TeX or LaTeX
equation into a graphical representation.
So why use MathType? Well, like I said, you
have to write your equation in either the
TeX format or the LaTeX format and if you
know how to write that by hand, that's fine
and you can do that but if you don't know
how to write TeX or LaTex-and here are examples
of the quadratic formula written as both TeX
and LaTex-if you don't know how to do that,
MathType makes this really easy for you to
do.
So this is the MathType user interface. It
has all kinds of options for adding in all
kinds of math symbols to help build your equation.
For this tutorial, I'm going to use one of
their built-in equations. Just simply click
here to add in the quadratic formula. After
you've built your equation, you'll need to
go up to the Preferences menu and choose Cut
and Copy Preference. This is going to tell
MathType how you want to get this equation
out of MathType and into your Web page editing
program. So choose Cut and Copy Preferences.
Here I'm going to choose the second option
for MathML or TeX. Under here, I've got a
number of options that I can choose either
LaTeX or a couple of different MathML versions
or just plain TeX. For the simple way for
doing Math, you need to either choose LaTeX
or TeX, it doesn't really matter. Either one
will work just the same for this example.
I'll choose that.
If you have the checkbox "Include MathType
data in translation" checked, you need to
uncheck that for this example and choose OK.
So now I'll come to the Edit Menu and just
select all, edit and copy. So now I can go
paste this equation into my Web page editor.
After you've written your equation in MathType
and you set your preferences for how you want
to copy and paste this, then you need to go
to your HTML document and you need to add
a single line to the head section of your
Web page, and you're just going to add in
this single tag that basically goes out and
pulls in the MathJax libraries for you. Don't
worry about writing down this big line of
code right now. There's a link at the end
of the presentation to where you can get this.
You can also just go to the MathJax website
and it's documented there as well.
So what does MathJax look like? Well, MathJax
will take that plain text version of your
equation written in either TeX or LaTeX-in
this case, it's written as Tex-and once the
MathJax Library is loaded, it'll go and look
for these equations in your Web page and it
will transform it into a graphical representation
of your equation.
By using MathJax, you gain a couple of things.
First, your equation is going to look the
same no matter what browser people use. You
don't have to go out and create a special
image of your equation and when someone with
an assistive technology, like a screen reader,
comes to your Web page, they'll be able to
completely interact with this equation and
understand it.
So let's go see how to add all this stuff
into our Web page. This is my Web page editor.
In this case, I'm using Dreamweaver and I
am in the code view but any Web page editor
will work for this. This is going to be a
very simple example. I'm simply going to come
in here in between the body tags and just
choose edit and paste and you'll notice it
pasted in the TeX version of that equation
for MathType.
Now the next thing I need to do is I need
to add in that link to the MathJax libraries.
So let me go grab that text and I'll come
up here in the head section and I will just
paste that in there. That's all you need to
do. Once you upload this to the Web, the MathJax
libraries will automatically be loaded and
it will transform that equation into a graphical
representation of the equation.
Here's this equation in Internet Explorer.
Now, the MathJax libraries will work in any
browser. The reason I'm in Internet Explorer
is I want to show you one additional piece
of functionality that you get with using MathJax.
In Internet Explorer, there's a plugin that
users can download called MathPlayer, and
the MathPlayer plugin allows users to interact
with the equation in even more ways.
First, let me zoom in a little bit so we can
see the equation a little better. Then, I'm
going to right click on the equation. This
might be slightly off your screen, but I'm
going to choose Speak Expression. When I do
this, it's going to actually read the equation
to me, and it's also going to highlight it
as it reads. This is very helpful for people
who have certain learning disabilities so
they can actually follow along with and see
what is being read as it's being read.
fraction negative B plus minus square root
of B squared minus 4 A C end root over 2A
end fraction
What we just saw is actually only available
in Internet Explorer because it does work
with the MathPlayer plugin. If any of your
users come to your website with Firefox, Chrome,
Safari, it doesn't matter, the equation will
still look graphically the same. It's just
this additional functionality of having the
equation read to you that is only available
in Internet Explorer.
Here are a list of resources that I've mentioned
in this tutorial. First, a link to the MathJax
website where you can go and read all the
documentation about how the tools work, a
link to the MathType application where you
can go and purchase it. If you are an NC State
user and you would like MathType, you can
also just go the third URL go.ncsu.edu/mathtype
to download a copy of it. These links will
all be provided in the description of the
video.
Finally, for any of the code samples that
have been in this presentation, or for any
additional information, you can go to the
link go.ncsu.edu/accessible-math.
