Überschriften

✨ gliedern längere Texte

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

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

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!

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

Responsives Webdesign verzichtet auf feste Größenangaben!

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

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>

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;
}

❌ Hier klicken

✅ DO

✨ Sinnvolle Linktexte verwenden

✨ unterschiedliche Dokumenttypen kennzeichnen

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="">

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>

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

svg text {
  paint-order: stroke fill;
}

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

„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!

Weihnachtsbrief 2024

Fröhliche Weihnachten und ein gutes neues Jahr!

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">

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

Beachte die 5 ARIA-Regeln.

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.

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>

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>?

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

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

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

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.

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

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>