F69: Fehler bei Erfolgskriterium 1.4.4, wenn die Veränderung der Größe von visuell gerendertem Text bis zu 200 Prozent dazu führt, dass der Text, das Bild oder die Steuerelemente beschnitten, abgeschnitten oder verdeckt werden

Anwendbarkeit

HTML, XHTML und CSS

Dieser Fehler bezieht sich auf:

Erfolgskriterium 1.4.4 - Textgröße ändern
- Wie man 1.4.4 erfüllt (Textgröße ändern)
- Erfolgskriterium 1.4.4 verstehen [Textgröße ändern]

Beschreibung

Das Ziel dieser Fehlersituation ist es, ein Problem zu beschreiben, das auftritt, wenn die Änderung der Textgröße dazu führt, dass Text beschnitten, abgeschnitten oder undeutlich wird, so dass er dem Leser nicht länger zur Verfügung steht. Im Allgemeinen tritt dieser Fehler auf, wenn es für die Layout-Engine eines Benutzeragenten keine Möglichkeit gibt, alle Layout-Hinweise im HTML in der neuen Schriftgröße zu beachten. Einige der Möglichkeiten, wie dies auftreten kann, beinhalten:

Festsetzen des overflow-Property des umschließenden Elements auf hidden
Benutzung von absolut positioniertem Inhalt
Erstellung von Popups, die in der neuen Schriftgröße nicht groß genug für ihren Inhalt sind

Beispiele

Fehler-Beispiel 1

Die Schriftgröße wird auf skalierbare Weise festgelegt, aber der Container wird auf eine feste Pixelgröße gesetzt. Ein grauer Rahmen zeigt die Grenzen des Textcontainers. Wenn der Text in der Größe verändert wird, dann schwappt der aus dem Container heraus und verdunkelt den nächsten Absatz.

Code-Beispiel:

				<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;> 
  Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Illustration von Beispiel 1:

Beispiel das Text zeigt, der aus seinem Container hinaus läuft und so den anderen Text auf der Seite überlagert.

Fehler-Beispiel 2

Dieses Beispiel ist identisch zum letzten, mit der Ausnahme, dass der Container so eingestellt wurde, dass er den Text abschneidet. Der Text überlagert nicht länger den nächsten Absatz, sondern wird nun beschnitten. Dies ist auch ein Fehler.

Code-Beispiel:

				<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;>
 Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Illustration von Beispiel 2:

Beispiel, das Text zeigt, der abgeschnitten wurde aufgrund der Änderung der Textgröße.

(derzeit keine aufgelistet)

Tests

Vorgehensweise

Vergrößern Sie die Textgröße um 200%.
Prüfen Sie, ob kein Text beschnitten, abgeschnitten oder undeutlich wird.

Erwartete Ergebnisse

Wenn Test #2 falsch ist, dann trifft diese Fehlersituation zu und der Inhalt scheitert an diesen Erfolgskriterien.