SC 1.3.4: Kun je DevTools gebruiken om de oriëntatie te testen?

[sander-nl]

Ik heb succescriterium 1.3.4 Orientation voor websites altijd getest met een echte smartphone en nooit met de functie 'Rotate' onder 'Toggle device emulation' in de DevTools van Chrome/Edge. De reden hiervoor is dat ik heb geleerd dat deze functie in DevTools onvoldoende is, omdat dit alleen het schermformaat simuleert en niet de richting.

Ik vraag me af of dit nog steeds geldt of dat dit inmiddels achterhaald is en DevTools wel gebruikt kan worden. Hoe testen jullie dit en denken jullie dat de 'Rotate'-functie in DevTools inmiddels wel voldoende is om te gebruiken?

Als ik het goed begrijp, zijn er verschillende manieren waarop een website zich kan aanpassen aan de oriëntatie en eventueel de weergave kan beperken tot een bepaalde oriëntatie:

• met CSS media queries;
• met JavaScript aan de hand van de hoogte en breedte;
• met JavaScript aan de hand van de device orientation API;
• en misschien ook wel andere manieren.

Het is mij nog niet helemaal duidelijk hoe de functie in DevTools werkt en of die rekening houdt met al deze mogelijke manieren. Zie ook https://developer.chrome.com/docs/devtools/device-mode.

[Aircl0wn]

Chrome houdt in ieder geval rekening met de @media orientation query. Daarmee testen lijkt me voldoende? De andere manieren zullen dan dus ook werken (viewport size kun je zelf in JS afvangen (al lijkt me dit erg omslachtig en vanuit een performance aspect ook onwenselijk.) De orientation wordt meegegeven dus kun je in JS ook gebruiken.

[rvantonisse]

Tldr; devtools device "simulatie" werkt prima hiervoor.

Er wordt in het criterium gesproken over display orientation en niet device.

orientation wordt bepaald aan de hand van screen height en width.

Het "roteren" in de devtools is visueel en letterlijk het omdraaien van de waarden voor height en width.

De content moet voornamelijk bruikbaar blijven. het gaat er niet om of een device een oriëntatie kan afdwingen. Maar als dat kan moet de content waarneembaar blijven.

Prima te testen door ofwel hele browser heen en weer te resizen, of met de "simulator".

Ik combineer dit meestal met overflow, met een vast ingestelde display van 320 * 480. En dan roteer ik deze voor Orientation. (Nb voor overflow: als content verticaal scrolled)