[Support request] Aria Tags for “SVG-Icons”

[Jenny]

Hello 🙂

do anybody know: how I can give some readable aria-Tags to .svg´s [I used headlines without Text].
At the Moment my pagereader just read the “headline-tag”.
https://ibb.co/87RDsTw

Can you help me? 🌻
Thanks a lot, Jenny

[Fernando]

Hi Jenny,

Yes, we can help you.

To clarify, which specific SVG images are you trying to add an aria- attribute to? The shared screenshot seems to not be working.

[Jenny]

Thank you Fernando :).
I loaded the Screenshot up:
https://ibb.co/S7Rx2d5

Tanks for helping me 🌻
Jenny

[Fernando]

I see.

If you have GB Pro, you can add a custom attribute through the Advanced section of the Block settings. Reference: https://docs.generateblocks.com/article/custom-attributes/

Otherwise, you’ll need a custom code.

[Jenny]

Dear Fernando,

I tried it out – and I also tried different ways
to use this, but It seems: I make a mistake :).

Can we make an working Example together?

> What should I put in the Field: Data Attributes?
aria-* ? Or
Aria- and a word instead of the *?

> What should I put in the Field:
Value?

The word the screenreader should read?

Thanks a lot 🙂
Jenny

[David]

Hi there,

which svg icons are you wanting to add the aria too ?

[Jenny]

On this one for example
https://ibb.co/gtfG9mb

[David]

You would need to edit the SVG codes to do that, BUT instead of adding an aria-label you can include a <title> element inside your SVG code.

For example, this is the opening part of the SVG code:

<svg xml:space="preserve" style="enable-background:new 0 0 1349.6 371.8;" viewBox="0 0 1349.6 371.8" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Ebene_1" version="1.1">

Immediately after its closing > you can add:

<title>your SVG title</title>

This title will be read Assistive Technologies

[Author]

Posts