9.1.4.10 Inhalte brechen um - Mit Browser-Werkzeug testen?

[sweckenmann]

Spricht etwas dagegen, statt:

Die Developer Tools rechts angedockt öffnen (über Funktionstaste F12, über die Tastenkombination Strg + Umschalttaste + I, oder über Menü Einstellungen > Weitere Tools > Entwicklertools) und die vertikale Abgrenzung zwischen Seiten- und Tool-Bereich ziehen, bis oben rechts im Seiten-Bereich 320px x (Viewporthöhe) angezeigt wird (wird rechts ein Scrollbalken angezeigt, 14px dazuzählen, also 334px x Viewporthöhe einstellen).

mit dem Browser-Werkzeug zu testen:

Firefox: Extras > Browser-Werkzeuge > Bildschrim-Größe testen > 320 im entsprechenden Formularfeld für die Bildschirm-Breite eingeben.

Ich würde dann die Prüfanleitung anpassen.

[detlevhfischer]

Wahrscheinlich nicht - aber man sollte es vielleicht anhand von mehreren Sites mal überprüfen, ob es doch Unterschiede gibt...

[detlevhfischer]

Vergleiche mal DevTools-Button-Ansicht (mobile Ansicht 320px in Chrome), mit der händischen Ansicht (Einstellung mit Scrollbalken auf Viewport-Breite 336px wie bislang beschrieben):

• https://www.erbliche-netzhauterkrankungen.de/ -- Startseite sieht in den beiden Ansichten anders aus, Text läuft in DevTools-Button-Ansicht schmaler (was bei langen Worten usw, zu unterschiedlichen Bewertungen führen könnte - funktional keine auffälligen Unterschiede : händisch besser
• https://nachhaltigkeitsbericht.stadtreinigung.hamburg/ -- DevTools-Button-Ansicht: abweichend von Ansicht auf Smartphone und händuischer Anischt ist ein schmaler Spalt Inhalt neben dem Ausklappmenü sichtbar (wohl keine Auswirkungen auf Ergebnisse): händisch besser?
• https://zalando.de -- keine nennenswerten Unterschiede
• https://bahn.de -- keine nennenswerten Unterschiede
• https://elmshorn.de -- keine nennenswerten Unterschiede --- es gibt Overlay von DIGIaccess GmbH
• https:/bergbaumuseum.de/ -- DevTools-Button-Ansicht Cookiebanner passend adaptiert, händische Anischt (wird fortgesetzt)
• https://www.rki.de/ -- Unterschiedliches Verhalten bei der Nutzung, z.B. Scrollzustand nach Aktivieren des Links "Navigation" (wohl geringe Auswirkungen auf Bewertung von 9.1.4.10)
• https://www.zara.com/de/ -- erheblicher Unterschied nach Aufruf des mobilen Menüs - händisch: Menu durch horizontalen Scrollbalken erreichbar ( DevTools-Button-Ansicht: Korrektur: horizontaler Scrollbalken sehr schmal und schwer zu treffen keine Möglichkeit für Mausnutzer, zu rechts abgeschnittenem Menüelement zu scrollen)

Erstes Fazit: je schlechter zugänglich und je mehr JavaScript-Gebastel, desto wahrscheinlicher, dass es im Vergleich der Ansichten (geringe) Unterschiede in Darstellung mit ggf. Auswirkungen auf Nutzung und Bewertung von PS wie 9.1.4.10 und ggf. auch anderen wie 9.2.1.1 gibt.

[sweckenmann]

@detlevhfischer Warum 334px (nicht 336) - da ist doch gar kein Scrollbalken? Den Scrollbalken hatten wir ma früher mit einbezogen, als die Prüfüng über die Web Developer Toolbar (Resize Window oder Display Windwow Size (weiß nicht mehr) genacht wurde. Da erschien ein Scrollbalken. Aber in der Weise, wie es jetzt beschrieben wird, ist kein Scrollbalken zu sehen? Oder versteh ich da was nicht?

Wenn man 320px nimmt sehe ich keinen Unterschied? Wo genau? (Erbliche Netzhauterkrankung)

Edit: Sorry, nur bei der mobilen Navi gabs keinen Scrollbalken....

[stefanFarnetani]

ich sehe auch keine nenneswerte Unterschiede beim Testen mit 320 px. man sollte nur bei "Bildschirmgröße Testen" "Berührungssimulation" deaktiviert halten (letztes Icon in der Leiste bei Firefox). Das aktivieren der Funktion gibt unterschiedliche Breiten des Consent-Banners bei Erbliche Netzhauterkrankung aus.

[johannesFischer84]

Ich teste schon seit Anbeginn des Erfolgskriteriums mit der Ansicht in Firefox (Die Öffnen-Möglichkeit über das Menü kannte ich noch nicht, ich habe immer die Schaltfläche in den Entwickler-Werkzeugen verwendet). Ich bin mit der Firefox-Umsetzung ganz zufrieden, habe bisher allerdings keine Vergleiche mit der Chrome-Ansicht mit breiten Entwickler-Werkzeugen gemacht.

Danke für ein paar Beispiele, Detlev. Ich habe mal die ersten beiden und das letzte ausprobiert. Bei den Netzhauterkrankungen habe ich keinen Unterschied bemerkt. Bei der Stadtreinigung Hamburg ist mir aufgefallen, dass im Fußbereich die E-Mail-Adresse nachhaltigkeit@stadtreinigung.hamburg.de im Firefox mit einem Bindestrich dargestellt wird, im Chrome dagegen nicht. Die über body vererbte CSS-Eigenschaft hyphens:auto wird wohl von beiden Browsern unterschiedlich umgesetzt. Und die Scrollbalken, die bei Zara auftauchen, werden auch von verschiedenen Browsern generell unterschiedlich dargestellt.

Aus meiner Sicht scheint keine der beiden Möglichkeiten schlechter oder besser geeignet sein als die andere. Kleinere Details scheinen mir mit der Umsetzung in den Browsern zu tun zu haben, wobei das auch in der Desktop-Ansicht zu kleinen Unterschieden führen kann.

[detlevhfischer]

@weckenmann Sollen wir dann die Prüf-Alternativen drin lassen und die Prüfung über DevTools / Mobile Ansicht (da am einfachsten) hinzufügen und an die erste Stelle setzen?

[sweckenmann]

@detlevhfischer Ja, stimme zu.

[detlevhfischer]

Ist so umgesetzt. Ich schließe dieses Issue. Bei Bedarf wieder öffnen.