Barrierefreiheit - Änderung des devStateIkons bei SVG-IKons

[Elektrolurch]

Hallo,

bin nun Mal auf einen Screenreader angewiesen, der, falls in der Webseite implementiert, auf die alternativen Texte bei Grafiken zurückgreift.
Also löblich:
Bei Ikonen des Typs .png wird von fhem das Tag alt=2..." mit dem Text des state des devices gesetzt, so dass die klickbare Grafik auch eine Audioausgabe produziert.
Nun kann man ja auch SVG-Ikonen für den state benutzen. Ich habe mir da mal eine fhem-Seite im Quelltext angeschaut.

Es wird zwar weiterhin <a mit href= für den Klickbereich verwendet, die SVG-Graphik für das Ikon wird aber komplett als html-Text eingebunden.
ein alt="  " gibt es daher nicht.
Besteht für das image des Ikons nicht ggfs. auch im Falle svg dies per Referenz einzudinden und das Attribut alt="   " zu setzen?
Dann wäre nämlich auch das in diesem Fall ein sprechendes Ikon.
Wenn nicht, zumindest trotzdem das alt=" " mit dem state zusätzlich zu setzen, auch wenn es ein eingebundenes svg ist?


Elektrolurch

[rudolfkoenig]

Ich habe irgendwo gelesen, dass alt nicht an einem Element-Typ (d.h. Tag) gebunden ist.
Kannst du mir sagen, auf welche Ebene (bzw. in welchem Tag) ich ein alt einfuegen soll, damit dein Screenreader das vorlesen kann?
Oder du sagst mir, wie ich mit einem "normalen" Browser sowas selbst pruefen kann.

[Elektrolurch]

Hallo Rudi,

Zitat:

Ich habe irgendwo gelesen, dass alt nicht an einem Element-Typ (d.h. Tag) gebunden ist.
Kannst du mir sagen, auf welche Ebene (bzw. in welchem Tag) ich ein alt einfuegen soll, damit dein Screenreader das vorlesen kann?

Also standardmässig steht das alt-Attribut in der <a>  </a> - Klause, hinter dem href=. fhem kopiert bereits für .png (die einen href haben) in das alt-Attribut den state des devices. (01-fhem-web?)
Es muss also die Stelle sein, in der devStateIcon ausgewertet wird. Bei svg - Ikons wird da halt kein alt-Attribut gesetzt.

Zitat:
Oder du sagst mir, wie ich mit einem "normalen" Browser sowas selbst pruefen kann.


Ich kann es leider ja nicht visualisieren, soviel ich aber weiß, wird das gesetzte alt-Attribut angezeigt, wenn man mit dem Cursor über das Bild fährt. Dann erscheint so ein kleines Popup mit dem Text vom "alt".

"alt" hat ja den Sinn, wenn ein Pfad zu einem image nicht aufgelöst werden kann, als Ersatz ausgegeben zu werden und Screenreader nutzen dies auch zur akustischen Ausgabe.

Elektrolurch

[rudolfkoenig]

Ich habe jetzt alt+title zum SVG hinzugefuegt, damit sollten die sich genauso verhalten wie die Bitmaps (.png, etc)
Bin gespannt auf Nebenwirkungen, hoffentlich keine.
Ab morgen per update.

[Elektrolurch]

Danke, werde berichten.

[Elektrolurch]

Hallo Rudi,

leider hat das so nichts gebracht.
Jetzt ist das wohl so gelöst, für das devStateIcon für svg-Ikonen:

<a> href="..." <svg> alt="ein" titel="ein" ... svg - Ikone  </svg></a>

Offensichtlich ignoriert der Screenreader das alt-Attribut, wenn es in der svg - Klammer steht.

Ich würde das alt-Attribut eine Ebene höher in die <a>-Klammer ziehen.

Ich probiere das selber mal aus, ab welcher Zeile ungefähr steht der Code in der 01-fhem-web.pm?

Gruß

Elektrolurch

[rudolfkoenig]

FireFox zeigt das title Attribut fuer <svg> an, Chrome & Safari nicht.
Fuer <img> img wird es ueberall angezeigt.

alt und title wird von FW_makeImage eingefuegt (Zeile 1920), diese Funktion wird haeufiger verwendet.
Wenn du mir sagst, was ich aendern soll, kann ich es gerne uebernehmen.