Jedes Bild benötigt einen alt-Text.

Das könnte man doch durch KI erledigen lassen. Oder lieber doch nicht?

<img alt="gute Bildbeschreibung" src="">

Sorge für ausreichenden Farbkontrast:

❌ DON'T Hellgrauer Text auf weißem Hintergrund.

✅ DO

✨ Dunkelgrauer Text auf weißem Hintergrund.

✨ Verwende Tools wie den WebAIM Contrast Checker.

Stelle sicher, dass Benutzer per Tab-Taste direkt zum Inhalt der Website navigieren können:

<a id="skip-link" 
 href="#content">
  zum Inhalt
</a>

<main id="content">

Trotz vieler Versprechen der Industrie gibt's so was nicht.

❌ Inhalte als PDF ins Netz zu stellen

✅

✨ Inhalte in HTML umwandeln

✨ eine Druckausgabe in PDF anbieten

Das hängt von den benötigten Elementen ab. HTML ist semantisch, bei SVG-Text wäre eine bessere Auszeichnung sinnvoll.

<use href="#logo" role="banner"/>

<text role="heading">
  Überschrift
</text>

Bilder benötigen einen Alternativtext - in SVG geben <title>, <desc> und das <text>-Element Informationen über das Bild!

Sorge dafür, dass fokussierbare Elemente wie Links und Buttons klar hervorgehoben werden:

fieldset:focus-within {
	border-color: #dfac20;
	background: #fffbf0;
}

input:focus {
	border: 2px solid gold;
	box-shadow: 0 1px 1px gold inset, 
                0 0   8px yellow;
}

Verwende <label> mit aussagekräftigen Beschriftungen für alle Eingabefelder:

<label for="alter">Dein Alter:
</label>
<input id="alter"
     name="altersangabe" 
     type="number" min="16"> 
<span></span>

Und warum ist da ein leeres <span> hinter dem <input>?

Formulare sind oft so umfangreich, dass Nutzer frustriert abbrechen.

Wenn man die Eingaben thematisch sortiert und mit progress zeigt, wie viel Schritte man noch vor sich hat, werden auch längere Formulare erträglich!

Verändere nur die Helligkeit der Füllung mit

filter: brightness(1.1)

❌ Ein größerer stroke führt oft zu unerwünschten Ergebnissen, weil nachfolgende SVG-Elemente diese nach außen wachsende Randlinie wieder verdecken.

SVGs bestehen aus Grafik-Objekten, die man immer wieder neu zusammensetzen und verwenden kann.

❌ Hier klicken

✅ DO

✨ Sinnvolle Linktexte verwenden

✨ unterschiedliche Dokumenttypen kennzeichnen

Überschriften

✨ gliedern längere Texte

✨ sind kurze, prägnante „Nachrichten über der Nachricht“

✨ sollten mit der Tastatur ansteuerbar sein
(durch ein Inhaltsverzeichnis)

Biete Untertitel für Videos und Transkripte für Audio an:

<video controls>
  <source src="video.mp4" ...>
  <track src="subtitles.vtt" … 
         srclang="de" …>
  Der Text ist auch unter 
   <a href="">Link</a> zu finden.
</video>

Semantisches HTML benötigt keine zusätzlichen aria-Attribute!

Beachte die 5 ARIA-Regeln.

Wenn du eine Randlinie oder einen Heiligenschein um Ihren SVG-Text legen willst, der die Buchstaben nicht überschreibt:

svg text {
  paint-order: stroke fill;
}

Responsives Webdesign verzichtet auf feste Größenangaben!

.square {
	width: min-content;
	aspect-ratio: 1; 
}

„Wer lesen kann, ist klar im Vorteil!“

Damit man einen Text lesen kann, solltest du neben ausreichendem Kontrast auf …

eine möglichst große Schriftgröße,

eine leserliche Schriftart und

großzügigen Zeilenabstand achten!

Alerts sind richtig und wichtig - mit aria-live kann deine Warnung den Screenreader unterbrechen (assertive) oder ihn den Satz zu Ende bringen lassen (live).

<p       id="alert" 
       role="alert"
  aria-live="polite" 
  >
  Fertig! Endlich Pause!
</p>

Audio-Dateien aus einer Linkliste bequem im eigenen Player abspielen.

Seit 2 Jahren ist der kleine Bruder von HTML und SVG in allen Browsern angekommen. MathML zeichnet Formeln barrierefrei aus.

Erinnert ihr euch noch an die Zeiten, als im Dezember am Monitor Schneeflocken fielen?

Das moderne Web ist zu langweilig.

<is-land on:media=
 "(prefers-reduced-motion: no-preference)">
	<snow-fall></snow-fall>
</is-land>

zachleat.com/snow-fall

Mehr über <custom-elements>

Advent ist auch immer die Zeit für gemeinsames Spielen, für Besinnlichkeit und für Rückblicke.

Weihnachtsbrief 2024

Fröhliche Weihnachten und ein gutes neues Jahr!