ARIA and Image Tags for SVG any thoughts?

Just wondering if anybody has a nuggets of wisdom or suggestions regarding ARIA and Img tags with SVGs in F3. I’m wanting to add these to SVGs and wondering whether it is best practice to add them manually in the code of the SVG or whether adding the SVG in to a Container with the ARIA label and Data tag on the Container will be suffice. If the Container approach would be suffice it makes life a little easier as when I have quite a few I can see the labels I have much quicker, modify change at later dates instead of going in to the code each time to inspect to see if I have added them or see what they are, which can be time-consuming. Any thoughts? Thanks - Ben

A container could do it. But I’d think ARIA tag(s) would be better placed on the SVG itself. I can’t add this as a feature of the SVG tool though, as I could only apply the tags to the wrapper around the SVG, due to the way the tool has to work. I take that back I could add it to the SVG tag itself using javascript, but that seems a more heavy handed approach, IMO.

1 Like

Thanks for reply, I get it completely, I wouldn’t have expected it to be able to be added to the code of the SVG through F3 (or Stacks), I have a number of SVG tools in the box and I notice that each have their own way of starting the code off Affinity Designer for instance places a whole load Serif information in the SVG at the start, if it was to be added as a feature to the F3 SVG tool it could likely mess up the SVGs as it would be a case of where to inject it. I’ll take your advice with placing it in the SVG, but if you think a Container could be a workable option I’ll have an experiment with the Container route and run it through some SEO tools for Alt tag in the Container and somebody I know that uses a screen reader for ARIA. I was just wondering if it was known as not a convential method with a Container or not a best practice. Good to know that it is a could option, thanks