Implementare Lente d’ingrandimento

10 minuti

Se avete preso in considerazione il supporto per i lettori di schermo durante la creazione del vostro prodotto digitale, gran parte del lavoro per supportare le lenti di ingrandimento dello schermo è già stata completata. I lente di ingrandimento dello schermo si basano anche sulla stessa API di accessibilità per interagire con le app, ovvero le app e le app Web possono sfruttare le funzionalità di accessibilità implementate.

Supporto del ridimensionamento

Impostare il focus sull'elemento e specificare i limiti dell'elemento

Assicurarsi che il focus sia impostato sull'elemento corretto per permettere agli utenti di spostarsi senza problemi nell'interfaccia, in particolare a coloro che usano tecnologie assistive come utilità per la lettura dello schermo o Lenti d’ingrandimento. "Focus" fa riferimento all'elemento attivo sullo schermo con cui un utente può interagire e deve essere chiaramente definito in modo che gli utenti possano identificare facilmente dove si trovano nell'app o nella pagina Web. Le applicazioni client devono determinare il saldo e includerlo nell'albero di accessibilità. L'equilibrio in questo contesto si riferisce al modo in cui gli elementi vengono disposti o evidenziati per garantire una navigazione fluida, assicurando agli utenti di interagire con il contenuto in modo efficace. Queste informazioni vengono quindi aggiunte all'albero di accessibilità. Nelle applicazioni web, il browser calcola e gestisce automaticamente lo stato attivo e l'equilibrio degli elementi, usando l'albero di accessibilità per aiutare i lettori dello schermo e gli ingranditori a seguire le interazioni dell'utente. Gli sviluppatori devono assicurarsi che l'albero di accessibilità sia stato compilato correttamente e che il focus venga gestito correttamente per offrire un'esperienza utente ottimale su diversi dispositivi e per diverse dimensioni di schermo.

Implementare un modello di testo

Per migliorare l'accessibilità per gli utenti che si basano su ingranditori di schermo, è fondamentale implementare correttamente la funzionalità del modello di testo. Questa funzionalità consente ai lente di ingrandimento dello schermo di tenere traccia e leggere in modo accurato il testo selezionato all'interno dell'applicazione. Integrando l'indicatore del cursore di testo con la stessa API di accessibilità usata dalle utilità per la lettura dello schermo, si crea un'esperienza uniforme per gli utenti che richiedono sia l'ingrandimento del testo che il feedback parlato. Quando si integra il modello di testo, è importante specificare i limiti corretti per tutti gli intervalli di testo. Ogni parte di testo deve definire chiaramente i punti di inizio e di fine, consentendo al lente di ingrandimento dello schermo di identificare in modo accurato il testo evidenziato o letto. Questa chiarezza è fondamentale per migliorare la navigazione all'interno del testo e facilitare le interazioni dell'utente, ad esempio la selezione, la copia o lo spostamento attraverso il testo. Inoltre, è importante fornire informazioni dettagliate sugli attributi del testo, ad esempio lo stile, le dimensioni e la formattazione, in modo che gli utenti possano ricevere feedback uditivo sul testo con cui interagiscono. Queste informazioni consentono di comprendere il contesto e spostarsi tra i contenuti senza confusione.

Ridimensionamento DPI

I punti per pollice (DPI) misurano il numero di punti o pixel che possono essere inseriti in un singolo pollice di uno schermo. Un valore DPI superiore indica un maggior dettaglio e immagini più nitide. Il ridimensionamento DPI regola le dimensioni degli elementi dell'interfaccia utente in base alle impostazioni DPI dello schermo, che è particolarmente importante per schermi con valori DPI elevati presenti su smartphone moderni, tablet e monitor ad alta risoluzione. Le modifiche al ridimensionamento DPI sono in genere integrate nelle strategie di progettazione reattive. Quando gli utenti eseguono lo zoom avanti o modificano le impostazioni di visualizzazione, il ridimensionamento DPI garantisce che tutti gli elementi dell'interfaccia utente, ad esempio testo, pulsanti e immagini, vengano ridimensionati correttamente. Questa funzionalità consente di evitare lo scorrimento orizzontale e mantiene un layout fluido man mano che il contenuto si adatta a diverse dimensioni e risoluzioni dello schermo. Quando si implementa il ridimensionamento DPI, è essenziale prendere in considerazione piattaforme come le applicazioni UWP (Universal Windows Platform) e Office Win32.

Ridimensionamento del testo

