Accessible SVG's

Kirby 3 Questions 🤔
1

Hello,

For a client I’m making a logo bar with SVG logo’s.
As the logo’s should change color based on the css class of their parent I’m using the SVG helper to create the inline SVG code:

                <?= svg($logo)?>

Is there a way to make these SVG’s accessible by adding for example the ‘role’ and ‘aria-labelledby’ attribute in the code??

2

Hello and welcome :slight_smile:

the svg helper doesn’t actually do any interpretation of the passed file, you can think of it more like a helper in simply finding the file: you can pass it a File object, a site relative path or an absolute one.

Once it finds the file, it simply returns its content, without any parsing.
Like, it also doesn’t remove an eventual XML declaration (<?xml version="1.0" encoding="UTF-8" ?>) which would be ignored when embedded in HTML.

If you need the SVG to be accessible, I think the easiest would be to start with an accessible SVG. Otherwise you’d have to do the parsing yourself, which might not be so trivial:

<?php
$el = new SimpleXMLElement(svg($logo));
$el['role'] = 'img';
$el['aria-labelledby'] = 'element-id';
echo explode("\n", $file->asXML(), 2)[1];
?>
1 Like