23
\$\begingroup\$

Tables are really rough on screenreaders and other consumers of web accessibility features. Getting them right is an art, one I have practiced a bit professionally, though I remain a novice. The overwhelming majority of options available to web designers to improve accessibility with respect to tables are not available to us here.

In practice, we have three options to produce a table: a codebox, MathJax, or the new Markdown table syntax.

The codebox is clearly bad. Semantically, that will be understood as code, and screenreaders will attempt to make it intelligible as such. It can be nearly unusable, depending on the user’s settings.

The MathJax and Markdown options are less clear to me.

Internally, Markdown tables are actual tables, with <table> tags. MathJax, on the other hand, uses a <math> block, which includes an <mtable> that winds up being very similar to the <table> produced by Markdown. The <math> block is XML, and the spec for it is properly specified within the block with an xmlns attribute. That means any tool that knows how to parse XML and their specs should know how to read it.

Recently, one of my answers was converted from MathJax to Markdown with an edit reason claiming that Markdown is superior for accessibility. I rejected this change as not offering any improvement, because I like the look of MathJax better and as far as I know, Markdown doesn’t offer any improvement in accessibility. MathJax goes to considerable efforts to “back” its rendered output with actual text (the aforementioned <math> block), to ensure that screenreaders can still understand it (and things like copy-and-paste still work). However, I am far from an expert on this subject, so I would appreciate it if anyone who is can shed some light on best practices here. When Markdown tables were first unveiled, I’d entertained thoughts of going through my MathJax tables and converting them, but generally found the result less visually appealing and so never bothered. If there is a substantially accessibility improvement, that might change.

For reference, here are two versions of the same table using Markdown and MathJax:

Character Level Weapon Level Weapon Effect
1st – 2nd 1st “+0” adaptive war bow
3rd – 4th 2nd +1 adaptive war bow
5th – 6th 3rd Activation ring spell storing, minor
7th – 8th 4th Enhance arrows
9th – 10th 5th Minor displacement (as blur)
11th – 12th 6th +1 adaptive distance* war bow
13th – 14th 7th Activation ring spell storing
15th – 16th 8th Plane shift,** 3/day
17th – 18th 9th Imbue arrow
19th – 20th 10th Activation ring spell storing, major

\begin{array}{c c l} \textbf{Character Level} & \textbf{Weapon Level} & \textbf{Weapon Effect} \\ \hline 1^\text{st}-2^\text{nd} & 1^\text{st} & \textit{“+0” adaptive war bow} \\ 3^\text{rd}-4^\text{th} & 2^\text{nd} & \textit{+1 adaptive war bow} \\ 5^\text{th}-6^\text{th} & 3^\text{rd} & \text{Activation ring }\textit{spell storing, minor} \\ 7^\text{th}-8^\text{th} & 4^\text{th} & \text{Enhance arrows} \\ 9^\text{th}-10^\text{th} & 5^\text{th} & \text{Minor displacement (as }\textit{blur}\text{)} \\ 11^\text{th}-12^\text{th} & 6^\text{th} & \textit{+1 adaptive distance* war bow} \\ 13^\text{th}-14^\text{th} & 7^\text{th} & \text{Activation ring }\textit{spell storing, regular} \\ 15^\text{th}-16^\text{th} & 8^\text{th} & \textit{Plane shift}\text{,** 3/day} \\ 17^\text{th}-18^\text{th} & 9^\text{th} & \text{Imbue arrow} \\ 19^\text{th}-20^\text{th} & 10^\text{th} & \text{Activation ring }\textit{spell storing, major} \\ \end{array}

This particular table looks fine in Markdown, but some of my larger tables would require a certain amount of visual compromise to work in Markdown, as it doesn’t support as many formatting options. And others—such as these—that mimic a grid, those can’t be handled by Markdown tables at all.

\$\endgroup\$
0

3 Answers 3

28
\$\begingroup\$

Realized I could do some experimentation of my own here: at least with the Non-Visual Digital Access (NVDA) screen reader (which is free, and therefore quite popular as I understand things—it’s also what I use at work to test accessibility), Markdown tables are read quite nicely: when you reach a given cell, it tells you the header for the column of that cell, as well as what the value in that cell is. That allows you to keep track of what each piece of information is.

