Warum sind Tags wie center und font ein Problem?

Sie vermischen das Aussehen mit dem Markup, statt es CSS zu überlassen. Solches veraltetes präsentationsbezogenes Markup kann assistive Technologie verwirren und ist in HTML5 nicht mehr gültig.

Was ersetzt veraltete präsentationsbezogene Tags?

CSS: `text-align` statt ` ` oder dem `align`-Attribut sowie `font-family`, `font-size` und `color` statt ` `. HTML bleibt der Struktur und Bedeutung vorbehalten.

Ist die Verwendung von center oder font automatisch ein WCAG-Verstoß?

Es ist ungültiges HTML5 und wirkt SC 1.3.1 entgegen, weil es die Struktur verwässert. Die verlässliche Lösung ist, alle Gestaltung nach CSS zu verlagern und HTML der Semantik vorzubehalten.

Häufige Verstöße

Veraltetes präsentationsbezogenes Markup: <center>, <font> und das align-Attribut

HTML4 verwischte die Grenze zwischen Struktur und Präsentation: Tags wie <center> und <font> sowie Attribute wie align existierten rein, um zu steuern, wie etwas aussah, direkt ins Markup eingebacken statt CSS überlassen. HTML5 hat die meisten davon entfernt oder als veraltet markiert – nicht aus stilistischer Präferenz, sondern weil das Vermischen von Präsentation mit strukturellem Markup Inhalte für assistive Technologie (und Suchmaschinen und künftige Redesigns) schwerer zuverlässig interpretierbar macht.

Dies fällt unter WCAG-Erfolgskriterium 1.3.1 (Info und Beziehungen), Stufe A – dasselbe Kriterium, das die Auszeichnung von Überschriften, Listen und Tabellen gemäß dem betrifft, was sie tatsächlich sind.

Die veralteten Elemente und ihre Ersetzungen

Veraltet	Ersetzen durch
`<center>`	CSS `text-align: center` (für Text) oder `margin: 0 auto` (für Block-Elemente)
`<font>`	CSS-Eigenschaften `font-family`, `font-size` und `color`
`<big>`	Einen CSS-`font-size`-Wert
`<strike>`	`<s>` oder `<del>`, wenn die Bedeutung tatsächlich semantisch ist (ein durchgestrichener Preis, eine nachverfolgte Löschung), oder CSS `text-decoration: line-through`, wenn es rein visuell ist
`<tt>`	`<code>` oder `<kbd>`, wenn der Inhalt Code oder eine Nutzereingabe ist, oder CSS `font-family: monospace`, wenn es rein visuell ist
`align`-Attribut (auf jedem Element)	CSS `text-align`, `margin`, Flexbox oder Grid, je nachdem, welches Layout damit erreicht werden sollte

<!-- Vorher -->
<center><font color="red" size="5">Angebot endet heute</font></center>
<td align="center">Bestätigt</td>

<!-- Nachher -->
<p style="text-align: center; color: red; font-size: 1.5rem;">Angebot endet heute</p>
<td style="text-align: center;">Bestätigt</td>

Warum das immer wieder in altem oder eingebettetem Drittanbieter-Inhalt auftaucht

Fast niemand schreibt <center>-Tags in einer modernen, handgebauten Codebasis. Dieser Verstoß taucht am häufigsten in eingebetteten Drittanbieter-Widgets, niemals migriertem Legacy-CMS-Inhalt oder von einem alten Exportwerkzeug erzeugtem HTML auf (manche E-Mail-Vorlagen und PDF-zu-HTML-Konverter geben dieses Markup standardmäßig noch aus) – dieses genaue Muster ist zum Beispiel auf Googles eigener Suchergebnisseite verbreitet genug, dass es eines der ersten Dinge ist, die ein automatisierter Scan fast jeder Website mit Legacy- oder eingebettetem Inhalt aufdeckt.

Die praktische Lösungsstrategie

Wenn das Markup aus Ihren eigenen Vorlagen stammt, ersetzen Sie es direkt anhand der obigen Tabelle. Wenn es aus einem eingebetteten Widget oder einem Drittanbieter-Skript stammt, das Sie nicht kontrollieren, sind die realistischen Optionen: den Anbieter um ein aktualisiertes Embed bitten, das Widget durch eine moderne Alternative ersetzen oder – wenn keines davon möglich ist – es als bekannte, dokumentierte Einschränkung akzeptieren, statt es stillschweigend zu ignorieren. WCAG-Konformitätsberichte sollen offenlegen, was nicht behoben wurde und warum, nicht nur, was behoben wurde.

Offizielle Referenzen

Häufige Fragen

Warum sind Tags wie center und font ein Problem?: Sie vermischen das Aussehen mit dem Markup, statt es CSS zu überlassen. Solches veraltetes präsentationsbezogenes Markup kann assistive Technologie verwirren und ist in HTML5 nicht mehr gültig.
Was ersetzt veraltete präsentationsbezogene Tags?: CSS: `text-align` statt `<center>` oder dem `align`-Attribut sowie `font-family`, `font-size` und `color` statt `<font>`. HTML bleibt der Struktur und Bedeutung vorbehalten.
Ist die Verwendung von center oder font automatisch ein WCAG-Verstoß?: Es ist ungültiges HTML5 und wirkt SC 1.3.1 entgegen, weil es die Struktur verwässert. Die verlässliche Lösung ist, alle Gestaltung nach CSS zu verlagern und HTML der Semantik vorzubehalten.