Acessibility issues

[SamantazFox]

I know that you guys invested a lot of efforts in the design and making of Runbox v7, but I'm sorry to say that the acessibility is vetry problematic.

The major problem comes from the <canvas> HTML element that you're using for the mails list. Canvases are made to display graphs and charts, i.e bitmap objects that do not carry information on their content. This means that acessibility tools (like JAWS) won't be able to access the canvas' content, and the emails can't be reached by using tab, space and other navigation keys.

The Mozilla Developper Network page of the <canvas> element actually recommends against its use in acessible websites and apps:

The element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app.

Another issue of canvases is that they don't respect the color scheme of the browser (in the case of a high contrast theme, as shown below), nor the other browser styles, like the font size:

---

There is a problem too with the folders list on the left, and the "compose", "draft" and "v7 buttons. They cannot be accedd via navigation keys either

So can you please take this into account in Runbox v7? Thanks!

[tadzik]

Hey @SamantazFox, thanks for your feedback – this is very good to know, and hard to notice if you're not affected by it. We could (and should) indeed do better with this.

The canvas is indeed the highly problematic bit, and although it is currently a critical component when it comes to performance with big mailboxes, it is, like you mentioned, an accessibility nightmare, and we'll have to come up with a fallback if we can't find a viable alternative to it. Thank you for bringing it up.

Could you share the browser settings you're using on the screenshot you posted? Having buttons clearly outlined would make it easier to spot places when they're not using good enough semantic HTML, like the compose, drafts and menubuttons you mentioned.

[SamantazFox]

Could you share the browser settings you're using on the screenshot you posted?

Yes, sure, here they are. It's on Firefox 82.0.3 (64-bit), in the about:preferences page:

And then, you can either:

• always force custom colors (within firefox)
• force custom colors if the system has a high contrast theme (still within FF)
• Use the system theme's colors (be a high contrast one or not)

---

In my case, I used the first option (i.e: force custom colors) to simulate a high contrast theme:

I'll have to find and try with a real high contrast theme, but the result is expected to be similar, if not the same.

---

NB: those options are made to force colors, in case the websites do not already provide a high contrast theme. The website can provide an alternate style sheet (MDN) using the rel="stylesheet alternate" attribute on the <link> HTML element, like so:

<!-- Standard stylesheet(s) -->
<link rel="stylesheet" type="text/css" href="/static/style.css">
<!-- Alternate stylesheet(s) -->
<link rel="stylesheet alternate" type="text/css" href="/static/highcontrast.css" title="High Contrast">

This way, the user can choose which style they prefer on this page. On firefox, this happens in the "View > Page Style" menu (in the menu bar at the top of the window, that can be shown by pressing "'alt").

[gtandersen]

See also #36, #863.