a11ccessibility

Кувалдин Артем, Симонова Екатерина

Что такое «доступность»?

– это свойство приложения, заключающееся в том, что он может быть использован самым широким кругом лиц.

Целевая аудитория

– это люди с нарушением:

  • зрения
  • слуха
  • опорно-двигательной системы
  • речи
  • ментальной сферы
  • и не только...

Примеры плохого зрения

Макулодистрофия

Глаукома

Диабетическая ретинопатия

Катаракта

Цветовая слепота

Число людей с нарушением зрения*

/

*по данным ВОЗ за 2014

Интерфесы взаимодействия

  • Увеличение экрана
  • Программы экранного доступа
  • Дисплей Брайля

Интерфесы взаимодействия

Программы экранного доступа

— это программа, прочитывающая вслух то, что находится на экране.

  • JAWS (Windows)
  • NVDA (Windows)
  • VoiceOver (Mac Os)
  • Orca (Linux)

Программы экранного доступа

Demo: voiceOver

Браузеры

Webvisum

Операционные системы

Операционные системы на планшете/телефоне

Программы экранного доступа на планшете/телефоне

Основные проблемы

  • CAPTCHA
  • Flash
  • двусмысленными ссылками
  • сложными формами
  • изменяющимся содержимым страницы
  • отсутствие клавиатурного управления
  • «кривые руки» разработчиков

WAI-ARIA

Web Accessibility Initiative — Accessible Rich Internet Applications

  • ARIA – основной документ
  • Primer – описание проблем
  • Authoring Practices – пример внедрения доступности

Принципы разработки
  • Воспринимаемость
    текстовая версия, отделение важного
  • Управляемость
    клавиатурой, ограничение времни, опасные элементы, увеличение шрифта, помощь в навигации
  • Понятность
    текст для чтения, предсказуемость, ошибки
  • Надежность

Клавиатурная навигация

Навигация стралками FF

  • «Preferences → Advanced → Always use the cursor keys to navigate within pages»

атрибут accesskey

– выполняет переход поссылке

...
  • IE: Alt+y
  • Chrome: Alt+y
  • Opera: Alt+y
  • Safari: Ctrl+Option+y
  • Firefox: Shift+Alt+y

Виртуальный курсор

– это способ изучить страницу не взаимодействуя с ней

Demo

Быстрая навигация

  • по кнопкам
  • по заголовкам(h1-h6)
  • по ссылкам
  • по полям ввода
Demo

Все функции страницы должны быть доступны для навигации клавишей Tab, а методы «быстрой» навигации должны существовать в качестве дополнения, но никак не в качестве единственной возможности.

Активация ссылки(Enter) перемещает на другую страниц

Активация кнопки(Spacebar) совершает действие без перехода.

Перед активацией необходимо проверить не используется ли модификатор

$('.button').on('keydown', function(e) {
    if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) {
        return;
    }

    switch (e.which) {
        case 13: /* Enter */
            doSomething();
            break;
        case 32: /* Spacebar */
            /* Прокрутка страницы на один экран. */
            e.preventDefault();
/* Здесь нельзя делать doSomething().*/
    }
});

атрибут tabindex

<div class=button tabindex="0">...</div>


<a tabindex="1">...</a>


<a tabindex="-1">...</a>





.block:focus
{
    outline: 1px dashed black;
}
…

Элемент, находящийся в фокусе, должен иметь графические выделение!

Я ссылка
Demo: gov.uk

Невидимое

display:none и visibility:hidden – недоступны для фокуса

Невидимые ссылки

.hidden-link {
    position: absolute;
    left: -32767px;
}
.hidden-link:focus {
    left: 10px;
}


Skip to content

...


...
Demo: BBC

Активация мышью

  • Активировать по mousedown — ошибка!
  • Клик с модификатором — это не то же самое, что и обычный клик
  • dblclick — тяжёлое действие

Всплывающие окна

– создаёт развилку для навигации.

  • Меню
  • Модальные окна
  • Всплывающие подсказки

Механика меню

  • открывается при активации кнопки
  • выбор стрелками
  • активируется нажатием Spacebar или Enter
  • после активации закрывается

Механика модальных окон

Зацикливает внутри себя фокус.

Механика всплывающих подсказок

Внутри подсказки нет пригодных для фокуса элементов.

Перекрытие страницы

  • Использовать position:absolute в СSS-стилях.
  • Вынести содержимое окна в конец <body> и расположить его на странице при помощи скриптов.

Роли

– определяет то, чем логически является элемент.

…
  • абстрактные
  • образующие элементы управления
  • определяющие структуру документа

Абстрактные

  • select
  • input
  • command – интерактивный элемент
  • widget – выполняющий действие, но не получающий ввод
  • ...

Элементы управления

  • button
  • link
  • slider
  • ...

Роли живых областей

  • alert – область для одноразовых уведомлений
  • log – сообщения о добавлении новой информации
  • marquee – уведомления о частом, периодическом изменении текста
  • status
  • timer

alert

presentation

Элемент не играет никакой роли, а используется для красоты.

Области

  • banner
  • complimentary
  • main
  • contentinfo
  • navigation
  • ...

group

HTML5

Можно обойтись семантичными элементами








    
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    
Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus.








    
© 2011 Копирайт.

aria-*


 

 
Описание кнопки


 
 

     Войти
Demo: tooltip
Связность

Свойства элементов управления

  • aria-required {Boolean}
  • aria-readonly {Boolean}
  • aria-valuenow {Number}
  • aria-valuemin {Number}
  • aria-valuemax {Number}
  • ...

Состояния элементов управления

  • aria-checked {Boolean}
  • aria-disabled {Boolean}
  • aria-expanded {Boolean}
  • aria-invalid {Boolean}
  • ...

aria-invalid

«Живые» области

– области, содержимое которых обновляется после внешнего события.

  • aria-atomic {Boolean}
  • aria-live {off | polite | assertive}
  • aria-relevant {additions | removals | text | all}
Demo: w3c

aria-hidden


<span role="button" aria-controls="popup" aria-expanded="false"
      aria-label="кнопка"></span>
Demo

Инструменты разработчика

Заголовки и структура

Firefox Web Developer Toolbar
Semantic Structure from WebAIM

Заголовки и структура

Firefox Web Developer Toolbar
Semantic Structure from WebAIM

Chrome Accessibility Developer Tools
npm
Demo: audit

Опыт

Demo: Орфографическая ошибка
Demo: captcha

Минус

А зачем всё это?

Спасибо!

MDN Accessibility
WAI–ARIA
WCAG-2.0(Ru)
Web Accessibility Evaluation Tools
Introduction to accessibility mechanics
Colour Contrast Check