Orientamento

Definizione — Per orientamento si intende l’uso del contenuto in modalità verticale (portrait) o orizzontale (landscape). Secondo WCAG 2.1 1.3.4 Orientamento (AA), siti e app non devono imporre un orientamento specifico: l’utente deve poter utilizzare funzioni e contenuti in entrambe le modalità, a meno che un orientamento sia essenziale (ad es. tastiera di pianoforte, modulo di firma, giochi/VR con vincolo fisico).

Perché è importante

• Inclusione: molte persone bloccano l’orientamento per necessità motorie o usano supporti che impediscono la rotazione.
• Mobile first: la maggior parte della fruizione avviene in portrait; imporre landscape causerebbe abbandoni e barriere.
• Coerenza con reflow: si integra con Reflow (1.4.10) e Ingrandimento/Zoom per garantire layout adattivi.

Buone pratiche

• Evita lock forzati: non bloccare l’orientamento a livello di app o meta viewport se non strettamente necessario.
• Layout flessibili: griglie responsive, componenti che si adattano (card che diventano stack in portrait, tabelle con overflow controllato o trasformate in liste).
• Tipografia fluida: unità relative (rem/em), lunghezza riga ~45–75 caratteri, immagini/video scalabili (max-width:100%).
• Media e modali: i video devono essere controllabili e leggibili in entrambi gli orientamenti; i modali devono rientrare nel viewport in portrait senza nascondere i pulsanti.
• Messaggi informativi: se l’orientamento è davvero essenziale, spiega il perché e fornisci alternative equivalenti ove possibile.

Esempi

Approccio responsivo (CSS)

.grid { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .grid { grid-template-columns: 1fr 1fr; } }
/* Nessun vincolo di orientamento: funziona sia in portrait sia in landscape */

Da evitare

/* Bloccare funzioni in portrait */
@media (orientation: portrait) {
  .app-overlay { display:block } /* "Ruota il dispositivo per continuare" */
  main { display:none }
}

Test rapidi

• Ruota il dispositivo: tutte le funzioni restano disponibili? Pulsanti e form sono visibili senza scroll orizzontale?
• Con zoom 200–400% in portrait: il layout resta usabile (Reflow)? Il focus è sempre percepibile?

Eccezioni “essenziali” (WCAG)

• Contenuti che replicano oggetti fisici o strumenti che hanno un orientamento unico (es. firma, strumenti musicali, alcuni giochi).