Prise en charge de thèmes à contraste élevé

Prise en charge de thèmes à contraste élevé (HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous cherchez la version C#/VB/C++/XAML de cette rubrique ? Voir Prise en charge de thèmes à contraste élevé (XAML).

Par défaut, Windows Runtime prend en charge les thèmes à contraste élevé pour toutes les applications. Quand un utilisateur bascule vers un thème à contraste élevé, l’infrastructure remplace automatiquement l’ensemble des couleurs et des paramètres CSS par l’apparence à contraste élevé. Aucun travail supplémentaire n’est nécessaire dans votre application pour prendre en charge le contraste élevé.

Dans certains cas, vous aurez peut-être besoin de davantage de contrôle sur l’apparence en contraste élevé. Par exemple, si vous définissez l’image d’un bouton en tant qu’arrière-plan CSS, le bouton est invisible en contraste élevé, car la plateforme Windows Runtime supprime toutes les images d’arrière-plan CSS. Pour remplacer le comportement de contraste élevé par défaut d’un élément spécifique, utilisez le paramètre ms-high-contrast-adjust: none dans l’élément parent. Vous pouvez également utiliser des requêtes de média CSS pour obtenir une personnalisation pour le contraste élevé.


/* 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 {
       ...
    }
}

Vous devez également prendre en considération l’apparence de vos images en contraste élevé. Si les couleurs des images ne sont pas satisfaisantes dans les thèmes à contraste élevé, proposez des versions en contraste élevé de vos images, et suivez les conventions d’affectation des noms de fichiers recommandées. Par exemple, le fichier image back.png aurait une version nommée back.contrast-high.png pour une utilisation avec n’importe quel thème à contraste élevé, back.contrast-black.png pour une utilisation avec des thèmes à contraste élevé noir ou back.contrast-white.png pour une utilisation avec des thèmes à contraste élevé blanc.

L’infrastructure vous permet également d’utiliser JavaScript pour effectuer une action spécifique si un thème à contraste élevé est actuellement utilisé.


// 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. 
}

Rubriques associées

AccessibilitySettings
Respect des exigences d’accessibilité de base

 

 

Afficher:
© 2017 Microsoft