Per supportare il ridimensionamento del testo nelle app Web, è importante scegliere attentamente le unità CSS, perché alcune unità verranno ridimensionate mentre altre non lo faranno. Le dimensioni predefinite del carattere sono impostate su 16 pixel e il fattore di scala del testo viene applicato a questa dimensione di base. Le unità relative come em, ex, ch o percentuali sono basate sulla dimensione del carattere dell'elemento padre, quindi si ridimensioneranno di conseguenza. Ciò significa che qualsiasi elemento figlio che utilizza queste unità verrà ridimensionato. Al contrario, le unità assolute o quelle relative al viewport non verranno ridimensionate, il che significa che gli elementi figlio che usano queste unità rimarranno invariati, anche se usano em, ex, ch o percentuali. Tuttavia, gli elementi figlio che usano rem verranno ridimensionati correttamente perché rem è basato sulle dimensioni del carattere dell'elemento radice anziché sull'elemento padre. Per gli oggetti e i contenitori che devono essere ridimensionati con le dimensioni del carattere, è consigliabile usare rem, em, ex o ch per la larghezza e l'altezza. Le larghezze e le altezze in base alla percentuale sono relative alle dimensioni dell'elemento padre, quindi verranno ridimensionate solo se le dimensioni dell'elemento padre cambiano.

Risorsa

Deque University: stili di testo, ridimensionamento, reflow e zoom

Supporto del reflow

Per progettare diverse dimensioni dello schermo e proporzioni, collaborare a stretto contatto con i progettisti e i product manager. Usare tecniche di progettazione Web reattive per facilitare il reflow del contenuto tra dispositivi. Ad esempio, un sito Web reattivo potrebbe passare da un layout a quattro colonne su un desktop a tre colonne su un tablet più piccolo. Tuttavia, molti siti Web moderni mantengono ancora versioni separate per gli smartphone. Per garantire il supporto completo dell'adattamento dinamico del contenuto, il sito Web principale dovrebbe essere in grado di adattarsi anche a dimensioni del riquadro di visualizzazione piccole come quelle degli smartphone. Le app per dispositivi mobili a volte eseguono lo stesso codice su tablet e smartphone. Pertanto, queste app devono anche potersi adattare alle dimensioni del riquadro di visualizzazione più grandi quando vengono aperti su un tablet.

Per eseguire l'adattamento dinamico del contenuto delle app Web, usare le funzionalità avanzate di layout del motore di presentazione. Usare le proprietà dichiarative dove possibile e scrivere codice per personalizzare il comportamento solo quando necessario. Seguire inoltre le procedure consigliate per implementare il contenuto al passaggio del mouse o al momento dell'uso del focus per assicurarsi che possa essere annullato, possa essere evidenziato con il mouse e sia persistente.

Per le app Web, assicurarsi che il rendering della pagina venga eseguito inizialmente alla scala corretta aggiungendo <meta name="viewport" content="width=device-width, initial-scale=1"> all'intestazione. La documentazione sull'adattamento dinamico del contenuto WCAG non imposta la larghezza del riquadro di visualizzazione, causandone il rendering su scala ridotta su un iPhone per impostazione predefinita.

<meta name="viewport" 
      content="width=device-width, initial-scale=1">

Se l'app Web ha la propria funzionalità di zoom con avvicinamento delle dita, specificare user-scalable=no per disabilitare lo zoom di avvicinamento delle dita del browser. In caso contrario, lasciare abilitato.

<meta name="viewport" 
      content="width=device-width, initial-scale=1, user-scalable=no">

Per adattare un'esperienza utente Web (esperienza utente) ai viewport più stretti, evitare di impostare larghezze fisse per le immagini. Usare invece max-width: 100% per consentire alle immagini di ridursi all'interno di contenitori ristretti senza espandersi in quelli larghi. Impostare l'altezza su "auto" o ometterla per mantenere la proporzionalità. Ciò garantisce che le immagini rimangano all'interno del riquadro di visualizzazione e rimangano proporzionali.

Larghezze fisse per le immagini	100% larghezza per le immagini
`.image {` `width: 556px;` `height: 278px;` `}`	`.image {` `max-width: 100%;` `}`

Per garantire che i pulsanti rispondano bene al ridimensionamento del testo, seguire questa procedura:

