Tipps & Tricks
CSS, Barrierefreiheit, Browser, Tools
CSS, Barrierefreiheit, Browser
1. CSS Flexible Farben
Als Webdesigner gehen Sie davon aus, dass eine definierte Farbe wie etwa #98b3c7 auch so angezeigt wird – mit einer gewissen Varianz durch Endgerät oder Einstellungen. Im aktuellen Editor’s Draft des CSS Color Module Level 4 wird die CSS-Eigenschaft color-adjust eingeführt, die Farben flexibler handhabt. Die Eigenschaft kann zwei Werte annehmen. Mit color-adjust: exact; soll der Browser die Farben bestmöglich so darstellen, wie sie im CSS vorgesehen sind. Bei color-adjust: economy; hingegen geben Sie dem Browser die Erlaubnis, die Farben nach eigenen Vorstellungen anzupassen. Das kann dazu führen, dass ein Browser eine Webseite in Weiß auf Schwarz beim Ausdruck selbstständig zu Schwarz auf Weiß ändert. Oder aber Farbwerte anpasst, wenn das Ausgabegerät nur monochrom arbeitet. Als Grafiker möchten Sie zwar ungern die Kontrolle über Ihr Design abgeben. Andererseits ist es heutzutage schwer möglich, alle Ausgabegeräte wie Fernseher, Smart Watches, Autos, Kühlschränke oder Spiegel zu berücksichtigen. Die CSS-Eigenschaft wird bereits in Firefox, Chrome und Safari unterstützt, für die letzten beiden benötigen Sie aber das Vendor Prefix -webkit-. Eric Bailey schlägt auf css-tricks.com vor, die Eigenschaft gleich für den gesamten body anzusetzen [bit.ly/coloradjust]: body { color-adjust: economy; } Das ist beim aktuellen Stand ein guter Ausgangspunkt. Wie gut das in der Praxis funktioniert, wird sich zeigen, wenn mehr Browser und Endgeräte die Eigenschaft unterstützen.
2. Barrierefreiheit Fokussierte Elemente
Wenn Nutzer auf einer Webseite mit der Maus über einen Link hovern, gibt es meistens ein visuelles Feedback. Bei einem Menüpunkt ändert sich vielleicht die Hintergrundfarbe, bei einem unterstrichenen Link im Fließtext verschwindet die Linie unter dem Link. Das wird per CSS über die Pseudoklasse :hover erledigt. Daneben gibt es auch die Pseudoklasse :focus. Diese Pseudoklasse kann für ein Element genutzt werden, das den Fokus erhält. Das passiert zum Beispiel, wenn Sie in ein Textfeld eines Formulars klicken. Der Fokus ist aber auch relevant, wenn ein Nutzer eine Website allein mit der Tastatur bedient. Mit der Tab-Taste kann der Nutzer von einem fokussierbaren Element (Link, Button, Formularfelder) zum nächsten springen. Per Browser-Default wird ein fokussierter Link mit einer recht dünnen Outline angezeigt. In vielen Themes wird oft vergessen, den Fokus etwas deutlicher zu kennzeichnen. Oder aber die Outline wird absichtlich entfernt, was dazu führt, dass Tab-Nutzer gar nicht sehen können, wo sie sich gerade befinden. Wenn Sie die Outline nicht nutzen wollen, gilt es, ein fokussiertes Element anders hervorzuheben. Bei der einfachsten Lösung übernehmen Sie zumindest die Anweisungen von :hover, um dem Nutzer ein Feedback zu geben.
a { text-decoration: underline; ] a:hover, a:focus { text-decoration: none; }
Allerdings bewegt ein Maus-Nutzer die Maus selbstständig an die Stelle, auf die er klicken will. Das Feedback kann hier etwas dezenter ausfallen. Ein Tastatur-Nutzer weiß aber eben nicht, wo er sich gerade befindet. Daher darf das Feedback hier ruhig etwas
deutlicher ausfallen. Das MOMA kennzeichnet den Fokus im Hauptmenü seiner Website zum Beispiel mit einer sehr deutlichen Umrandung.
a.menulink:focus { box-shadow: 0 0 0 .2rem #000; border-radius: .4rem; padding: .8rem; }
3. Barrierefreiheit focus-within
Ein weiteres Problem für Tastatur-Nutzer sind Hauptmenüs, bei denen ein Untermenü zwar ausklappt, wenn der Benutzer mit der Maus darüberhovert – das aber nicht ausklappt, wenn der Benutzer durch das Menü tabbt. Je nach Umsetzung bekommt der Tastatur-Nutzer nicht immer mit, dass es überhaupt Untermenüpunkte gibt. Das HTML könnte wie folgt aussehen:
<nav> <ul> <li><a href="#">Hauptmenü Item A</a></li> <li><a href="#"> Hauptmenü Item B</a> <ul class="dropdown"> <li><a href="#">Submenü Item 1</a></li> <li><a href="#">Submenü Item 2</a></li> <li><a href="#">Submenü Item 3</a></li> </ul> </li> <li><a href="#"> Hauptmenü Item C</a></li> </ul> </nav>
Das Menü .dropdown soll zunächst versteckt werden:
.dropdown { display: none; }
Sie zeigen es an, wenn sich die Maus über dem Menülink B oder dem Untermenü befindet:
ul a:hover + .dropdown, ul li .dropdown:hover {
display: block; }
Um auch die Tab-Nutzer einzubeziehen, kommt die Pseudoklasse :focus-within ins Spiel. Die Klasse wird berücksichtigt, wenn ein Kind des angesprochenen Elementes den Fokus erhält [codepen.io/textformer/pen/ xyxGqG]. Diese Technik funktioniert in moderen Browsern, für ältere Browser gibt es ein Polyfill.
ul li:focus-within .dropdown { display: block; }
4. Barrierefreiheit Direkt zum Inhalt springen
Es gibt eine weitere, kleine Ergänzung, die TastaturNutzern das Leben einfacher macht: Sprungmarken – versteckte Links, mit denen Sie direkt zu den wichtigen Bereichen einer Webseite springen können. Das sind in erster Linie Links zum Inhalt, manchmal aber auch zur Seitenleiste oder Fußzeile. Diese Sprungmarken sind meistens die ersten, unsichtbaren Elemente im body und erscheinen nur, wenn ein Tastatur-Nutzer durch die Website tabbt. So können etwa blinde Tastatur-Nutzer den Kopf einer Website mit seinen vielen Menüpunkten schnell überspringen. Auch diese Technik ist schon seit Jahren bekannt, wird aber auf erstaunlich vielen Websites nicht eingesetzt [bit.ly/sprunglink].
5. Usability Pseudoklasse :active
Neben :focus und :focus-within ist auch :active eine Pseudoklasse, die viel zu selten eingesetzt wird. Die Pseudoklasse gilt für Elemente, die vom Benutzer aktiviert wurden. Sie wird etwa für Links und Buttons eingesetzt und kann ein Feedback geben, wenn der Benutzer auf solch ein Element klickt. So könnten Sie etwa einen Button bei einem Klick leicht nach unten verschieben, um einen dreidimensionalen Effekt zu erzielen.
6. Details Icons für die Website
Jede professionelle Website wird mit einem Favicon ausgestattet. Mittlerweile gibt es aber eine ganze Reihe weiterer Icons für verschiedene Systeme, die Sie bei Websites berücksichtigen könnten. Das Favicon wird üblicherweise im Reiter eines Browsers vor dem Titel der Webseite angezeigt oder bei den Lesezeichen. Als Größe war lange Zeit 16x16 Pixel der Standard, es funktionieren aber auch 32x32 oder 64x64 Pixel. Das übliche Dateiformat ist das png. Browser verstehen ebenso gif oder ico. Manche Browser stellen auch animierte gifs oder svg dar. In den letzten Jahren sind zahlreiche Varianten für verschiedene Zwecke und Endgeräte hinzugekommen. Sie werden zum Beispiel genutzt, wenn sich Nutzer ein Lesezeichen für eine Webseite auf die Oberfläche Ihrer Smartphones setzen. Es ist recht verwirrend, hier den Überblick für die verschiedenen Icon-Größen unter iOS, Android und Windows zu behalten. Dazu kommen zu schnell neue Geräte heraus, und die Dokumentationen der Hersteller sind auch nicht immer auf dem neuesten Stand. Wenn Sie Services wie favicomatic.com nutzen, werden Ihnen eine ganze Menge Icons generiert: <link rel="apple-touch-icon-precomposed"
sizes="57x57" href="apple-57x57.png" /> <link rel="apple-touch-icon-precomposed"
sizes="114x114" href="apple-114x114.png" /> <link rel="apple-touch-icon-precomposed"
sizes="72x72" href="apple-72x72.png" /> <link rel="apple-touch-icon-precomposed"
sizes="144x144" href="apple-144x144.png" /> <link rel="apple-touch-icon-precomposed"
sizes="60x60" href="apple-60x60.png" /> <link rel="apple-touch-icon-precomposed"
sizes="120x120" href="apple-120x120.png" /> <link rel="apple-touch-icon-precomposed"
sizes="76x76" href="apple-76x76.png" /> <link rel="apple-touch-icon-precomposed"
sizes="152x152" href="apple-152x152.png" /> <link rel="icon" type="image/png"
href="favicon-196x196.png" sizes="196x196" /> <link rel="icon" type="image/png"
href="favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png"
href="favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png"
href="favicon-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png"
href="favicon-128.png" sizes="128x128" /> <meta name="application-name"
content=" "/> <meta name="msapplication-TileColor"
content="#FFFFFF" /> <meta name="msapplication-TileImage"
content="mstile-144x144.png" /> <meta name="msapplication-square70x70logo"
content="mstile-70x70.png" /> <meta name="msapplication-square150x150logo"
content="mstile-150x150.png" /> <meta name="msapplication-wide310x150logo"
content="mstile-310x150.png" /> <meta name="msapplication-square310x310logo"
content="mstile-310x310.png" /> Ist es unbedingt nötig, all diese Icons anzubieten? Sicher nicht. Die wenigsten Nutzer werden ihre Webseite als Lesezeichen auf der Smartphone-Oberfläche ablegen. Auf der anderen Seite nehmen Ihnen solche Generatoren den Großteil der Arbeit ab. Sie können die generierten Icons schnell einbinden – wenn Sie nicht gerade ein Logo für jede erdenkliche Größe finetunen möchten.
7. Tools Schnelle Übersetzungen
Wenn Sie bisher Google Translate oder auch den Microsoft Translator für Übersetzungen genutzt haben, schauen Sie sich als Alternative einmal DeepL an. Hinter dem Service steckt ein Unternehmen aus Köln. Nach eigener Aussage bevorzugen professionelle Übersetzer die Ergebnisse von DeepL gegenüber anderen Anbietern im Verhältnis 3:1. Derzeit können Sie Texte ins Englische, Französische, Spanische, Ita-
lienische, Niederländische und Polnische übersetzen lassen, bzw. umgekehrt eine dieser Sprachen ins Deutsche übersetzen. Die grundsätzliche Nutzung ist kostenfrei.
8. Chrome Natives Lazy Loading Im Web bedeutet Lazy Loading, dass Elemente wie Bilder oder Videos erst dann geladen werden, wenn sie tatsächlich benötigt werden.
Beim ersten Aufrufen einer Webseite lädt der Browser so erst einmal alle Bilder, die der Benutzer im Viewport sehen kann. Bilder, die weiter unten (below-thefold) liegen, werden nachgeladen, sobald der Benutzer scrollt und sich nur noch ein paar Pixel weit vom Bild entfernt befindet. Der Vorteil liegt darin, dass der Benutzer nicht unnötige Daten laden muss. Die Umsetzung erfolgt mit JavaScript. Google hat seinem Browser Chrome ein neues Feature spendiert, das Lazy Loading für Bilder und iframes wesentlich einfacher umsetzt. Das neue Atribut lazyload erlaubt es einem Webentwickler, festzulegen, welche Elemente ggf. später geladen werden sollen. Der vorgeschlagene Code ist denkbar einfach: <iframe src="ads.html" lazyload="on"></iframe> Dabei gibt es drei mögliche Werte: On: Sagt aus, dass das Element erst geladen werden soll, wenn es in den Viewport rückt. Off: Diese Ressource soll so schnell wie möglich geladen werden, unabhängig davon, ob sie sich im Viewport befindet oder nicht. Auto: Überlässt die Entscheidung dem Browser. Da das der Standard ist, können Sie das Attribut in diesem Fall genauso gut gleich weglassen. Noch ist die Technik lediglich ein Proposal von Google. In Chrome Canary, dem Nightly Build des Browsers für Webentwickler, müssen Sie die Funktion noch über chrome://flags explizit einschalten. Dort gibt es die beiden Flags #enable-lazy-image-loading und #enable-lazy-frame-loading, die Sie für eigene Tests aktivieren können. Nicolai Schwarz