Oferecendo suporte para temas de alto contraste (HTML)

Applies to Windows and Windows Phone

Procurando a versão para C#/VB/C++/XAML deste tópico? Veja Oferecendo suporte a temas de alto contraste (XAML).

Por padrão, o Tempo de Execução do Windows dá suporte a temas de alto contraste em todos os aplicativos. Quando o usuário alterna para um tema de alto contraste, a estrutura substitui automaticamente todas as cores e configurações CSS (folhas de estilos em cascata) pela aparência de alto contraste. Você não precisa executar nenhum trabalho adicional no aplicativo para dar suporte ao alto contraste.

Em alguns casos, talvez você precise de mais controle sobre a aparência de alto contraste do seu aplicativo. Por exemplo, se você definir a imagem de um botão como uma tela de fundo CSS, o botão vai ficar invisível em alto contraste, pois a plataforma do Tempo de Execução do Windows remove todas as imagens de tela de fundo CSS. Para substituir o comportamento padrão de alto contraste em um elemento específico, use ms-high-contrast-adjust: none no elemento pai. Também é possível usar consultas de mídia CSS para personalizar o uso de alto contraste.


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

Você deve considerar também qual será a aparência de suas imagens em alto contraste. Se as cores da imagem não tiverem uma aparência satisfatória em temas de alto contraste, forneça versões de suas imagens em alto contraste e siga as convenções de nomenclatura de arquivo recomendadas. Por exemplo, o arquivo de imagemback.png teria uma versão nomeada back.contrast-high.png para uso com qualquer tema de alto contraste, back.contrast-black.png para uso com temas de alto contraste de preto ou back.contrast-white.png para uso com temas de alto contraste de branco.

A estrutura também permite que você use JavaScript para executar uma ação específica quando um tema de alto contraste está em uso.


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

Tópicos relacionados

AccessibilitySettings
Satisfazendo os requisitos básicos de acessibilidade

 

 

Mostrar:
© 2014 Microsoft