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

Question

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).

^{download bmml source – Wireframes created with Balsamiq Mockups}

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?

Answer 1

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}}

Answer 2

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.

Answer 3

You should use a long description or preferrably MathML.

Here's more info.

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

Answer 4

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

--- Original answer ---

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.

Answer 5

Use monospaced fonts to your advantage?

         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?

Answer 6

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.

This website even has a tutorial to help you.

Web Browsers and screen readers (like JAWS and NVDA et al) can all read MathML as you can read here.

A number of commonly used screen readers can utilize MathML content when used with the MathPlayer plug-in. For example, the screen readers JAWS, Window-Eyes, and SuperNova and BrowseAloud all support MathML.

So if you want to make your equations work for everyone, in an accessible and visual way, you must use MathML (with CSS), because using images together with textual descriptions are sub par solutions which either:

• Won't work for everybody, or
• Will be impossible to describe in a textual form (depending on the complexity of the equation), or
• Will be very confusing for the user