Impostare le dimensione carattere: aumentare le dimensioni del tipo di carattere a un valore molto grande per rilevare eventuali problemi di troncamento.
Rimuovere Overflow Hidden: rimuovere la proprietà overflow: hidden per impedire il troncamento. Tuttavia, questo può causare l'estensione del testo oltre i limiti del pulsante. Questo problema si verifica perché la larghezza e l'altezza del pulsante sono impostate in pixel, che non si regolano con il ridimensionamento del testo.
Passare alle unità REM: sostituire la larghezza e l'altezza basate su pixel (px) con unità rem per supportare il ridimensionamento del testo. In questo modo il pulsante può essere ridimensionato insieme al testo.
Regola posizionamento: modificare i valori di posizione dai pixel (px) alle unità rem per evitare sovrapposizioni.
Gestire la localizzazione: quando si controllano le versioni localizzate, ad esempio quella russa, è possibile che il testo vada a capo e fuoriesca dal pulsante. Ciò è dovuto al fatto che l'altezza del pulsante è fissa, presupponendo solo una riga di testo. Impostare l'altezza su auto o rimuoverla completamente per consentire al pulsante di adattarsi al testo.

Valutare la reattività: quando si testa la progettazione in un viewport più stretto, i pulsanti possono estendersi oltre la larghezza del viewport. Ciò è causato dall'uso di position: absolute, che presuppone che ci sia spazio orizzontale sufficiente per i pulsanti da sedersi fianco a fianco. Rimuoverlo per consentire ai pulsanti di impilarsi e avvolgersi naturalmente nei riquadri di visualizzazione stretti.

Prima	Dopo
`button {` `width: 120px;` `height: 30px;` `overflow: hidden;` `}` `.button1 {` `position: absolute;` `margin-left: 0px;` `margin-top: 0px;` `}` `.button2 {` `position: absolute;` `margin-left: 130px;` `margin-top: 0px;` `}`	`button {` `width: 7.5rem;` `height: 1.875rem;` `}` `.button1 {` `margin-left: 0rem;` `margin-top: 0rem;` `}` `.button2 {` `margin-left: 8.125rem;` `margin-top: 0rem;` `}`

Aggiungi margini: Infine, aggiungere margini tra i pulsanti per garantire una spaziatura adeguata quando sono impilati. Ciò consente ai pulsanti di eseguire correttamente il wrapping in un riquadro di visualizzazione stretto.
```
.button {
    width: 44%;
    margin: 2%;
}

@media all and 
(max-width: 18rem) {
    .button {
        width: 95%;
    }
}
```

Per i pulsanti di layout che riempiono la larghezza del riquadro e passano da una riga a due righe, è possibile usare tecniche CSS diverse. Per iniziare, usare display: flex nel contenitore, che offre varie opzioni per il ridimensionamento, la spaziatura, l'allineamento e il wrapping di un elenco lineare di elementi. Add display: flex al contenitore e impostare proprietà aggiuntive sia per il contenitore che per gli elementi.

.buttoncontainer {
    display: flex;
    flex-direction: row;
    align-content: stretch;
}

.button {
    width: 100%;
    margin: 2%;
}

@media all and (max-width: 18rem) {
    .buttoncontainer {
        flex-wrap: wrap;
    }
}

In alternativa, è possibile usare display: grid per funzionalità di layout simili a tabelle senza usare una tabella effettiva. Specificare il ridimensionamento e la spaziatura di righe e colonne nel contenitore e quindi definire le posizioni di riga e colonna per ogni elemento. Usare le query multimediali per riconfigurare la griglia in base alle esigenze. Il vantaggio di queste tecniche è che sono dichiarative, usando solo CSS e nessun JavaScript.

Prima	Dopo
`.buttoncontainer {` `display: grid;` `grid-template-columns: 1fr 1fr;` `grid-template-rows: 1fr;` `column-gap: 10px;` `}` `.button {` `grid-row-start: 1;` `grid-row-end: 2;` `justify-self: stretch;` `}` `.button1 {` `grid-column-start: 1;` `grid-column-end: 2;` `}` `.button2 {` `grid-column-start: 2;` `grid-column-end: 3;` `}`	`@media all and (max-width: 18rem) {` `.buttoncontainer {` `grid-template-columns: 1fr;` `grid-template-rows: 1fr 1fr;` `row-gap: 10px;` `}` `.button {` `grid-column-start: 1;` `grid-column-end: 2;` `}` `.button1 {` `grid-row-start: 1;` `grid-row-end: 2;` `}` `.button2 {` `grid-row-start: 2;` `grid-row-end: 3;` `}` `}`

Linee guida su cosa fare e cosa evitare nel Reflow

