SlideShare a Scribd company logo
1 of 31
Download to read offline
A11Y
Доступность
динамических веб
компонентов
Кто я? Что меня связывает с accessibility?
Пара слов о том как работают скринридеры
• JAWS, NVDA, VoiceOver…
• Анализ контента страницы
• Виртуальный курсор
• Горячие клавиши: для хедингов, списков, секций,
ссылок и т.д.
Пара слов о том как тестировать
• Родным скринридером для вашей системы
• Используя виртуальную машину, если надо
• Закрыть глаза
HTML phrasing, sectioning (секционный,
текстовый, встроенный и т.д.)
• Разделить страницу по секциям с заголовками
• Секция имеет role
• Секция, должна иметь хеддинг и aria-labeldby
• Секции желательно иметь абзац с описанием aria-
described-by
<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>
HTML - основа доступного интернета
(accessibility)
• Правильный лейаут
• Правильные элементы
• Стили по умолчанию
• Встроенная поддержка клавиш для accessibility
• Например: кнопка - <button/>, а не <div/> или <a/>
• Картинка - <img/>, alt и title
• Акронимы, аббревиатуры, тире и дефисы
Несколько простых примеров
<button/>
• почему не <div/>
• почему не <a/>
• оба и основной поток и интерактивный контент
• скринридер ссылку называет ссылкой, а кнопку кнопкой
• кнопка не обязательно ссылается куда-то
• лучше на мобильном
• хорошо для СЕО
<img/>
• Альтернативный текст
• [alt] аттрибут
• [title] аттрибут
• [longdesc] аттрибут
• <figure/> элемент
CSS и JavaScript
• Если использованы неправильно - портят accessibility
• Контраст должен быть 4.5:1 минимум фона к текста
• Стили не должны сильно менять вёрстку, если только
не описано это правильными атрибутами
• Для функциональных элементов стараться избегать
<div/> а использовать HTML5 элементы
• JavaScript не должен прятать элемент в фокусе из
видимой области.
WAI-ARIA (Accessible Rich Internet Applications)
• aria-live
• aria-atomic
• aria-relevant
• role
• aria-expanded
• aria-labelldby
• aria-describedby
• aria-hidden
<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”>Дополнительное описание контента по
ссылке</p>
</li>
</ul>
aria-expanded | aria-controls
<section
role=“region”
aria-labelledby=“title”
aria-describedby=“description”>
<h2 id=“title”>Заголовок региона</h2>
<p id=“description”>Описание региона</p>
</section>
aria-labelledby | aria-describedby
<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-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>
Выпадающий элемент
<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-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>
Бесконечный список
• aria-live и role не передвигают фокус
• автоскролл, должен не происходить, если убирает
фоксированый элемент со страницы, вместо этого,
должна добавляться кнопка
Автоматический скролл и его поведение
Спасибо за внимание!
Вопросы?
Алексей Кобылинский

More Related Content

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

Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайтаSergei Dubrov
 
Приёмы верстки страниц с использованием HTML + CSS
Приёмы верстки страниц с использованием HTML + CSSПриёмы верстки страниц с использованием HTML + CSS
Приёмы верстки страниц с использованием HTML + CSSDenis Latushkin
 
Web страницы.язык html
Web страницы.язык htmlWeb страницы.язык html
Web страницы.язык htmlГимназия
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10Technopark
 
Анконлист. Модуль 29.
Анконлист. Модуль 29.Анконлист. Модуль 29.
Анконлист. Модуль 29.EMPOpro
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.Igor Shkulipa
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
 
Корпоративное приложение на Rails
Корпоративное приложение на RailsКорпоративное приложение на Rails
Корпоративное приложение на RailsАндрей Колешко
 
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки
Cпецкурс 2014, занятие 9 (1 часть). Языки разметкиCпецкурс 2014, занятие 9 (1 часть). Языки разметки
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки7bits
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.EMPOpro
 
Наташа Арефьева — Семантика или смерть
Наташа Арефьева — Семантика или смертьНаташа Арефьева — Семантика или смерть
Наташа Арефьева — Семантика или смертьYandex
 
Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...
Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...
Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...zfconfua
 
Загрузка, обработка, хранение и отдача статики
Загрузка, обработка, хранение и отдача статикиЗагрузка, обработка, хранение и отдача статики
Загрузка, обработка, хранение и отдача статикиKirill Mokevnin
 
Архитектура Apache HAWQ Highload++ 2015
Архитектура Apache HAWQ Highload++ 2015Архитектура Apache HAWQ Highload++ 2015
Архитектура Apache HAWQ Highload++ 2015Alexey Grishchenko
 
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.DataArt
 
Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)xasima
 
Иван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияИван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияYandex
 

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

Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайта
 
Приёмы верстки страниц с использованием HTML + CSS
Приёмы верстки страниц с использованием HTML + CSSПриёмы верстки страниц с использованием HTML + CSS
Приёмы верстки страниц с использованием HTML + CSS
 
Web страницы.язык html
Web страницы.язык htmlWeb страницы.язык html
Web страницы.язык html
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10
 
Анконлист. Модуль 29.
Анконлист. Модуль 29.Анконлист. Модуль 29.
Анконлист. Модуль 29.
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
 
Корпоративное приложение на Rails
Корпоративное приложение на RailsКорпоративное приложение на Rails
Корпоративное приложение на Rails
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки
Cпецкурс 2014, занятие 9 (1 часть). Языки разметкиCпецкурс 2014, занятие 9 (1 часть). Языки разметки
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.
 
Наташа Арефьева — Семантика или смерть
Наташа Арефьева — Семантика или смертьНаташа Арефьева — Семантика или смерть
Наташа Арефьева — Семантика или смерть
 
Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...
Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...
Хранение, обработка и отдача статики с использованием \Zend\File. Опыт социал...
 
Загрузка, обработка, хранение и отдача статики
Загрузка, обработка, хранение и отдача статикиЗагрузка, обработка, хранение и отдача статики
Загрузка, обработка, хранение и отдача статики
 
Архитектура Apache HAWQ Highload++ 2015
Архитектура Apache HAWQ Highload++ 2015Архитектура Apache HAWQ Highload++ 2015
Архитектура Apache HAWQ Highload++ 2015
 
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
 
Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)
 
Иван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияИван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизация
 

More from OdessaFrontend

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19OdessaFrontend
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...OdessaFrontend
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19OdessaFrontend
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...OdessaFrontend
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18OdessaFrontend
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17OdessaFrontend
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17OdessaFrontend
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17OdessaFrontend
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OdessaFrontend
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16OdessaFrontend
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16OdessaFrontend
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16OdessaFrontend
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщикаOdessaFrontend
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15OdessaFrontend
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15OdessaFrontend
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15OdessaFrontend
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15OdessaFrontend
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14OdessaFrontend
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13OdessaFrontend
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13OdessaFrontend
 

More from OdessaFrontend (20)

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
 

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