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.