Ecco alcune cose da fare e da evitare per il reflow:

Usare max-width per ridurre gli elementi in base alla larghezza del contenitore.
Usare auto per fare in modo che i contenitori si adattino al contenuto, ridimensionare le immagini in modo proporzionale e centrare gli elementi con margini uguali.
Usare rem, ex, ch o percentuali per le dimensioni del carattere e altri elementi per supportare il ridimensionamento del testo.
Si consiglia di utilizzare le media query per specificare layout diversi per larghezze diverse, aggiungendone una per ogni breakpoint.
Usare display: inline o display: inline-block con position: static per consentire agli elementi di impilarsi e andare a capo come testo
Usa display: flex per opzioni di layout avanzate per elenchi lineari di elementi, ma controlla la compatibilità se devi supportare Internet Explorer.
Usare display: griglia per layout simili a tabelle senza usare tabelle.
Usare la grafica vettoriale quando possibile per garantire download rapidi e immagini nitide su larga scala. SVG inline è un'ottima opzione.
Usare img srcset per specificare versioni di risoluzione diverse della stessa immagine, consentendo al browser di selezionare quella appropriata in base alle impostazioni di scalabilità, alla larghezza di banda e allo stato della cache.
Non usare position: absolute a meno che non sia necessario, ad esempio per creare overlay, e usala solo sul contenitore, non sugli elementi al suo interno.
Non usare unità come cm, mm, in, px, pt o pc per le dimensioni del carattere, perché non supportano il ridimensionamento del testo.
Non usare tabelle per il layout; usarli solo per i dati tabulari per mantenere la semantica corretta e l'accessibilità nell'albero di accessibilità.

In somma,

Fai ✓	Non X
max-width Automatico rem, ex, ch, % @media all and (larghezza massima: 18rem) display: inline Visualizzazione: blocco inline display: flex (controllare la compatibilità di Internet Explorer) display: griglia (controllare la compatibilità di Internet Explorer) <svg> <img srcset=" ">	Posizione: assoluta (tranne sovrimpressione) cm, mm, in, px, pt, pc (tranne margini, riempimento, bordo, blocchi di grandi dimensioni) <table> (ad eccezione dei dati tabulari)

Contenuto al passaggio del mouse o in caso di focus

Per implementare contenuti al passaggio del mouse o al focus in un'app Web, evitare di usare tooltip intrinseci del browser, poiché presentano molti problemi di accessibilità. Ad esempio, un tooltip creato con l'attributo title non può essere visualizzato al passaggio del mouse e non si adatta allo zoom del browser. Usare invece descrizioni comando personalizzate. È possibile rendere una descrizione comando personalizzata interattiva al passaggio del mouse, scalabile con lo zoom del browser ed eliminabile utilizzando il tasto CRTL.

Gli elementi chiave per una descrizione comando personalizzata funzionale includono:

Gestori eventi: Consenti agli utenti di richiamare e chiudere i tooltips utilizzando gestori eventi e tasti. I gestori eventi come mouseEnter e focus invocherebbero la visualizzazione del tooltip, e onMouseOut e onBlur nasconderebbero il tooltip insieme agli eventi chiave quando l'utente preme il tasto Esc.
```
tooltip1.onmouseenter = showTooltip;
tooltip1.onmouseleave = hideTooltipAfterDelay;
```

Nascondere i suggerimenti: consentire agli utenti di chiudere i suggerimenti utilizzando i tasti o i gestori di eventi come onBlur o onMouseOut.

triggerElement.addEventListener('mouseenter', showTooltip);

triggerElement.addEventListener('focus', showTooltip);

triggerElement.addEventListener('mouseleave', hideTooltip);

triggerElement.addEventListener('blur', hideTooltip);

document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') hideTooltip();
});

Gestore eventi con tasto GIÙ: aggiungere un Gestore eventi con tasto GIÙ nel documento per gestire il tasto CTRL, assicurandosi che funzioni indipendentemente dalla posizione in cui si trova il focus della tastiera.
```
function documentKeyHandler(e) 
{
    e = e || window.event;
    if(e.ctrlKey) 
        hideTooltip();
}
```

Prestare attenzione a potenziali bug, ad esempio alla descrizione comando che non scompare quando viene premuto il tasto CTRL, se il Gestore eventi con tasto GIÙ sul pulsante chiama stopPropagation. La rimozione della chiamata stopPropagation può risolvere questo problema.

Commenti e suggerimenti

Questa pagina è stata utile?