Aria Tags for "SVG-Icons"

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.

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

Tanks for helping me 🌻
Jenny

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.

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

Hi there,

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

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

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