# Logical symbols and accessibility

I’m working on an open textbook that has logical notation/logical symbols in it, and I’m wondering if anyone knows the best practice for putting these symbols in for accessibility purposes. Is something like LaTeX into MathJax better than, say, using keyboard shortcuts or the option in word processers to “insert-symbol” to render the symbols (which is what I think has been done)? Which is better for screen readers?

Any help is appreciated!

Perhaps @jgray, @greeark, or @jmitchell have some suggestions, or can help pass along the question to those who can help? @rzach, @athomasb — do you have a particular recommendations based on the work done on your adaptation of forall x?

I don’t have first had experience but from what I gather, screen readers will often not read Unicode characters or mis-read them. I think it’s best to put formulas including logic into MathML. I believe MathJax can do that; but check out MathType https://webaccess.msu.edu/Tutorials/mathtype.html and this page: http://www.dessci.com/en/solutions/access/

2 Likes

Thanks Richard! There’s also been some good suggestions over on Twitter from @swagstaff and @baldur , so I’m dropping in a link here to the Twitter thread.

@christina.hendricks, let us know if this helps!

Thank you, @rzach and @apurva! It seems like LaTeX or Math ML with MathJax on Pressbooks may be the best option. Now to see if I can find someone who can do that (I have been resisting learning LaTeX so far because of the learning curve, but I may have to dedicate some time to doing so myself!).

Looks like it. Let us know if you want us to amplify your call!

While LaTeX does appear to have a learning curve, I might suggest looking online for some cheat sheets/quick guides. They may contain enough information for you to format and input what you need to, without doing a full deep dive into the language (which can be useful if you’re pressed for time as there’s so much to learn).

1 Like

Thanks, @apurva Apurva. I got some help and determined it’s quite easy to write the logical symbols in LaTeX. I did one as an example and now am running into a different issue.

On one browser (Firefox), the way the symbols render in the web format is very small compared to the way they were before. One can make them larger by clicking on it and it opens in a bigger window, but otherwise it’s quite small in the webbook. Using “increase font size” helps a bit, but it’s still significantly smaller than the rest of the text. Here is the example, with the formula rendered through LaTeX on the top and through the usual unicode symbols on the bottom (plus see the formulas in the text excerpt too, which are in much smaller font than the rest of the text):

I tested on Firefox, Safari and Chrome, and things look fine on the last two but on Firefox I get the smaller text for the LaTeX as in the image above.

Any ideas on why that might be the case? If it’s something to do with Firefox that we can’t fix maybe we can put a note about that somewhere in the book, for example!

@christina.hendricks would you be able to share a link to live example? It might be that MathJax is not configured correctly or that the page’s CSS is interfering.

Glad to hear it. You’ll need to give us all tips

Regarding the size of the symbols in Firefox, I second Peter’s request! Could you share a link to the chapter where you’re testing so we can see what might be happening?

The book is currently set to “private” just because it’s still quite rough around the edges, but I’m opening it up temporarily!

Here is chapter 5 of the Logic book, which is where the screen shot is from.

Thank you, @pkra and @apurva!

1 Like

I’m afraid I cannot reproduce the issue though. Here’s a screenshot of what I’m seeing (Firefox 72, linux)

There’s an expected difference due to different fonts being used but not a difference as in your screencapture (if anything, I think the MathJax rendering in the first D1 is better than in the second one – but I’m biased since I used to work for MathJax ).

So I’m flummoxed. I’m wondering if you accidentally triggered MathJax’s custom scaling feature. This can be done in the MathJax user settings by right/cmd-clicking on an equation and then in the MathJax menu selecting “Math Settings” => “Scale All Math” – alternatively, you can clear the cookie MathJax sets for such customizations (if that’s easier for you).

FYI if you want to get an idea as to how accessible your content becomes, you can switch on the Explorer in the Accessibility submenu, followed by activating the subtitle feature; you explore by focusing on an expression (click or tabbing to it) and hitting shift+enter to activate keyboard (arrow-key) exploration.

