Analog-/Digitaluhr
Praxistest unter Verwendung der gängigen Browser
Was alles zur Barrierefreiheit zu sagen ist, wird in unzähligen Dokumentationen hinreichend beschrieben. Dass einem die Browser selbst die größten Barrieren bauen, bleibt nach wie vor eines der größten Probleme.
Browsertest des Beispieles
Erklärung: Die Zeiger werden mittels JavaScript rotiert, das Pendel tut was soll durch CSS3 Animation ( MSIE ), die Digitaluhr erhält wieder ihre Datums-/Zeitangabe durch JavaScript.
Chrome und Opera:
Auch wenn Opera kaum Marktanteil ( um die ein Prozent ) besitzt, glänzt der neben Chrome in dem Beispiel.
Safari in der für Windows zur Verfügung stehenden Version fällt komplett durch! Ohne Update meines Macs auf die aktuellste Rauptierversion kann ich nicht beurteilen, ob dieser in der Lage ist mit Chrome oder Opera gleichzuziehen.
Firefox hatte wie bereits in verschiedenen Beispiele hingewiesen, Probleme beim Rendern der Filter. Mit Version 55 ist an diesem Beispiel nun alles gut.
MSIE als auch Edge verarbeiten zwar CSS3 Animationen, fallen aber aus, wenn dies auf ein SVG-Element angewendet werden soll. Für diese Browser muss ein JavaScript als Ersatz herhalten. Der Pendelstab, auf den Filter „spot“ angewendet wird, erweitert oder verkleinert sichtbar den Filterbereich abhängig von der Winkelabweichung.
Drei Filter werden auf Gruppen und Elemente angewendet und lassen die Unterschiede der jeweiligen Interpretationen des verwendeten Browsers deutlich hervortreten. Das führt wie erwähnt bei Firefox und MSIE zu nicht gewollten und somit negativen Effekten.
Warum also die Filter? Eigentlich nur um das Aussehen etwas aufzupeppen und zu beleben. Aus diesem Grunde ist auch der Bereich der Analoguhr (id='ziffernblatt') von mir viel zu überdimensioniert worden. In der Darstellung wird klar, dass das mit wesentlich weniger Details auch noch passabel wäre. Es ist und bleibt nur eine Übung.
Wer es will und weiß wie, schaut sich die xml-Defintion von Zeile 255 bis 1408 an. Ich habe die Darstellung einfach viel zu überladen. Von 1413 bis 1493 ist der JavaScript-Bereich zur Steuerung der Uhr. Das Pendel wird für den MSIE/Edge über JavaScript gesteuert, ansonsten über CSS animation.