Welche Themen begleiten mich bei jedem Projekt? Welche Gedanken möchte ich mir wöhrend jedes gesamten Projektes machen? Ohne welche geht es nicht? Aktuelle Anforderungen an Barrierefreiheit und schlaue Vorkehrungen on the fly: Hier ist meine Liste an Grundgedanken zu best practices. Stay tuned or extend :)
Warum Kunden, Ranking und Erfolg der Website einschränken, nur weil sie bei allen Links, Buttons und/oder Überschriften, Highlights usw. die Anforderungen an Barrierefreiheit nicht erfüllen? Gibt es nicht auch Farbkombinationen, die funktionieren und gut aussehen?
Eine best practice für jedes Projekt wäre immer auch eine Design-Bibliothek, ein living Styleguide, also Text mit Inhalten, in allen Kombinationen, Positionen, mit allen Link-Typen und Buttons, Hintergründen usw. Dann kann am besten das spätere Verhalten der Website beurteilt und überwacht werden. Und während dieser Erstellung immer schon den a11y-Farben-Check machen - oder auf Farbschemata zurückgreifen, die alle Anforderungen an Kontrast und Lesbarkeit erfüllen.
Farben-Check: color.a11y.com/
Farben-Generator: randoma11y.com/ - beachtet den Button ganz unten!
Im allerersten Tag einer Website, dem <html>-Tag definieren wir ein Attribut für die Leserichtung: dir=ltr oder z.B. dir=rtl. Und geben damit schon die Ausrichtung aller Inhalte auf der Website an:
dir="rtl" - right to left,
dir="ltr" - left to right
Und dieses Setting lässt sich bei jeder Seiten-Konfiguration für eine Sprache anpassen. Für deutsch, englisch, spanisch, französich ist das Setting dann
<html dir="ltr">
Und bei z.B. arabischen Sprachen demenstprechend
<html dir="rtl">
Im CSS lassen sich die Informationen easy auswerten: Für alle Sprachen gilt zunächst, füge das Zeilen-Padding nicht an den linken Rand ein, sondern nutze für das Beispiel:
padding-start: 1rem;
Dann ist das padding für left-to-right-Leserichtung links, in der arabischen Welt rechts. In dieser Denke lassen sich alle Angaben umschreiben. Bei einer Umstellung gilt allerdings zu beachten, dass wirklich alle Angaben auf "start" oder "end" umgestellt sind, da in der Kaskade ein "padding-left" das "padding-start" übertrumpft.
Der Edge Browser hat ja zum Glück mittlerweile den Internet Explorer abgelöst, wir können diese Eigenschaften also bedenkenlos anwenden. s. CanIUse.
Mehr Informationen hierzu und zu writing-mode: Rachel Andrew für Smashing Magazine
Warum ist es gute Praxis, jedes Bild mit einem Alternativ-Text auszustatten? Screen-Reader lesen diesen Inhalt vor, wenn Besucher:innen der Website auf Grund von Einschränkungen diese Informationen nicht richtig wahrnehmen können. Und stört es auf der Website, wenn Besucher:innen diese Einschränkung nicht haben? Nein. Überhaupt nicht, dieses Attribut wird sonst nicht wahrgenommen. Aber wiederum findet jeder a11y-Tester diese Stellen und in der beliebten Quote gibt es Punktabzug. Von mir als Entwickler werden schnell alle statischen Bilder in den Template ausgestattet - aber in der Zuweisung der Redakteursrollen ist es zumindest ein Gedanke, das Speichern von Bild-Datensätzen nur in Kombination mit den alt-Attribut zu ermöglichen. Die Zeit, in wenigen Worten zu beschreiben, was auf dem Bild dargestellt ist, sollte sich immer genommen werden. Und es ist immer Selbstbetrug, zu behaupten, diese Informationen werden nachgereicht.
In dieselbe Kerbe schlagen Aria-Labels. Diese dienen dazu, in Fällen, da Links nicht durch die verlinkten Wörter genug Informationen zum Ziel des Links preisgeben (z.B: Wichtige Informationen sind hier) oder da Links auf Icons liegen, eben die fehlenden Informationen zur Verfügung zu stellen. Im Standard-TYPO3 ist das Setting nicht vorhanden, hier muss das TCA (Table Configuration Array) um ein Feld für das Attribut aria-label erweitert werden.
Was ist das ARIA eigentlich? Eine Abkürzung - es steht für Accessible Rich Internet Applications - also Zusatzinformationen für die vollständige Barrierefreiheit. Und wenn man entwicklerseitig schon das TCA erweitert, kann auch gleich noch ein Haken für „aria-hidden“ bei den Bildern mit aufgenommen werden. Wenn gesetzt, wird das Bild von Screen-Readern ignoriert, was bei Bildern, die nur schmückendes Beiwerk auf der Website sind, wichtig ist. Ein Deko-Element interessiert niemanden, der Bilder nicht richtig wahrnehmen kann.
Ich nutze entweder Gulp oder Webpack zum Kompillieren meines SCSS in CSS für die Website. Aber natürlich ist es leichter, sich die Website lokal in Pixeln zusammen zu bauen und lokal zu testen. Aber am Ende - also auf der Live-Website (und davor auf der Beta-Stage) - müssen alle Größenangaben für Abstände, Schriften, Bilder, Abbinder, Gaps etc. in relative Schriftgrößen umgerechnet sein - am einfachsten in rem
Good to know - Was ist rem?
Dabei können wir auch hier es uns einfach machen, im TYPO3-Umfeld z.B. auf den ApplicationContext den Build-Prozess anpassen und eine Bibliothek zum automatischen Umrechnen der Größenangaben verwenden.
Links: postcss-pxtorem oder als NPM postcss-pxtorem
Veröffentlicht: 12/12
Write comment
Folg mir ...
Ich freue mich auch über kreative Kontakte, aus den Bereichen Fotografie - gemeinsame Sessions, Web - Kontakte aus Kreation und Entwicklung :).
Melde dich ...
Telefon: +49 179 244 7 268
Comments
No Comments