Windows Dev Center

Supporto dei temi a contrasto elevato (HTML)

Stai cercando la versione di questo argomento relativa a C#/VB/C++/XAML? Vedi Supporto dei temi a contrasto elevato (XAML).

Windows Runtime supporta i temi a contrasto elevato per impostazione predefinita per tutte le app. Quando un utente passa a un tema a contrasto elevato, il framework sostituisce automaticamente tutte le impostazioni dei fogli di stile CSS (Cascading Style Sheets) e dei colori con l'aspetto a contrasto elevato. Non devi quindi eseguire alcun lavoro extra nella tua app per supportare il contrasto elevato.

In alcuni casi potresti però aver bisogno di un maggiore controllo sull'aspetto a contrasto elevato. Ad esempio, se imposti l'immagine di un pulsante come sfondo CSS, il pulsante sarà invisibile nella modalità a contrasto elevato perché la piattaforma di Windows Runtime rimuove tutte le immagini di sfondo CSS. Per modificare il comportamento predefinito del contrasto elevato per un elemento specifico, devi usare ms-high-contrast-adjust: none per l'elemento padre. Puoi anche usare media query CSS da personalizzare per il contrasto elevato.


/* Back button style setting. */
.backButton {
    ...
}

@media screen and (-ms-high-contrast)
{
    .backButton {
        -ms-high-contrast-adjust: none;
        ...
    }
}

/* Back button additional customization for white high-contrast theme. */
@media screen and (-ms-high-contrast:black-on-white)
{
    .backButton {
       ...
    }
}

Un altro elemento da considerare è l'aspetto delle tue immagini in modalità a contrasto elevato. Se nei temi a contrasto elevato i colori non vengono visualizzati correttamente, puoi fornire versioni a contrasto elevato delle tue immagini e seguire le convenzioni consigliate per i nomi dei file. Ad esempio, il file di immagine back.png potrebbe avere una versione denominata back.contrast-high.png da usare con qualsiasi tema a contrasto elevato, una versione denominata back.contrast-black.png da usare con i temi a contrasto elevato per il nero o una versione denominata back.contrast-white.png da usare con i temi a contrasto elevato per il bianco.

Il framework ti offre anche la possibilità di usare il codice JavaScript per eseguire un'azione specifica nel caso in cui sia in uso un tema a contrasto elevato.


// Take a specific action if the user has chosen a high-contrast theme.
if (matchMedia("screen and (-ms-high-contrast)").matches) {
  // A high-contrast theme is active. 
}

Argomenti correlati

AccessibilitySettings
Come soddisfare i requisti minimi di accessibilità

 

 

Mostra:
© 2015 Microsoft