Transparente Grafiken im neuen dark mode und Problem mit Apple Safari Browser

[Bertie]

Salü Gunnar

Ich habe das mit title mal in meinem Test ausprobiert. 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".

Und Du hast recht: Das erscheint als Tootltip beim drüber hovern, würde mich nicht stören.