Oferecendo suporte para temas de alto contraste (HTML)

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

Por padrão, o Tempo de Execução do Windows oferece 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 de CSS (folhas de estilo em cascata) pela aparência de alto contraste. Você não precisa executar nenhum trabalho adicional no aplicativo para oferecer 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 de CSS, o botão ficará invisível em alto contraste, pois a plataforma do Tempo de Execução do Windows remove todas as imagens de tela de fundo de 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 de 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:
© 2015 Microsoft