WCAG Compliance Issue With X Theme's Canvas Element

[comstarsupport]

We are working to bring our site up to WCAG AA standards for accessibility and have run into an issue we don’t know how to address. The issue revealed by a scan is: Ensure embedded elements and canvas elements provide a meaningful text equivalent.

The code it references is:

<canvas height="600" width="1920" style="width: 100%; height: 100%; background-color: transparent; opacity: 1; filter: none;"></canvas>

We have not enabled any Off Canvas element, so I’m not sure were to go to add a “meaningful text equivalent”.

[ruenel]

Hello @comstarsupport,

Thanks for writing in!

The canvas code is not from an off-canvas element. It could be coming from one of your custom HTML codes that has been inserted on the page. You may add an ID to the canvas element:

<canvas id="myCanvas" height="600" width="1920" style="width: 100%; height: 100%; background-color: transparent; opacity: 1; filter: none;"></canvas>

For more details, please check this out:

• https://www.w3schools.com/html/html5_canvas.asp

If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[tristup]

Hi Bob,

There are 4 different sources found of the <canvas> element, 1 is from WordPress emoji library, and 3 are from Slider Revolution plugin. For emoji, you can follow this https://kinsta.com/knowledgebase/disable-emojis-wordpress/. As for the Slider Revolution, we can only forward it to the plugin developer and there is no guarantee, but I will add this issue to our issue tracker.

WCAG which I believe is for accessibility, but I’m not sure why would it need to make canvas backgrounds accessible when it’s not really possible. Especially, interaction with backgrounds are not possible either. Perhaps the tool doesn’t not or can’t differentiate an actual interactable and background , because <canvas> has many uses.

Thanks