Все современные сайты имеют динамически отрендеренные компоненты, все работают с асинхронными запросами, дизайнеры создают красивый и cложный UI, пытаются сделать его как можно проще и удобнее, но зачастую забывают что люди разные и некоторые из них лишены возможности пользоваться веб-сервисами в силу ограниченности своих физических способностей. Алексей Кобылинский рассказывает о том, как сделать интерфейс доступным для всех пользователей вне зависимости от сложности компонентов и интерфеса вцелом.

1. A11Y
Доступность
динамических веб
компонентов

2. Кто я? Что меня связывает с accessibility?

3. Пара слов о том как работают скринридеры
• JAWS, NVDA, VoiceOver…
• Анализ контента страницы
• Виртуальный курсор
• Горячие клавиши: для хедингов, списков, секций,
ссылок и т.д.

4. Пара слов о том как тестировать
• Родным скринридером для вашей системы
• Используя виртуальную машину, если надо
• Закрыть глаза

5. HTML phrasing, sectioning (секционный,
текстовый, встроенный и т.д.)
• Разделить страницу по секциям с заголовками
• Секция имеет role
• Секция, должна иметь хеддинг и aria-labeldby
• Секции желательно иметь абзац с описанием aria-
described-by

6. <header role=“banner”>
<a href=“/”
rel=“home”>Домашняя страница</a>
<nav role=“navigation”>
<a href=“/about”>О нас</a>
<a href=“/contact”>Контакты</a>
</nav>
</header>
<section role=“main”>
<h1>Заголовок страницы</h1>
<p>Походу это единственный параграф и самое
важное описание на странице.</p>
</section>
<footer role=“contentinfo”>
<p>Копирайт или дата или контакты.</p>
</footer>

7. HTML - основа доступного интернета
(accessibility)
• Правильный лейаут
• Правильные элементы
• Стили по умолчанию
• Встроенная поддержка клавиш для accessibility
• Например: кнопка - <button/>, а не <div/> или <a/>
• Картинка - <img/>, alt и title
• Акронимы, аббревиатуры, тире и дефисы

8. Несколько простых примеров

9. <button/>
• почему не <div/>
• почему не <a/>
• оба и основной поток и интерактивный контент
• скринридер ссылку называет ссылкой, а кнопку кнопкой
• кнопка не обязательно ссылается куда-то
• лучше на мобильном
• хорошо для СЕО

10. <img/>
• Альтернативный текст
• [alt] аттрибут
• [title] аттрибут
• [longdesc] аттрибут
• <figure/> элемент

11. CSS и JavaScript
• Если использованы неправильно - портят accessibility
• Контраст должен быть 4.5:1 минимум фона к текста
• Стили не должны сильно менять вёрстку, если только
не описано это правильными атрибутами
• Для функциональных элементов стараться избегать
<div/> а использовать HTML5 элементы
• JavaScript не должен прятать элемент в фокусе из
видимой области.

12. WAI-ARIA (Accessible Rich Internet Applications)
• aria-live
• aria-atomic
• aria-relevant
• role
• aria-expanded
• aria-labelldby
• aria-describedby
• aria-hidden

13. <div
role=“log”></div>
role

14. <div
role=“log”
aria-live=“polite”></div>
aria-live

15. <div
role=“log”
aria-live=“polite”
aria-relevant=“additions”></div>
aria-relevant

16. <div
role=“log”
aria-live=“polite”
aria-relevant=“additions”
aria-atomic=“false”></div>
aria-live

17. <ul>
<li>
<a
href=“#”
aria-expanded=“false”
aria-controls=“text”>Open me</a>
<p id=“text”>Дополнительное описание контента по
ссылке</p>
</li>
</ul>
aria-expanded | aria-controls

18. <section
role=“region”
aria-labelledby=“title”
aria-describedby=“description”>
<h2 id=“title”>Заголовок региона</h2>
<p id=“description”>Описание региона</p>
</section>
aria-labelledby | aria-describedby

19. <img
src=“some_cool_icon.png”
alt=“some cool icon”
aria-hidden=“true”/>
aria-hidden

20. Примеры динамических веб-компонентов
• Выпадающий элемент
• Индикатор загрузки (лоадер, спиннер)
• Бесконечный список
• Автоматический скролл

21. <ul>
<li aria-live=“polite”>
<a
id=“dropdown-link”
href=“#”
title=“Show details”
aria-controls=“dropdown-content”
aria-expanded=“false”>Show the content</a>
<div
id=“dropdown-content”
class=“visibly-hidden”
aria-labelledby=“dropdown-link dropdown-head”
role=“region”
tabindex=“-1”>
<h3 id=“dropdown-head”>Header</h3>
<p>Super useful descriptive hidden content.</p>
</div>
</li>
</ul>
Выпадающий элемент

22. <div
id=“notification”
aria-live=“assertive”></div>
Индикатор загрузки (классический пример)

23. Индикатор загрузки (классический
неправильный пример)
<div
id=“notification”
aria-live=“assertive”
role=“alert”></div>

24. <div
data-a11y-loader></div>
Индикатор загрузки (как сделать, чтобы это
работало везде)

25. <div
data-a11y-loader
role=“alert”>Контент загружается.</div>
как только начинается загрузка

26. <div
data-a11y-loader>Контент загружается.</div>
через ~250мс убираем аттрибут

27. <div
data-a11y-loader></div>
через ~250мс убираем текст

28. <div role=“region”>
<h2 id=“animals”> Список фруктов </h2>
<ul
role=“listbox”
aria-labelledby=“animals”
aria-live=“polite”
aria-relevant=“additions removals”>
<li
role=“option”
aria-setsize=“10”
aria-posinset=“5”> яблоки </li>
<li
role=“option”
aria-setsize=“10”
aria-posinset=“6”> апельсины </li>
</ul>
</div>
Бесконечный список

29. • aria-live и role не передвигают фокус
• автоскролл, должен не происходить, если убирает
фоксированый элемент со страницы, вместо этого,
должна добавляться кнопка
Автоматический скролл и его поведение

31. Спасибо за внимание!
Вопросы?
Алексей Кобылинский