PS Here’s an old demonstration I recorded when these exploration features were initially implemented https://www.youtube.com/watch?v=6GSgTjorewQ

I’ve actually been able to replicate this issue myself, I’m afraid, as has @zoe. I’m also running Firefox 72.0.1 but on Mac OS. I downloaded the STIX fonts on my system, but that made no change.

I can unbiasedly agree.

@christina.hendricks, I can try to reach out to the Pressbooks team to see if they have any solutions to offer (perhaps setting the minimum scale of the equations to a certain baseline). Let me know if you’d like me to do so!

Hi @pkra and @apurva: I’m running Firefox 72.0.1 on Mac OS as well. Maybe it’s a Mac thing then.

Sure, if you could reach out to the Pressbooks team, Apurva, that would be great.

And for both of you, I have another LaTeX/MathJax question! In the Logic book we are trying to do diagrams like the following screen shots:

My partner was going to make these in LaTeX but then said they wouldn’t render in MathJax (I think he is using TikZ). Is there a way to make diagrams in LaTeX and have them render correctly in MathJax?

Alternatively, I will just make picture files and embed them as images with alternative text for accessibility purposes.

Thank you!

@apurva @christina.hendricks thanks for the details – I can reproduce it on MacOS as well.

Though I’m surprised it only shows up with Firefox on MacOS, I’ve confirmed that it is a known, rather subtle issue discussed at https://groups.google.com/d/msg/mathjax-users/v3W-daBz87k/xjxFFdfQBQAJ: the surrounding webfont (Crimson Text) has bad metadata which trips up MathJax.

To explain, MathJax tries to match its output to the surrounding context, in particular by alignign not just font-size but ex-heights. Crimson Text seems to be one of many Google Fons that has bad metadata regarding its ex-height, causing MathJax’s measuring logic to get it wrong.

You can test this by temporarily disabling Crimson Text which fixes it for me.

It might be that FIrefox considers this a bug or that Pressbooks is willing to (let you) disable font-matching (as described in the MathJax User Group link).

Regarding diagrams, MathJax includes support for the amsCD package http://docs.mathjax.org/en/v2.7-latest/tex.html#amscd but that’s a bit limited and diagonal arrows are difficult.

I’d personally say that those kinds of diagrams don’t fall into the “equation” bucket (which MathJax focuses on) so rendering them in SVG is more appropriate.

You can still make them accessible either in themselves (e.g., using a title/description tags) or by using aria-labelledby/aria-describedby to point to a part of the page that labels/describes the diagram. (And if you want to go all out, there are more complex ARIA techniques if you want to make them “explorable” but those won’t work in epub or kindle formats so it’s likely not worth the trouble.)

1 Like

Thank you so much, Peter, for figuring this out and letting us know! The issue makes a lot of sense, and too bad a number of google fonts have bad metadata.

@Apurva, do you have any thoughts on next steps? We could just put this in the text as a known issue, or change the font (which would mean changing the whole theme for the books, which is not ideal), or see if we can disable font-matching.

