Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A11Y
Доступность
динамических веб
компонентов
Кто я? Что меня связывает с accessibility?
Пара слов о том как работают скринридеры
• JAWS, NVDA, VoiceOver…
• Анализ контента страницы
• Виртуальный курсор
• Горячи...
Пара слов о том как тестировать
• Родным скринридером для вашей системы
• Используя виртуальную машину, если надо
• Закрыт...
HTML phrasing, sectioning (секционный,
текстовый, встроенный и т.д.)
• Разделить страницу по секциям с заголовками
• Секци...
<header role=“banner”>
<a href=“/”
rel=“home”>Домашняя страница</a>
<nav role=“navigation”>
<a href=“/about”>О нас</a>
<a ...
HTML - основа доступного интернета
(accessibility)
• Правильный лейаут
• Правильные элементы
• Стили по умолчанию
• Встрое...
Несколько простых примеров
<button/>
• почему не <div/>
• почему не <a/>
• оба и основной поток и интерактивный контент
• скринридер ссылку называет ...
<img/>
• Альтернативный текст
• [alt] аттрибут
• [title] аттрибут
• [longdesc] аттрибут
• <figure/> элемент
CSS и JavaScript
• Если использованы неправильно - портят accessibility
• Контраст должен быть 4.5:1 минимум фона к текста...
WAI-ARIA (Accessible Rich Internet Applications)
• aria-live
• aria-atomic
• aria-relevant
• role
• aria-expanded
• aria-l...
<div
role=“log”></div>
role
<div
role=“log”
aria-live=“polite”></div>
aria-live
<div
role=“log”
aria-live=“polite”
aria-relevant=“additions”></div>
aria-relevant
<div
role=“log”
aria-live=“polite”
aria-relevant=“additions”
aria-atomic=“false”></div>
aria-live
<ul>
<li>
<a
href=“#”
aria-expanded=“false”
aria-controls=“text”>Open me</a>
<p id=“text”>Дополнительное описание контента...
<section
role=“region”
aria-labelledby=“title”
aria-describedby=“description”>
<h2 id=“title”>Заголовок региона</h2>
<p id...
<img
src=“some_cool_icon.png”
alt=“some cool icon”
aria-hidden=“true”/>
aria-hidden
Примеры динамических веб-компонентов
• Выпадающий элемент
• Индикатор загрузки (лоадер, спиннер)
• Бесконечный список
• Ав...
<ul>
<li aria-live=“polite”>
<a
id=“dropdown-link”
href=“#”
title=“Show details”
aria-controls=“dropdown-content”
aria-exp...
<div
id=“notification”
aria-live=“assertive”></div>
Индикатор загрузки (классический пример)
Индикатор загрузки (классический
неправильный пример)
<div
id=“notification”
aria-live=“assertive”
role=“alert”></div>
<div
data-a11y-loader></div>
Индикатор загрузки (как сделать, чтобы это
работало везде)
<div
data-a11y-loader
role=“alert”>Контент загружается.</div>
как только начинается загрузка
<div
data-a11y-loader>Контент загружается.</div>
через ~250мс убираем аттрибут
<div
data-a11y-loader></div>
через ~250мс убираем текст
<div role=“region”>
<h2 id=“animals”> Список фруктов </h2>
<ul
role=“listbox”
aria-labelledby=“animals”
aria-live=“polite”...
• aria-live и role не передвигают фокус
• автоскролл, должен не происходить, если убирает
фоксированый элемент со страницы...
Спасибо за внимание!
Вопросы?
Алексей Кобылинский
A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2
Upcoming SlideShare
Loading in …5
×

of

A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 1 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 2 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 3 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 4 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 5 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 6 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 7 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 8 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 9 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 10 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 11 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 12 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 13 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 14 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 15 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 16 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 17 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 18 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 19 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 20 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 21 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 22 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 23 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 24 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 25 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 26 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 27 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 28 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 29 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 30 A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2 Slide 31
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

