# How to represent a translated formula in an accessible and visually clear way?

I'm working on porting a website copy from old system to new. One item of content has me flummoxed as to what to do with it.

It is a mathematical formula, written in english. However, it is saved as an image. (Note: this is just an example; it's not actually a valid formula).

Now, I could translate this to pure text, but that wouldn't really be as useful to fully-sighted users (i.e. the majority) because it would be something like this:

Fee = 'Total account balance as of 12 Jan' * 'Interest rate %' * ('Days in the current month' / 'Full length of service in days')


This is accessible, but isn't exactly usable anymore as it is worse than the current solution for sighted users.

I could provide this text breakdown as the alt text of the image, but that's not really that appropriate either, because it's very long and not really what alt text is designed for.

So. How do I translate this pure-text image into something still clear and understandable to look at, while being accessible at the same time?

• Thanks for posting this question, it opened up a whole new area I never thought about before – jackiemb Aug 19 '16 at 11:50
• Are the current images of your formulas generated automatically? Or created manually in a graphics editor? – Ben Harrison Aug 19 '16 at 13:50

Your question reminded me of Math.Stackexchange

You can go through different Q/A over there, you will find what exactly you are looking for.

The solution to this is from both point of view, i.e. designers' and developers. The math.stackexchange.com is using MathJax, which have many benefits. At the end it gives you all the design/look and the accessibility (specially for screen-readers)

And you get all you want at one place.

The question was from designers' point of view, but the actual answer to this is moreover developers' point of view.

# Update:

Also a brief answer of it's power at math.stackexchange - META.

The following gives you what you want, i guess.

You can try it out here. Just paste below code and set size.

fee= Total \ account \ balance \ as \ of \ 12 \ Jan  \ * \ Interest \ rate \ \%  \  *  \frac{\text{Days in current month}}{\text{Full length of service in days}}


• MathJax to render MathML is an absolutely great way to achieve this goal. I run an educational site with some math courses and all examples/quizzes are stored as MathML and rendered with MathJax. It allows you to store plain text in the page/database, yet render proper formulae. – ventaur Aug 20 '16 at 16:39
• @ventaur, Yes it's really great! – divy3993 Aug 22 '16 at 4:50
• This is good for algebraic formulas, but I'm not convinced it's clear to everyone, especially in my situation where it's pure text that I'm displaying (i.e. the 'translated' (normalised?) version, no Greek characters etc). Does it work for such purposes? – JonW Aug 22 '16 at 12:52
• @JonW, Indeed it is possible, check the update. – divy3993 Aug 23 '16 at 8:02
• I'm awarding this the bounty as it's the most thorough and researched answer, and it shows that MathML / MathJax does provide the 'normalised' syntax and is accessible. The only drawback is that it's not native to browsers, but does seem lightweight enough to be integrated when necessary. – JonW Aug 26 '16 at 8:38

I would recommend displaying your formula similar to the concept below. Each section (ex: "Fee") would be contained within its own <div> or <span>. Operator symbols would also be within their own html element. This will allow for a lot of flexibility in styling, while allowing the text of the formula to be selectable/searchable within your page.

High Level Technical Details

Let's say you have this exact string stored in your database that represents one formula:

Fee = 'Total account balance as of 12 Jan' * 'Interest rate %' * ('Days in the current month' / 'Full length of service in days')


Your development team should be able to create a utility that parses the string formula, breaks it up logically (parenthesis create nested objects grouped together), and converts it into a JSON object that can be consumed by the UI for rendering. Below is an example of what I mean; the exact structure may need to be tweaked a bit though.

(For the sake of proving the concept you can actually skip the development for now, and manually convert some of your formulas for testing.)

formula = [
{
text: 'Fee',
operator: '='
},
{
text: 'Total account balance as of 12 Jan',
operator: '*'
},
{
text: 'Interest rate %',
operator: '*'
},
{
text: '',
operator: '',
group:
[
{
text: 'Days in the current month',
operator: '/'
},
{
text: 'Full length of service in days',
operator: ''
}
]
}
]


Once you have a data object structure to work with you can render it dynamically in the UI by iterating over each object within the formula array (Angular would be good for this, but there are plenty of other templating options; the exact tool isn't important).

Additionally, as part of the rendering process, you could include the original formula string in an alt tag to maintain usability.

• I quite like this approach. My concern with other suggestions is that they require serving up two versions of the information (a sighted and a non-sighted version) whereas your suggestion just keeps with one single approach. – JonW Aug 22 '16 at 12:57
• I wanted to expand on the flexibility of styling, from my original answer. The first, and most obvious, example that came to mind was the horizontal left-to-right representation. This may not necessarily work in all scenarios, because longer formulas could force horizontal scrolling. At least with this implementation, you can rely entirely upon CSS to handle the visual styling. You could explore vertical versions, mobile versions, or something else entirely. – Ben Harrison Aug 22 '16 at 13:37

You should use a long description or preferrably MathML.

http://accessibility.psu.edu/math/

• I would say that using some form of markup / LaTeX is that for the lay-person it is more confusing than the image. The type of formula I am needing to display is already translated equation (i.e. written in English, not as a strict mathematical equation). This markup would work well for a more scientific / mathematic site, but not so much for a site that isn't aimed at experts. – JonW Jun 25 '16 at 15:02
• @JonW what i found interesting with mathml is how It's read out. This is an interesting resource for accessibility as it does a better job giving more of the what and why of the user. webaim.org/techniques/alttext. I'm wondering if these two rules would apply to you. "Alternative text should: presents the CONTENT and FUNCTION of the image. be succinct. Alternative text should not: be redundant (be the same as adjacent or body text). use the phrases "image of…" or "graphic of…". – Nicole Green Jun 25 '16 at 16:31

Update: Ben Harrison and divy3993 have contributed answers I think are better than mine for this math-specific context.

Use additional text that is normally hidden and/or audio.

Solution 1: Implement a screen reader-only class

Bootstrap suggests using "additional text hidden with [a screen reader]-only class". This text is not an alt text, thus you don't break the specification. Bootstrap corrobates: "There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute".

Solution 2: Audio

Rationale: Captchas (whether you can stand them or not) have a similar accessibility problem, as they must also "translate [a] pure-text image into something (...) understandable to look at, while being accessible at the same time". If you look at Wikipedia's Captcha accessbility paragraph it basically describes your problem.

As Wikipedia mentions, audio Captchas are a popular workaround. The article states that this is only a partly successful solution for Captchas, in part because they intentionally scramble the image. Since you won't to that, your overall implementation should achieve better usability, especially if you also follow Bootstrap's advice.

• Audio is an interesting idea, but that does mean you have one version for some people (sighted) and another for others (non-sighted). What about people who still use text but need to adjust the fontsize to see it? Or have other visual impairments that text-as-an-image isn't suitable for? – JonW Aug 22 '16 at 12:55
• @JonW I'm not sure who you refer to as having "other visual impairments". You want to cover the blind and those who use strong reading glasses. I'm assuming you don't think of cataract or color blindness. Can you elaborate? – bjornte Aug 22 '16 at 19:08
• There are many visual impairments. Cataracts, colour blindness, tunnel vision, diabetes... Most blind people still have some vision to a degree. They may not wish to use a screen reader when they can just adjust the browser settings to help them. But that's not possible for image text. – JonW Aug 22 '16 at 22:17
• @JonW I'm not sure what you mean by "that's not possible for image text". All of the browsers I have (Firefox, Chrome, Safari, Edge, IE) scale images as well as text (Ctrl + on Windows). – bjornte Aug 23 '16 at 9:21
• Because you can't change to a font / font colour that you can read better. You can't increase the font size (zooming in on an image doesn't maintain the same resolution integrity). It's a core accessibility principle - don't represent text as an image unless it's necessary (such as a logo). – JonW Aug 23 '16 at 9:27

         Total account                               Days in the current month
Fee =       balance      x   Interest rate %   x   ------------------------------
as of 12 Jan                              Full length of service in days


Or if you don't want to break up the "terms" over multiple lines, put each part, including the operators in separate text bits and use block to align them?

• I'm not sure how a screenreader would interpret this though. – JonW Jun 23 '16 at 15:02
• Me neither. Don't have one. Expect that the pure monospaced font idea would read the lines as is. Ie "Total account Days in the current month". If you could use css to hack the layout together then you could at least keep the parts of the formula in their correct order, perhaps even adding parenthesis to keep the division part together. – Marjan Venema Jun 23 '16 at 18:31

If it is an image then you should use the alt text to describe the formula in text form. If you need more space to describe your formula then you can use the longdesc attribute, which won't be displayed to your sighted users. However using images will certainly cause your users issues.

So you should convert the image into a mathematical formula and you should learn MathML

MathML was created by the W3C and is just a series of tags and attributes that you add to your html and it is in its 3rd release so is pretty much robust. It was created by the W3C explicitly for making equations work in accessible technologies and it is relatively easy to learn.

In order for screen readers to correctly read math information, that information must be composed in MathML. Otherwise, graphics of math equations will not be accessible to screen readers or text readers.