Transparente Grafiken im neuen dark mode und Problem mit Apple Safari Browser
bearbeitet von
Salü Gunnar
Ich habe das mit `title` mal in meinem Test ausprobiert.
[https://www.macsimum.ch/SELFHTML/Test_SVG_transparent_img_object.html](https://www.macsimum.ch/SELFHTML/Test_SVG_transparent_img_object.html)
Dafür steht oben im per `object` eingebundenen SVG jetzt:
~~~
<svg id="Schema_Neue_Responsivitaet" role="img" aria-labelledby="svgtitel" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 910 610">
<title id="svgtitel">Schemazeichnung zur Veranschaulichung der neuen Responsivität</title>
~~~
Also:
- Für mehr Barrierefreiheit von SVG's kann `role="img"` ergänzt werden.
- Für Screenreader muss man 2 Dinge machen und verknüpfen:
- `<title id="svgtitel">Schemazeichnung …</title>` ergänzen
- und dann oben über diese ID verknüpfen mit `aria-labelledby="svgtitel"`
Damit liest mindestens der Screenreader vom iPhone (analog zum `alt` Attribut bei `img`) nur noch den Titel vor: "Schemazeichnung zur Veranschaulichung der neuen Responsivität".