Being documentation for my charting software, I have a lot of pages on my website that have SVG and/or canvas tags on them.
I recently learned from a Google video that during indexing, the JavaScript on the page isn't run immediately and can take several days to be rendered.
So given this, could the fact that a lot of my pages have JavaScript-dependent charts on them be holding my site back in terms of rankings?
The svg and canvas tags will basically just be seen as images or graphic elements, which generally only have an alt="" for SEO.
However, there are changes being made. These are coming from a friend of google, the people who want more accessibility; Google has not promoted this kind of content yet, as they have done for mobile devices but ... The Google bot is basically a screen reader.
SVG works with CSS and we now have @prefers-color-scheme and @prefers-reduced-motion ... Basically the @prefers-color-scheme, when set by the user would be a dark theme or a light theme. This setting is for people with limited vision.
An SVG can be placed on the page with an image tag, which has had the alt="words" for a long time. Aria has added a role, class, aria-label.
<img
role="img"
class="fox"
aria-label="What does the fox say?"
src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">
For SVG and canvas the role="img" is specifically helpful when they ask to see all of the images. Both can also use the alt or aria-label attributes.
Specific to text in SVG, it is readable and there is a visual-hidden property so that it will only be read - as reading menu on a hamburger menu icon is helpful, otherwise none-viewers only know its a button.
<svg role="img" alt="Fox Speaking">
<text class="visually-hidden" font-size="0">What does the fox say?</text>
[design code]
</svg>
We also have a title within an SVG.
<svg role="img" aria-describedby="myimage" ...>
<title id="myimage">These words are what the image is about.</title>
<text class="visually-hidden" font-size="0">This is the description of the image</text>
[design code]
</svg>
or alternative coding ... for those like me that don't feel good about a font-size="0"
<svg role="img" aria-describedby="fox12 description12" ...>
<title id="fox12">What does the fox say?</title>
<desc id="description12">Will we ever know?</desc>
[design code]
</svg>
Currently, the SVG is the winner regarding coding readability and readability based SEO. Just try one of the aria-compliant screen readers and listen to your page. Or try using the tab key to manually go through the links without a mouse device.
But be advised, you may discover you have places, maybe drop-down menus that are not properly reading ... Content that does not follow in a logical manner ... we can do better.
role="img" exists to put tags that are not img tags into the list of images so that the visitor can press the correct button on his device and get the list of all images.
So a role="img" alt="words" can be used with a canvas element.
Canvas as of today has no caption system like is available for video, that can read what is being animated in the canvas element. Don't know when that could change.
One can use the alt attribute on the canvas. As well as the aria-describedby="myimage" pointing to either an element with a "visually-hidden" style ...
(again I don't like the font-size 0 ... if the browser can not understand visually-hidden then I don't want to force it not to be seen, but a visually-hidden on a tag within the canvas element pointed to by the canvas aria-describedby makes sense to me. But it is not a suggested pattern by aria, so maybe wait for aria to decide how they want to address canvas tags?)
... or an element that is also shown to people who can see the context around the canvas image.