With MathJax, on the other hand, it just reads “math” when you get to the table, and that’s it, moving on to the next paragraph after. Furthermore, though there are plugins that claim to support MathML, none of them work all that well for me—the best result was one that spat out the entire table at once, with zero ability to navigate inside it.

That being the case, at least for NVDA—which again, is pretty popular—Markdown not only has an accessibility advantage, but the difference is massive. I’m used to accessibility results being fairly subtle, at least when an effort is made at all, but this is so blatant that even I can get it. I’ll certainly be reconsidering my use of MathJax tables in light of this.

\$\endgroup\$
8
  • \$\begingroup\$ How different is the syntax required for a user familiar with MathJax to make the switch to Markdown? \$\endgroup\$ Jan 25, 2021 at 21:01
  • \$\begingroup\$ @RevenantBacon It's pretty different. \$\endgroup\$ Jan 25, 2021 at 21:05
  • 5
    \$\begingroup\$ @RevenantBacon The markdown table syntax is fairly straight forward, it easier and you can use markdown formatting. \$\endgroup\$
    – Someone_Evil Mod
    Jan 25, 2021 at 21:07
  • 5
    \$\begingroup\$ @RevenantBacon Very different from MathJax, but quite simple. The problem is that a lot of formatting options simply don’t exist. Judgment calls have to be made about performing the conversion. \$\endgroup\$
    – KRyan
    Jan 25, 2021 at 21:19
  • 5
    \$\begingroup\$ To confirm: I use NVDA, and can verify that it reads Markdown tables wonderfully. It cannot parse MathJax tables at all. \$\endgroup\$
    – Sciborg
    Jan 26, 2021 at 1:51
  • \$\begingroup\$ @Sciborg Glad to have the confirmation; I’m always afraid whenever I turn on NVDA that I’m not using it right and misunderstanding what it’s doing. I have begun the process of converting my tables, though it’s a lot of them and I don’t want to flood the front page with it so I’m giving it a rest at the moment. \$\endgroup\$
    – KRyan
    Jan 26, 2021 at 2:19
  • \$\begingroup\$ How does NVDA read code blocks, like the one here: rpg.stackexchange.com/a/198142/2788 \$\endgroup\$ May 5, 2022 at 11:24
  • 1
    \$\begingroup\$ @AncientSwordRage I believe there are different settings for that, but default is just reading that as a paragraph. It certainly isn’t capable of recognizing it as a table based on the spacing. That makes it nearly useless for such an approach. We definitely should not continue to use such “tables” now that we have a proper answer. \$\endgroup\$
    – KRyan
    May 5, 2022 at 12:02
2
\$\begingroup\$

iOS Safari reader view

Markdown:

enter image description here

MathJax:

enter image description here

On the iOS Safari, the MathJax table does not automatically scale with screen width(though you can scroll on it), but Markdown does. Markdown just looks better here (to me at least).

\$\endgroup\$
1
  • 4
    \$\begingroup\$ To be honest with you, I rather prefer the MathJax scrolling. Those extremely-narrow cells are really hard to read. \$\endgroup\$
    – KRyan
    Jan 26, 2021 at 0:30
-3
\$\begingroup\$

No, they are not superior.

MathJax tables are easier to read for my old eyes. Too thin numbers. And those excessively long cells make reading harder than it has to be.enter image description here

\$\endgroup\$
5
  • 1
    \$\begingroup\$ We can at least improve the numbers by using mathjax markup inside the table where it's helpful. I've done that recently. The font size will still be smaller though. \$\endgroup\$ Apr 20, 2022 at 21:15
  • 3
    \$\begingroup\$ @doppelgreener Are you sure that doesn’t defeat the purpose of using a markdown table? I thought the trouble was that some devices aren’t able to read the MathJax at all. \$\endgroup\$ Apr 20, 2022 at 21:29
  • \$\begingroup\$ Can you read comments OK? They seem to be the same size as the text in tables (13px) while regular text in a post is 15px. \$\endgroup\$
    – Laurel
    Apr 20, 2022 at 22:01
  • 4
    \$\begingroup\$ @ThomasMarkov You're right, as it turns out; the numbers don't render. They're just more legible for visual users. \$\endgroup\$ Apr 20, 2022 at 23:19
  • 2
    \$\begingroup\$ I will note however: poor eyesight including that caused by older age still falls under accessibility, it's why we have guidelines contrast ratios and font size. (But we should find ways to cater to all comers also.) \$\endgroup\$ Apr 22, 2022 at 0:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .