target-size-minimum

Zeigerziele müssen mindestens 24x24px groß sein oder ausreichend Abstand zu anderen Zielen haben

Prüft, dass per Zeiger bedienbare Ziele eine effektive Trefferfläche von mindestens 24 mal 24 CSS-Pixeln haben oder eine zulässige Ausnahme erfüllen (z. B. ausreichender Abstand).

Anwendbarkeit. Gilt für <button>, <summary>, <a href>, <area href>, <input>, <select>, <textarea> und Elemente, deren Rolle zu button oder link aufgelöst wird (die erste echte Rolle im role-Attribut, ohne Berücksichtigung der Groß-/Kleinschreibung), die per Zeiger erreichbar sind: gerendert, nicht durch pointer-events:none unterdrückt und mit etwas, das ein Zeiger treffen kann (ein weggeschnittenes Ziel hat nichts davon; eines mit display: contents ist sein Inhalt). Der Ausschluss aus dem Accessibility Tree ist hier kein Filter: Ein Bedienelement mit aria-hidden ist trotzdem ein Ziel, das ein Zeiger treffen kann. <area> wird erfasst, aber nie tatsächlich bewertet: Es hat keine eigene Box, die sich messen ließe. Ein Custom Element, dem seine ElementInternals die Rolle button oder link geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle.

Erwartung. Jedes Ziel ist mindestens 24 mal 24 CSS-Pixel groß oder erfüllt eine der Ausnahmen von SC 2.5.8, die diese Regel anhand der Geometrie feststellen kann. Ein Ziel ist der Bereich, den ein Zeiger treffen kann: seine Border-Box mit ihren abgerundeten Ecken und 2D-Transformationen, beschnitten durch clip und clip-path: inset() in seiner Kette der umgebenden Blöcke und nicht größer als eine dortige Box, die ihren Überlauf abschneidet, einschließlich Inhalt, der aus ihm herausragt. Was über ein Ziel gezeichnet wird, nimmt ihm nichts weg, auch ein anderes Ziel nicht: Ob eine dekorative Ebene, ein Overlay oder eine fixierte Zeile ein Ziel verdeckt, hängt vom Zeitpunkt und von der Scrollposition des Scans ab, sagt also nichts über die Größe des Ziels aus, und 2.5.8 misst das Ziel selbst. Zwei Ziele, die sich überlappen, liegen jeweils im Kreis des anderen, daher ist ein zu kleines davon trotzdem zu nah. Eine Box, die ihren Überlauf abschneidet (overflow mit einem anderen Wert als visible oder contain: paint) und von Nutzenden oder einem Skript gescrollt wird, beschneidet das Ziel nicht an ihrem aktuellen Rand: Das Ziel wird vollständig gemessen, als wäre es in die Box gescrollt, nicht größer als die Box, und nur die Boxen und Ziele innerhalb der Box liegen nahe an einem Ziel, das sie außer Sicht hält. Es ist groß genug, wenn ein an der Seite ausgerichtetes Quadrat von 24 mal 24 in diesen Bereich passt, so wie Understanding 2.5.8 es misst. Die Ausnahmen: Abstand (ein Kreis mit 24px Durchmesser, zentriert auf dem umgebenden Rechteck des Bereichs, erreicht weder den Bereich eines nicht verwandten Ziels noch den Kreis eines anderen zu kleinen Ziels), die Inline-Ausnahme für ein Ziel in einem Satz, einen Link oder einen Button, der in den Text geschrieben ist (der Abschnitt seines Block-Containers zwischen Zeilenumbrüchen enthält Text außerhalb jedes Ziels mit einem Buchstaben oder einer Ziffer darin) oder die Größenfestlegung durch den User Agent (eine nicht gestylte native Checkbox oder ein Radio-Button, erkannt daran, dass appearance nicht auf none zurückgesetzt wurde). Ein zu kleines Ziel, das zu nah an einem Nachbarn liegt, schlägt fehl. Wo eine Ausnahme greifen kann, sich aber nicht bestätigen lässt (zwei Inline-Links, die sich nur durch Trennzeichen getrennt drängen, wie in „Edit | Delete“, oder ein Ziel in einem SVG, Canvas oder einer Image-Map, das wesentlich sein kann), ist das Ergebnis cantTell statt einer Vermutung. Abstand zum Grenzwert (target-size-px): unter den Zielen, die mindestens 24 mal 24 groß sind, das kleinste, angegeben als Seitenlänge des größten Quadrats, das hineinpasst, gegenüber 24 (bei einem Rechteck der kleinere Wert aus Breite und Höhe); context.widthPx und context.heightPx nennen seine Ausdehnung. Ein Ziel unter 24, das über die Abstandsausnahme besteht, kommt dafür nicht in Frage. Nur ein Ziel innerhalb von 6px über 24 (bis 30) gilt als knapp; eine Seite, deren kleinstes Ziel größer ist, liefert daher keinen Abstand zum Grenzwert. measuredCount zählt jedes gemessene Ziel.

Abstand zum Grenzwert. Diese Regel misst target-size-px in CSS-Pixeln, und der Wert muss den Grenzwert erreichen. Lag ein bestandenes Ergebnis nahe am Grenzwert, nennt das Feld margin des Ergebnisses das Element, das ihm am nächsten kam und ihn trotzdem einhielt. So zeigt sich ein knappes Ergebnis, bevor eine kleine Änderung es kippt. Anders als die Felder eines Befunds ist es ein stabiler Vertrag. Siehe Ausgabeschema.

Beispiele

<button style="width:24px; height:24px;">+</button>

<button style="width:10px; height:10px; padding:0;">A</button><button style="width:10px; height:10px; padding:0; margin-left:5px;">B</button>

Quellcode ansehen