Web Graphics Library (WebGL) is now starting to be a teenager in terms of human age – it is namely 10 years old (opens in new window). This basically mean that we are able to make two and three dimensional interactive graphics within any compatible web browser without the need for some special software or plugins and so on.
WebGL support in 2021 is amazing (opens in new window) and currently it’s supported in latest versions of all major browsers besides Opera Mini. This is not a guarantee that it will work on your device but chances are that it will.
Basics for 3D in web is WebGL
WebGL is the foundation of interactive 3D on the web. You can make 3D directly in document object model (DOM) with help of some CSS, you can make 3D with “normal” JavaScript, you can also “make” 3D with SVG but if you want to make it more advanced and performance powered by computers graphical processing unit (GPU), then you should probably reach to the application programming interface (API) called WebGL.
WebGL basically allows you to draw 3D inside HTML canvas element. Canvas in itself is used to render pixels on the screen, and this means that they are not vectors and responsive or scalable but just like for example JPEG or PNG are.
Canvas element itself does not support a lot of accessibility, what are our options then?
So our 3D graphics is made with help of JavaScript and WebGL and shown inside canvas HTML element.
Canvas is not accessible on it’s own- as it is only a image of pixels. All we can do for the canvas element to become more accessible is to use ARIA and add a role and a label and maybe some other basic accessibility, but we can not do much with pixels inside canvas.
We can add accessibility to elements inside canvas though – called internal fallback content (content has to be wrapped with canvas within opening and closing tags). Canvas content itself is not a part of DOM (and therefore also not present in accessibility object model (AOM)), but the fallback content is. This behaviour is overrode if we set a role on the canvas element though. So we can not have both.
Another option is to have a sibling section that reflects the canvas elements in a more semantic way – if we have for example buttons drawn in canvas we mirror them in the sibling section that is visually hidden but accessible to screen-readers. That must be tested vigorously and we have to mirror everything exactly to ensure universal accessibility.
We can duplicate interactive elements from canvas to sibling DOM or in canvas fail-over markup
If three dimensional user interface is simple enough that is. I can not imagine a very complex game that is duplicated to DOM in every aspect. This would be too difficult, especially if game depends on quick and timed user actions. It would work for some people but most definitely not for all.
But there is a possibility to describe 3D interface in a single dimension – like a screen-reader actually is. If we plan for it from the beginning, then it’s much easier. If we need to convert a complex 3D user interface to 1D then it can get impossible quite soon. So key is again in the way of thinking and respecting our limitations.
Some experimented with spacial acoustics
It has crossed my mind that that would be a potential solution for screen-reader users that can hear, but that alone would still potentially exclude people that can’t see and can’t hear, so I am strongly convinced that spacial acoustics alone can not be enough. We would still have to think into reflecting 3D space into 1D space to support braille displays for example.
Conclusion – no conclusion
As often – it depends – and it depends a lot. It is in theory possible if the interfaces can be translated to single dimension though. So without speculation we can maybe conclude that we can not conclude. One possible solution would be three-dimensional hardware solutions that would mimic the canvas element but there are still multiple other groups of people that needs consideration. So it is really two-sided problem – the translation of three-dimensional interfaces to single-dimensional and the limitations of the current hardware interfaces that can replace displays to offer interaction with touch and sound for example.
A lot can be tested but it is difficult to cover all needs, so maybe we can start with simplicity and single dimensional alternatives in mind when we try to make three dimensional user interfaces accessible.