A11Y: Доступность динамических веб компонентов | Odessa Frontend Meetup #2

  1. 1. A11Y Доступность динамических веб компонентов
  2. 2. Кто я? Что меня связывает с accessibility?
  3. 3. Пара слов о том как работают скринридеры • JAWS, NVDA, VoiceOver… • Анализ контента страницы • Виртуальный курсор • Горячие клавиши: для хедингов, списков, секций, ссылок и т.д.
  4. 4. Пара слов о том как тестировать • Родным скринридером для вашей системы • Используя виртуальную машину, если надо • Закрыть глаза
  5. 5. HTML phrasing, sectioning (секционный, текстовый, встроенный и т.д.) • Разделить страницу по секциям с заголовками • Секция имеет role • Секция, должна иметь хеддинг и aria-labeldby • Секции желательно иметь абзац с описанием aria- described-by
  6. 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. 7. HTML - основа доступного интернета (accessibility) • Правильный лейаут • Правильные элементы • Стили по умолчанию • Встроенная поддержка клавиш для accessibility • Например: кнопка - <button/>, а не <div/> или <a/> • Картинка - <img/>, alt и title • Акронимы, аббревиатуры, тире и дефисы
  8. 8. Несколько простых примеров
  9. 9. <button/> • почему не <div/> • почему не <a/> • оба и основной поток и интерактивный контент • скринридер ссылку называет ссылкой, а кнопку кнопкой • кнопка не обязательно ссылается куда-то • лучше на мобильном • хорошо для СЕО
  10. 10. <img/> • Альтернативный текст • [alt] аттрибут • [title] аттрибут • [longdesc] аттрибут • <figure/> элемент
  11. 11. CSS и JavaScript • Если использованы неправильно - портят accessibility • Контраст должен быть 4.5:1 минимум фона к текста • Стили не должны сильно менять вёрстку, если только не описано это правильными атрибутами • Для функциональных элементов стараться избегать <div/> а использовать HTML5 элементы • JavaScript не должен прятать элемент в фокусе из видимой области.
  12. 12. WAI-ARIA (Accessible Rich Internet Applications) • aria-live • aria-atomic • aria-relevant • role • aria-expanded • aria-labelldby • aria-describedby • aria-hidden
  13. 13. <div role=“log”></div> role
  14. 14. <div role=“log” aria-live=“polite”></div> aria-live
  15. 15. <div role=“log” aria-live=“polite” aria-relevant=“additions”></div> aria-relevant
  16. 16. <div role=“log” aria-live=“polite” aria-relevant=“additions” aria-atomic=“false”></div> aria-live
  17. 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. 18. <section role=“region” aria-labelledby=“title” aria-describedby=“description”> <h2 id=“title”>Заголовок региона</h2> <p id=“description”>Описание региона</p> </section> aria-labelledby | aria-describedby
  19. 19. <img src=“some_cool_icon.png” alt=“some cool icon” aria-hidden=“true”/> aria-hidden
  20. 20. Примеры динамических веб-компонентов • Выпадающий элемент • Индикатор загрузки (лоадер, спиннер) • Бесконечный список • Автоматический скролл
  21. 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. 22. <div id=“notification” aria-live=“assertive”></div> Индикатор загрузки (классический пример)
  23. 23. Индикатор загрузки (классический неправильный пример) <div id=“notification” aria-live=“assertive” role=“alert”></div>
  24. 24. <div data-a11y-loader></div> Индикатор загрузки (как сделать, чтобы это работало везде)
  25. 25. <div data-a11y-loader role=“alert”>Контент загружается.</div> как только начинается загрузка
  26. 26. <div data-a11y-loader>Контент загружается.</div> через ~250мс убираем аттрибут
  27. 27. <div data-a11y-loader></div> через ~250мс убираем текст
  28. 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. 29. • aria-live и role не передвигают фокус • автоскролл, должен не происходить, если убирает фоксированый элемент со страницы, вместо этого, должна добавляться кнопка Автоматический скролл и его поведение
  30. 30. Спасибо за внимание! Вопросы? Алексей Кобылинский

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

Views

Total views

321

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×