Доступный веб для всех

Доступность

Для пользователя

1. Понятный и удобный интерфейс
2. Максимально быстрое достижение цели
3. Доступ к продукту без барьеров

Для SEO

1. Поисковики любят семантику
2. И понятные интерфейсы
3. И удобные тоже (Google Mobile-Friendly Test)

Для разработчика

1. Понимание проблем доступности и умение их решать
2. Квалификация
3. Пользователи будут благодарны

Для бизнеса

1. Больше пользователей
2. Больше денег
3. Меньше проблем

Accessibility

Только разработчики ответственны за это

• Дизайнеры
• Контент-менеджеры
• Владельцы сайтов
• User Agent

Только эксперт может сделать сайт доступным

• Большинство техник легко применимы
• Нужно знать инструменты

Это дорого и у нас нет времени

• Немного времени на обучение базовым техникам
• Большинство задач решаются в HTML
• Дешево и красиво если делать сразу

Доступные сайты уродливые и скучные

• Нет
• Только текст !== доступность

Доступность нужна немногим

• Нету метрик для пользователей с ограничениями
• Доступность важна для всех

Программные решения

• Увеличение изображения на экране
• Экранный диктор
• Инвертирование цвета
• Повышение контраста

Чем мы можем помочь?

Чем мы можем помочь?

• Доступ с помощью клавиатуры
• Понятная навигация
• Легко читаемый текст
• Совместимость со вспомогательными технологиями

Как это сделать?

• Следовать стандартам и рекомендациям
• Использовать существующие инcтрументы
• Тестировать с реальными пользователями

Доступность из коробки

• <nav>
• <header>
• <main>
• <aside>
• <section>
• <footer>

Accessible Rich Internet Applications

Совместимость со вспомогательными технологиями

• Ориентиры
• Роли
• Состояния
• Свойства

Ориентиры ARIA

Размечаем структуру документа

• role="banner"
• role="navigation"
• role="main"
• ...

Роли ARIA

Описываем интерфейс сайта

• role="button"
• role="checkbox"
• role="menuitem"
• ...

Состояния ARIA

Задаем состояния отдельным элементам

• aria-disabled
• aria-hidden
• aria-invalid
• ...

Свойства ARIA

Поведение и описание элементов

• aria-label
• aria-live
• aria-controls
• ...

Видео

• Субтитры (WebVTT для HTML5 Video)
• Расшифровка
• Обертки для плееров

Аудио

• Расшифровка
• WebVTT для HTML5 Audio

• Getting Started With the Track Element

Документы (PDF)

• Скачать и прочитать

HTML5 Canvas

• Использовать по назначению
• DOM представление контента внутри <canvas>
• Нативные контролы (<input>)
• aria-live для оповещения об изменениях

Что нужно сделать?

• role="application" (не всегда)
• Управление атрибутами ARIA
• Если есть onclick, нужен onkeydown
• aria-live="polite" для сигнализирования об изменениях
• role="alert" для уведомлений
• tabindex="-1" на неинтерактивных элементах
• Element.focus() для изменения фокуса

Готовые решения

• ngAria
• jQuery Accessibility
• Dojo
• YUI
• Ext JS
• Bootstrap Accessibility Plugin

Много доступности — плохо

Экранный диктор

Он может показаться странным

• JAWS
• NVDA
• VoiceOver

Браузер

• IE8
• Firefox
• Safari

Реальные пользователи

• С опытом использования вспомогательных технологий
• С различными ограничениями и степенью осложнений

Инструменты в браузере

• Accessibility Developer Tools
• ARIA Validator
• ChromeVox
• WAVE Evaluation Tool
• Color Contrast Analyzer

Сервисы

• Tenon
• Tanaguru
• 508 Checker
• Contrast Ratio

Автоматизация

Автотесты покрывают лишь малую часть проблем

• grunt-accessibility
• grunt-tenon
• pa11y

Что почитать?

• Руководство по обеспечению доступности веб-контента (WCAG) 2.0
• WAI-ARIA Overview
• Фреймворк AngularJS не для сайтов
• BBC Mobile Accessibility
• Nomensa Accessibility
• Web Axe
• Accessibility tests
• Color Blindness
• Web developer rules for use of ARIA attributes on SVG1.1 elements
• The Accessibility Tree: A Training Guide

Доступный веб для всех

Роман Лютиков

• @roman01la
• accessibility.org.ua