Unterstützen von Designs mit hohem Kontrast (HTML)

Applies to Windows and Windows Phone

Sie suchen die C#/VB/C++/XAML-Version dieses Themas? Informationen finden Sie unter Unterstützung von Designs mit hohem Kontrast (XAML).

Die Windows-Runtime unterstützt Designs mit hohem Kontrast standardmäßig für alle Apps. Wenn ein Benutzer ein Design mit hohem Kontrast aktiviert, ersetzt das Framework automatisch alle Farben und Cascading Style Sheets (CSS)-Einstellungen durch den hohen Kontrast. Sie müssen keine weiteren Anpassungen in der App vornehmen, um hohen Kontrast zu unterstützen.

In manchen Fällen kann es notwendig sein, die Darstellung mit hohem Kontrast für die App genauer zu steuern. Wenn Sie z. B. das Bild einer Schaltfläche als CSS-Hintergrund festlegen, ist die Schaltfläche bei hohem Kontrast nicht sichtbar, da die Windows-Runtime-Plattform alle CSS-Hintergrundbilder entfernt. Um das Standardverhalten bei hohem Kontrast für ein bestimmtes Element zu überschreiben, verwenden Sie ms-high-contrast-adjust: none für das übergeordnete Element. Sie können die App auch mit CSS-Medienanfragen für hohen Kontrast anpassen.


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

Bedenken Sie auch, wie die Bilder mit hohem Kontrast aussehen. Falls die Bildfarben in Designs mit hohem Kontrast nicht gut aussehen, stellen Sie für Ihre Bilder Versionen mit hohem Kontrast bereit, und befolgen Sie dabei die empfohlenen Benennungskonventionen für Dateien. Für die Bilddatei back.png würden Sie z. B. eine Version namens back.contrast-high.png für alle Designs mit hohem Kontrast, eine Version namens back.contrast-black.png für schwarze Designs mit hohem Kontrast oder eine Version namens back.contrast-white.png für weiße Designs mit hohem Kontrast erstellen.

Das Framework bietet Ihnen auch die Möglichkeit, eine bestimmte Aktion mit JavaScript auszuführen, wenn aktuell ein Design mit hohem Kontrast aktiviert ist.


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

Verwandte Themen

AccessibilitySettings
Grundlegende Zugriffsanforderungen

 

 

Anzeigen:
© 2014 Microsoft