Специальные возможности

Поддержка высококонтрастных цветовых схем

Работа с моделями высокой контрастности, это, преимущественно, принятие изменения цветовой темы Windows и проверка того, что графические элементы вашего приложения соответствуют требованиям высокой контрастности. С технической точки зрения, высокая контрастность, как её определяет W3C это минимальный коэффициент контрастности 4.5:1. Полное пояснение того, как измерить этот коэффициент, расположено по адресу (http://www.w3.org/TR/WCAG20-TECHS/G18.html). Анализатор контрастности (http://www.paciellogroup.com/node/18?q=node/20) от Paciello Group так же позволяет проверить изображения (некоторые из моих в приложении "Here My Am!" тест не прошли). Обратите внимание, однако, что создание высококонтрастной графики не требуется для содержимого, не несущего информацию, такого, как логотипы и декоративные изображения. В то же время, полноцветная графика может выглядеть не на своём месте в высококонтрастном режиме, поэтому не забудьте оценить общее впечатление от программы при работе с ней пользователей в подобных условиях.

Приложение может поддерживать высокую контрастность с помощью четырех подходов. Первый заключается в том, чтобы использовать встроеные элементы управления (и HTML и WinJS) и позволить системе делать свою работу! Для того, чтобы увидеть, что произойдёт, запустите несколько примеров использования элементов управления, например "Основные элементы управления HTML" (http://code.msdn.microsoft.com/windowsapps/Common-HTML-controls-and-09a72a24) и "HTML-Элемент управления Rating" (http://code.msdn.microsoft.com/windowsapps/Rating-control-sample-4666c750) и пеереключайтесь между разными темами высокой контрастности в разделе Персонализации Панели управления..

Конечно, почти всегда у приложения есть некоторые собственные элементы управления, такие, как div-элементы с пользовательскими цветовыми схемами, заданными в CSS. Вам следует убедиться, есть ли у вас подходящие правила стилей для настроек высокой контрастности, для которых присутствует медиа-характеристика -ms-high-contrast (http://msdn.microsoft.com/library/windows/apps/hh465764.aspx) для медиа-запросов, которая похожа на -ms-view-state, которая рассматривается в Главе 6 курса "Введение в разработку приложений для Windows 8 с использованием HTML, CSS и JavaScript". Эта характеристика может принимать значения active (для применения данного правила ко всем темам с высокой контрастностью), black-on-white (тема с белым фоном), white-on-black (тема с черным фоном), и none. Очевидно, none означает, что вы не используете -ms-high-contrast для группировки любых правил; active так же подразумевает, что вы используете -ms-high-contrast без значения. В следующем разделе мы рассмотрим их более подробно.

Как и в случае с состояниями просмотра, вы можете использовать прослушиватели медиа-запросов и matchMedia для того, чтобы брать высококонтрастные темы в коде. Это полезно для обновления элементов canvas, как мы скоро увидим. Кроме того, имеется CSS-стиль -ms-high-contrast-adjust (http://msdn.microsoft.com/library/windows/apps/hh441137.aspx) который указывает на то, разрешено ли переопределять обычные свойства CSS элемента для целей высокой контрастности. Значение по умолчанию, auto, это позволяет; значение none предотвращает такое поведение. Опять же, скоро мы это увидим.

Далее, WinRT представляет текущие установки контрастности посредством класса Windows.UI.ViewManagement.AccessibilitySettings (http://msdn.microsoft.com/library/windows/apps/windows.ui.viewmanagement.accessibilitysettings.aspx). У него есть два свойства: highContrast, логическое значение, указывающее на то, включена ли высокая контрастность, и highContrastTheme, строка с именем высококонтрастной цветовой схемы. Для темы с темными элементами на белом фоне это будет "High Contrast White"; для других трех в разделе Панель управления >Персонализация (Control Panel>Personalization) эти строки будут "High Contrast #1", "High Contrast #2", и "High Contrast Black" (идут слева направо). Вы можете видеть воздействие этих настроек в Сценарии 2 примера "Настройки контрастности пользовательского интерфейса" (http://code.msdn.microsoft.com/windowsapps/High-Contrast-UI-Settings-9a310961), код здесь весьма прост:

var accessibilitySettings = new Windows.UI.ViewManagement.AccessibilitySettings();
id("highContrast").innerHTML = accessibilitySettings.highContrast;
id("highContrastScheme").innerHTML = accessibilitySettings.highContrast ?
accessibilitySettings.highContrastScheme : "undefined";
    

WinRT так же предоставляет подробную информацию о цвете посредством метода Windows.UI.ViewManagement.UISettings.uIElementColor (http://msdn.microsoft.com/library/windows/apps/br229470.aspx). (Обратите внимание на странный регистр символов в uIElementColor, артефакт результатов проекции WinRT-имен в JavaScript.). Он возвращает объект Windows.UI.Color (http://msdn.microsoft.com/library/windows/apps/windows.ui.color.aspx) для элемента, идентифицируемого с помощью UIElementType (http://msdn.microsoft.com/library/windows/apps/windows.ui.viewmanagement.uielementtype.aspx). Сценарий 1 примера о работе с контрастностью показывает все эти возможности на примере поучительного, но довольно скучного кода, который я здесь дублировать не буду.

Объект AccessibilitySettings, кроме того, поддерживает одно событие, highcontrastchanged, которое позволяет вам узнать, когда включена или выключена высокая контрастность. Его eventArgs.target является объектом AccessbilitySettings, который содержит свежие данные. Вы можете использовать это событие для вызова любого необходимого программного обновления, которое нужно выполнить в вашем пользовательском интерфейсе, например, для перерисовывания элемента canvas с использованием высококонтрастных цветов, если вы не используете для этой цели прослушиватель медиа-запроса.

Наконец, и для растровых и для векторных изображений применяется соглашение об именовании фйлов, которое используют вместе с суффиксами .scale-100, .scale-140, и .scale-180 для обозначения плтности пикселей. Суффиксы для контрастности – это: .contrast-standard, .contrast-high, .contrast-black (чёрное на белом), и .contrast-white (белое на черном). Мы увидим всё это в действии в разделе "Ресурсы для схем высокой контрастности" ниже, и увидим, как комбинировать суффиксы масштаба и высокой контрастности в разделе "Масштаб + контраст = Квалификаторы ресурсов"

CSS-стилизация для высокой контрастности

Пример "CSS-стилизация для режима высокой контрастности" (http://code.msdn.microsoft.com/windowsapps/High-Contrast-b36079d8) предоставляет рассмотрение ценного подхода по работе с режимами высокой контрастности, где используются медиа-запросы и файлы изображений. Как вы можете ожидать, основное количество этих возможностей показано в виде декларативных CSS-объявлений и ресурсов приложения. Лишь один сценарий содержит JavaScript-код!

Сценарий 1 показывар разрицу между элементами, которые учитывают использование схемы высокой контрастности и элементами, коорые этого не делают. При использовании обычной цветовой схемы, все три кнопки выглядят так, как показано ниже, где первые две – это элементы div, а третья – это настоящий элемент button.

Когда включается высокая контрастность (Левый Shift+Alt + Print Screen очень удобно переключают режимы при работе с этим примером), они выглядят так:

Первый элемент управления, не учитывающий использование схемы высокой контрастности, всё еще использует белый цвет для границы, которые, конечно, исчезают на белом фоне. Вторая кнопка, с другой стороны, имеет стили, которые используют цвета, заданные системой, связанные с медиа-запросом для режима высокой контрастности, в итоге кнопка нормально работает при использовании любой темы (css/scenario1.css):

@media (-ms-high-contrast) {

.s1-hc {
background-color: ButtonFace;
color: ButtonText;
border: 1px solid ButtonText;
}
/* ... */
}

Совет. Если решили полностью положиться на системные цвета, и в CSS, и в SVG, тогда вы можете вовсе не использовать медиа-запросы или различные SVG-файлы, так как их цвета будут настроены для темы с высокой контрастностью автоматически. Смотрите материал "Системные цвета" (http://msdn.microsoft.com/library/ie/aa358804.aspx). Так же вы можете использовать значение current-Color в SVG для свойств fill, stroke, stop-color, flood-color, и lighting-color для отражения параметров контрастности.

Сценарий 2 показывает похожие эффекты с кнопками, которые используют SVG-изображения для фона. При обычных установках эти кнопки выглядят так:

После включения схемы высокой контрастности они выглядят так:

Всё, что здесь происходить, это использование медиа-запроса для использования, когда это необходимо, высококонтрастного фонового изображения для кнопки:

.s2-button-hc-bg-svg {
background-image: url(../button-not-aware.svg);
background-size: 100% 100%;
width: 200px;
height: 200px;
}

@media (-ms-high-contrast) {
.s2-button-hc-bg-svg {
background-image: url(../button.contrast-high.svg);
background-repeat: no-repeat;
background-size: cover;
}
}

Если вы просмотрите файл button-not-aware.svg, вы увидите, что градиентный цвет имеет множество различных значений; в button.contrast-high.svg, с другой стороны, эти цвета устанавливаются либо в значение black либо в значение ButtonFace, последний вариант отражает системные установки цвета. (Возможно, будет лучше заменить black на ButtonText, для использования системного цвета (http://msdn.microsoft.com/library/ie/aa358804.aspx), который будет автоматически подстроен под параметры высокой контрастности).

Что происходит с первой и со второй кнопками? Если вы посмотрите в CSS (css/scenario2.css), вы увидите, что единственное различие заключается в том, что класс стиля для первой кнопки, .s2-button, не имеет правила в медиа-запросе для высокой контрастности, в то время как для второй кнопки, класс стиля .s2-button-hc, имеет правило, которое лишь задаёт фоновое изображение. В чем же дело? А дело в том, что так как первая кнопка не имеет никаких применимых стилей в медиазапросе, её стили автоматически переопределяются с учетом значений высокой контрастности. Как описано в материале "Введение в использование специальных возможностей в Веб" (http://msdn.microsoft.com/library/windows/desktop/gg671915.aspx), включение высокой контрастности переопределяет большинство цветовых стилей, как и background-image, в последнем случае просту удаляя это изображение. Поэтому первая кнопка отображается пустой. Вторая кнопка имеет правило, определяющее background-image в медиа-запросе, в итоге, фоновое изображение выводится.

Это приводит нас к цели использования стиля -ms-high-contrast-adjust. По умолчанию он установлен в значение auto, позволяя переопределять CSS-свойства. Если мы установим его в значение none в правиле стиля, мы предохраним эти стили от переопределения или настройки. Таким образом, если вы добавите -ms-high-contrast-adjust: none; к правилу .s2-button в css/scenario2.css, вы увидите, что первая и вторая кнопка ведут себя одинаково. Вы можете видеть это изменение в копии примера, в дополнительных материалах к лекции.

Переходим к Сценарию 3, он, в обычном режиме, рисует логотип Internet Explorer в элементе canvas в цвете (левое изображение ниже), в то время как в модели высокой контрастности он рисует логотип в черно-белом варианте (правое изображение):

В данном случае параметры высокой контрастности берутся в JavaScript (js/scenario3.js) с использованием прослушивателя медиа-запроса; CSS здесь не используется (этот код упрощен, для большей понятности, в реальном примере так же производится обнаружение схемы высокой контрастности при запуске приложения):

var fillStyleOuterColor = "rgb(9, 126, 196)";
var fillStyleInnerColor = "rgb(255, 255, 255)";

var mql = matchMedia("(-ms-high-contrast)");
mql.addListener(updateColorValues);

function updateColorValues(listener) {
if (listener.matches) { fillStyleOuterColor = "ButtonText"; fillStyleInnerColor = "ButtonFace";
draw();
}
else {
fillStyleOuterColor = "rgb(9, 126, 196)";
fillStyleInnerColor = "rgb(255, 255, 255)";
draw();
}

Обратите внимание на то, что событие AccessibilitySettings.onhighcontrastchanged можно использовать вместо прослушивателя медиа-запроса.

Элемент canvas – это лучший выбор? В данный момент в приложении "Here My Am!" я использовал изображения для вывода сообщений в элементы img, когда фотография или карта были недоступны. Учитывая нужды работы со схемами высокой контрастности и локализованных вариантов этих изображений, проще взять локализованный строковой ресурс, как мы рассмотрим ниже, и просто создать изображение "на лету" с помощью элемента canvas. Это устраняет необходимость иметь множество различных файлов изображений и уменьшает размер пакета приложения, и, кроме того, полностью соответствует нуждам обеспечения доступности приложения и локализации. Версия "Here My Am!" для этой лекции теперь работает именно так.