Techniken für WCAG 2.0

Zum Inhalt

-

SCR34: Berechnung von Größe und Position so, dass sie zusammen mit der Größe des Textes skalieren

Anwendbarkeit

Client-seitiges Scripting.

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Die Berechnung von Größe und Position kann komplex sein und unterschiedliche Browser können unterschiedliche Ergebnisse hervorbringen. Dies kann vorkommen, wenn die CSS-Formatierung Innenabstand (padding), Ränder und Breiten für ein Objekt mischt oder wenn sie einen offset-Wert und einen einfachen Wert mischt, z.B. offsetWidth und width. Einige davon verhalten sich als Reaktion auf das Zoomen unterschiedlich. Lesen Sie dazu MSDN: Fix the Box Instead of Thinking Outside It für eine Erklärung der Art und Weise, wie Internet Explorer 6 und später sich von früheren Versionen des Internet Explorers unterscheiden.

Beschreibung

Das Ziel dieser Technik ist es, die Größe und Position von Elementen auf eine Art und Weise zu berechnen, die angemessen skaliert, wenn die Textgröße skaliert wird.

Es gibt in JavaScript vier Eigenschaften, die dabei helfen, die Größe und Position von Elementen zu bestimmen:

Die Berechnung der Größe und Breite durch die Benutzung von offsetHeight und offsetWidth ist unkompliziert, aber wenn man die linke und rechte Position eines Objekts als absolute Werte berechnet, dann muss man das parent-Element berücksichtigen. Die calculatePosition-Funktion unten geht schrittweise durch alle parent-Knoten eines Elements, um diesem einen finalen Wert zu geben. Die Funktion benötigt zwei Parameter; objElement (der Name des betreffenden Elements) und das offset property (offsetLeft oder offsetTop):

Beispiele

Beispiel 1

Die Javascript-Funktion:

Code-Beispiel:

			function calculatePosition(objElement, strOffset)
{
    var iOffset = 0;

    if (objElement.offsetParent)
    {
        do 
        {
            iOffset += objElement[strOffset];
            objElement = objElement.offsetParent;
        } while (objElement);
    }

    return iOffset;
}
			

Das folgende Beispiel illustriert die Benutzung der oben genannten Funktion, indem ein Objekt unterhalb eines Referenz-Objekts ausgerichtet wird, mit dem gleichen Abstand von links:

Code-Beispiel:

			// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');

objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; 

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Öffnen Sie eine Seite, die so gestaltet ist, dass sie Container-Größen anpasst, wenn sich die Textgröße ändert.

  2. Vergrößern Sie die Textgröße bis auf 200%, indem sie die Textgrößenanpassung des Browsers benutzen (nicht die Zoom-Funktion).

  3. Untersuchen sie den Text um sicherzustellen, dass die Größe des Textcontainers so angepasst wird, dass die Größe des Textes aufgenommen werden kann.

  4. Stellen sie sicher, dass kein Text in Folge der Vergrößerung des Textes „abgeschnitten“ wurde oder verschwunden ist.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.