21
\$\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\$
2
  • 2
    \$\begingroup\$ Do you mind if I add the two versions of the table to this question? Should make comparison easier. \$\endgroup\$ – Thomas Markov Jan 25 at 21:13
  • 1
    \$\begingroup\$ @ThomasMarkov I do not. \$\endgroup\$ – KRyan Jan 25 at 21:19
24
\$\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\$
6
  • \$\begingroup\$ How different is the syntax required for a user familiar with MathJax to make the switch to Markdown? \$\endgroup\$ – RevanantBacon Jan 25 at 21:01
  • \$\begingroup\$ @RevenantBacon It's pretty different. \$\endgroup\$ – Thomas Markov Jan 25 at 21:05
  • 4
    \$\begingroup\$ @RevenantBacon The markdown table syntax is fairly straight forward, it easier and you can use markdown formatting. \$\endgroup\$ – Someone_Evil Jan 25 at 21:07
  • 4
    \$\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 at 21:19
  • 3
    \$\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 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 at 2:19
1
\$\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
  • 3
    \$\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 at 0:30

You must log in to answer this question.

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