Thank you, Peter, for explaining how and why the diagrams are probably better as image files. I haven’t worked with svg though, only jpeg or png (which is what the images are in the Ethics book in the series (mostly photos of philosophers). Okay to use one of those, or should I look into how to create it as svg?

I think I may just go with the alternative text for the image (title/description), which I already know how to do.

Well, I’m coming up against another question. As I’m using LaTeX for the logical symbols in the Logic book, I am finding that if the text is in italics, it won’t translate into a symbol.

For example, I’m trying to do the following, where the A’s and B’s in the LaTeX are in italics:

• If we translate “Alex is a rose” by B , we translate “Alex is not a rose” as “$\neg B$.”
• Another is a symbol ($\rightarrow$) for conditional sentences of the form “if … then ….”. For example, we can translate “If Alex is a rose, then I would love to smell it” as “$B \rightarrow A$.”

This all renders fine if the A’s and B’s are not italicized–the symbols show up correctly with the A’s and B’s in the code. But in most of the chapters of this book the letters standing for statements are italicized…that’s the usual standard in logic books I believe. When they are italicized then what renders as output is just the above, with the $codes. (I’ve also re-tried with the dollar sign syntax instead, and it’s the same problem). I could just make the A’s and B’s normal text (I’d have to talk to the book editor about whether that would be acceptable), or I could just make the symbols in LaTeX and leave the letters outside of the [latex] parameters. But then you don’t get the full “equation” rendered in MathJax and when you click on it to use the accessibility features like making it bigger, you just get the symbol. So I’d rather be able to include the letters in there as well as the symbols. Is there something about MathJax that doesn’t work well with italics? Or might it be another issue with the font? (Though I tested on Safari and it looks the same there so I don’t think it’s a similar issue as we were facing before.) Thanks so much for troubleshooting Peter. I’ll note that disabling Crimson Text didn’t have any impact for me, but I spotted a setting in the rendering that was forcing font-size to 50%, and setting this to 100% seemed to resolve the issue in my browser. This isn’t a setting that we can control for all readers via the book’s CSS, so I’ve reached out to Pressbooks. For now, I’ve passed along all this information to the Pressbooks team to see if they can implement one of the possible solutions: • disable font-matching (as described in the MathJax User Group) • set a minimum scale for the equations, also described in the user group above • set the MathJax equations font-size to 100% I’ll keep you posted on what they say. As for the diagrams, we might have a few options: 1. It turns out that the QuickLaTeX plugin in Pressbooks supports TikZ graphics and other commands that may not be supported using regular LaTeX (and MathJax). I’ve asked the Pressbooks team whether it’s possible to display and render the diagrams via QuickLaTeX, and the others via MathJax, which is preferred. I’ll let you know what they say, but it would be worth activating the QuickLaTeX plugin and testing whether you’re able to render the diagrams. See instructions in the Pressbooks User Guide. 2. If the diagrams are displayed via QuickLaTeX, we could switch over to this entirely (contingent on whether the diagrams can still be made accessible with QuickLaTeX). 3. Or, we could stick with MathJax to display the equations, and display the diagrams as images with alt-text. If we go this route, I’d suggest using SVG images, as these tend to be better quality for print versions. Finally, with regards to your question about italics, you can use use the command \textit in LaTeX to italicize text. So with your examples, you would enter: • If we translate “Alex is a rose” by B , we translate “Alex is not a rose” as “[latex] \neg \textit{B}$.”
• Another is a symbol ($\rightarrow$) for conditional sentences of the form “if … then ….”. For example, we can translate “If Alex is a rose, then I would love to smell it” as “$\textit{B} \rightarrow \textit{A}$.”

Give that a shot, and let me know how it works. I’ll write back here soon about the diagrams and Firefox issue when I have an update from the Pressbooks support team.

Wonderful, thank you for the update, @apurva! I don’t know enough about QuickLaTeX to have much of an opinion, but I really like the accessibility aspects of MathJax and don’t want to lose that.

I can learn how to make a diagram in svg, using one of the tools here perhaps: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Tools_for_SVG I may try Inkscape. Apparently google docs drawing can save as svg too but I don’t know enough to know whether the quality of that would be just as good as something like Inkscape.

And I will try the italics command for the LaTeX logical notation–thanks for the tip!

I agree! The Pressbooks team has confirmed that we would need to go with only one of QuickLaTeX or MathJax, as they cannot both be active at the same time. So let’s stick with MathJax and use SVGs with alt-text for the diagrams. Inkscape seems like a good option for creating the diagrams.

No problem for the italics tip. I hope it works well!

Regarding the font-size issue of MathJax equations in Firefox — the Pressbooks team has verified @pkra’s diagnosis with the Crimson Text font in the Graham theme (which is what the book is currently on). While they’re looking into a permanent solution for the issue, they’ve suggested we change the book’s theme from Graham to either Clarke, Malala, Jacobs, or McLuhan to temporarily resolve the error. An alternative would be replacing the Crimson Text font in the Graham theme in the web stylesheet to a standard serif font. I’ll let you decide how best to proceed, and will keep you posted if I have an update from Pressbooks about the Graham theme bug.