Когда изучаешь новую тему, сложно сразу понять, с чего начать. Особенно, если это активно развивающиеся технологии и подходы. Например, веб-доступность.
Здесь собраны ссылки на ресурсы по доступности, которые пригодятся веб-разработчикам. Они помогут сориентироваться в море информации в начале погружения в эту тему.
Отбирала их по нескольким критериям:
- о них часто упоминают другие разработчики;
- в текстах есть важная или актуальная информация;
- эти источники помогли мне самой в изучении доступности.
Постаралась собрать здесь и ресурсы на русском языке, но пока их больше на английском. Как и с другими веб-технологиями, многие специалисты по доступности из англоговорящих стран.
Навигация Скопировать ссылку
- Основы основ
- Пользователи
- Законы
- Чеклисты
- Пишем доступный код
- Дизайн
- Тестирование
- Курсы
- Быть в курсе
- Другие подборки ссылок
Основы основ Скопировать ссылку
Про веб-доступность в общем Скопировать ссылку
Ресурсы WAI W3C Скопировать ссылку
Один из главных двигателей доступности — W3C WAI (W3C Web Accessibility Initiative). Это специальная рабочая группа W3C. У неё много базовых материалов по этой теме. Например, обзор основ доступности. В нём разобраны основные понятия, категории пользователей, которым критически важна доступность, как они пользуются сайтами, принципы доступности и другие важные вещи.
MDN Скопировать ссылку
На MDN есть отдельный раздел про доступность и вводное руководство. Многие материалы переведены на русский.
Google Web Fundamentals Скопировать ссылку
Google тоже писала вводные статьи про доступность. Например, о важности семантической вёрстки, про доступные стили и управление фокусом.
WebAIM Скопировать ссылку
Это некоммерческая американская организация при Университете штата Юта. Проводит аудит компаний, сертификацию и обучает другие команды доступности.
На её сайте тоже много базовых материалов. Ещё WebAIM каждый год проводит исследования пользователей с особыми потребностями. Например, из них можно узнать о распространённых проблемах в вебе или рейтинге скринридеров и операционных систем.
A Little Book of Accessibility Скопировать ссылку
Сборник советов и принципов доступности, которые повлияли на стратегию BBC.
Гайдлайны и стандарты Скопировать ссылку
У W3C WAI есть краткий обзор стандартов по доступности. Самые важные — спецификация HTML, WCAG и WAI ARIA.
HTML Скопировать ссылку
Во многих статьях, постах и руководствах встретите идею о том, что доступность начинается с семантики. А где самая полная информация об HTML-тегах и атрибутах? Конечно в стандарте HTML.
Не призываю читать её от начала до конца, но туда стоит заглядывать в любой непонятной ситуации с разметкой.
Другие полезные ссылки:
- HTML: A good basis for accessibility с MDN.
- Периодическая таблица HTML-тегов.
- HTML5 Doctor — на сайте есть список всех HTML-элементов и их краткое описание, а ещё статьи о хороших практиках.
- HTML5 Accessibility — доступность фич HTML5 в популярных браузерах.
- HTMHell — проект Мануэля Матузовича, который собирает примеры плохой и хорошей разметки из реальных проектов.
WCAG Скопировать ссылку
WCAG (Web Content Accessibility Guidelines) — руководства по обеспечению доступности веб-контента. Содержат основные рекомендации о том, как сделать любой цифровой продукт доступным.
Может показаться, что это слишком сложно для начала. Но, поверьте, большинство статей и других гайдлайнов ссылается на WCAG, а автоматические инструменты генерируют отчёты на основе их критериев успешности.
У руководств несколько версий:
- WCAG 2.1 — актуальна на момент выхода статьи, есть перевод на русский.
- WCAG 2.2 — будет принята до конца 2021.
Ещё несколько полезных ресурсов:
- How to Meet WCAG — справочник по критериям успешности и техникам WCAG. Поможет разобраться, что конкретно от вас хотят в руководствах.
- WCAG Guide — наглядные карточки с критериями успешности.
- Understanding the Web Content Accessibility Guidelines — руководство на MDN.
WAI ARIA Скопировать ссылку
WAI-ARIA (WAI Accessible Rich Internet Applications Suite) — рекомендации, которые описывают вспомогательные техники создания более доступного контента для скринридеров (программ чтения с экрана). Расширяет возможности HTML с помощью специальных атрибутов и ролей. В 2021 действует WAI-ARIA 1.1.
Дополнительные ссылки:
- Обзор WAI-ARIA на MDN.
- Руководство по основам ARIA на MDN.
- Периодическая таблица ролей ARIA 1.1.
- ARIA Spec for the Uninitiated — серия статей в блоге Deque, есть перевод первой части.
Небольшая справка: Deque — американская компания, которая проводит аудиты, разрабатывает инструменты для тестирования доступности и занимается обучением.
Accessibility API Скопировать ссылку
Для большего понимания того, что происходит под капотом у браузеров, полезно копнуть чуть глубже в сторону Accessibility API.
Больше всего технических подробностей содержится в рекомендациях W3C Core Accessibility API Mappings 1.1.
Дерево доступности Скопировать ссылку
Дерево доступности (accessibility tree) похоже на DOM-дерево, только вместо HTML-элементов в него попадают их доступные роли и имена. Именно с ним взаимодействуют скринридеры, когда им нужно прочитать контент страницы.
- The Accessibility Tree — вводная статья Google.
- Accessibility APIs: A Key To Web Accessibility — одна из самых подробных и популярных статей с разбором того, как работает доступность в браузерах.
- Accessibility API и доступность — статья на русском, в которой тоже разбирается дерево доступности.
- Список доступных имён и ролей HTML-элементов в дереве доступности Chrome.
AOM Скопировать ссылку
Если интересно, то дополнительно можно почитать про AOM (Accessibility Object Model, Объектная модель доступности). Она похожа на DOM, только нужна для доступа JavaScript к дереву доступности. Пока что это экспериментальный JavaScript API.
Информацию из первых рук найдёте в репозитории рабочей группы, которая разрабатывает этот API.
Вспомогательные технологии Скопировать ссылку
Это аппаратное или программное обеспечение, которое упрощает взаимодействие пользователей с контентом. Например, экранные лупы, увеличивающие размер интерфейса, выносные кнопки, специальные мышки или скринридеры.
- Список и обзор вспомогательных устройств для людей с глухотой и особенностями речи на сайте американской NIDCD (The National Institute on Deafness and Other Communication Disorders).
- Список вспомогательных технологий для людей со слепотой и сниженным зрением на сайте AFB (The American Foundation for the Blind).
В веб-доступности много внимания уделяется скринридерам. Это одна из самых популярных вспомогательных технологий, которой пользуются люди со слепотой, сниженным зрением и, на самом деле, не только они. Из статьи «What is a screen reader?» можно больше про них узнать.
У скринридеров есть особенности поддержки HTM-тегов, атрибутов и ARIA. Ссылки по этой теме собраны дальше в разделе про тестирование.
Пользователи Скопировать ссылку
Полезно не только знать о доступности в теории, но и понимать, каким пользователям она нужна больше всего. Это поможет лучше разобраться в барьерах и том, как именно они мешают реальным людям.
- Inclusive design in action — фильм из гайда Microsoft.
- Раздел о пользователях из гайда по доступности Сбербанка.
- Web Accessibility Perspectives Videos — видео с пользователями в разных ситуациях на сайте W3C.
- Videos of people with disabilities using tech — ещё одна подборка видео про пользователей вспомогательных технологий на Axess Lab.
Законы Скопировать ссылку
В какой-то момент на вас начнут со всех сторон наступать странные слова и аббревиатуры. ADA, Section 508, EN 301 549. Это всё связано с законами, которые регулируют доступность.
- Раздел про законы в статье о доступности на Википедии — краткий разбор законодательства о доступности в разных странах.
- Web Accessibility Laws & Policies — краткая информация W3C WAI о законах некоторых стран, которые регулируют доступность.
- Доступность и закон — статья на «Веб-стандартах» с обзором основных европейских, американских и российских законов в области доступности. Кстати, в 2020 в России был принят новый ГОСТ Р 52872-2019.
Чек-листы Скопировать ссылку
Они пригодятся для тестирования, аудита доступности или для быстрой проверки требований. Только помните, что такие списки не заменяют WCAG. Так что не полагайтесь только на них.
Самые популярные чек-листы:
Пишем доступный код Скопировать ссылку
Официальные руководства W3C Скопировать ссылку
- Обзор полезных ресурсов для разработчиков — базовые советы и подсказки по доступной разработке.
- Web Accessibility Tutorials — больше подробностей про то, как сделать доступные меню, изображения, таблицы, формы, карусели и структуру страниц.
- Index of ARIA Design Pattern Examples — примеры правильного использования ARIA в компонентах.
Другие руководства Скопировать ссылку
- A11ycasts — серия коротких видео Роба Додсона из Google про основы технической доступности.
- A Complete Guide To Accessible Front-End Components — серия коротких постов на Smashing Magazine. Разобраны полезные техники и инструменты для создания доступных компонентов.
- Accessibility for front-end developers — небольшой чек-лист в гайде американской Администрация общих служб с базовыми советами для разработчиков.
- Accessible to all — советы по доступной разработке на web.dev.
- Гайдлайн Сбербанка о доступности для веб-разработчиков.
- Веблайнд — рекомендации на русском о доступной разработке для людей с нарушениями зрения.
- 101 Digital Accessibility (a11y) tips and tricks — много практических советов о доступной разработке.
- Inclusive Components — серия статей Хейдона Пикеринга. Подробный разбор того, как правильно сверстать и задизайнить карточки, переключатели тем, тултипы, слайдеры, оповещения, таблицы, выпадающие секции, вкладки, меню и списки дел. На «Веб-стандартах» есть переводы части статей.
- Руководство по доступности на W3Schools — краткие советы о доступной разметке. Например, про ориентиры, заголовки, ссылки, кнопки и формы.
Библиотеки доступных компонентов Скопировать ссылку
- A11Y Style Guide — опенсорсная библиотека доступных паттернов с примерами разметки и демками доступных карточек, форм, навигации, заголовков, списков, ссылок «Читать дальше».
- Библиотека кода Deque — примеры доступных компонентов. Например, вкладок, слайдеров, каруселей и чекбоксов. Пока в бете.
- Компоненты из дизайн-системы GOV.UK.
- Компоненты из дизайн-системы правительства Новой Зеландии — можно выбрать формат сниппетов, например: HTML, Handlebars, React JavaScript или TypeScript.
- Компоненты из проекта «No Style Design System» — дизайн-система из книги «Form Design Patterns» Адама Сильвера. Можно посмотреть, как сделать доступно автозаполнение, поле для пароля с возможностью его показа или выбор даты.
- Accessible Components — репозиторий Скотта О’Хары на GitHub. Есть аккордеон, вкладки, переключатели, тултип, модальное окно, хлебные крошки, формы.
- Vuetensils — библиотека доступных Vue-компонентов.
- Chakra — библиотека доступных React-компонентов.
- Angular Material — доступные Angular-компоненты от Google.
Доступные CSS и JavaScript Скопировать ссылку
В основном в руководствах, гайдах и библиотеках компонентов упор делается на HTML. Это логично, но CSS и JS тоже могут влиять на доступность.
- CSS and JavaScript accessibility best practices — руководство на MDN.
- CSS Can Influence Screenreaders — Бен Майерс про все возможные ситуации, когда CSS может повлиять на скринридеры.
- The effect of CSS on screen readers — дополнение к посту Бена Майерса, которое сверяет: изменилась ли в 2021 году ситуация с CSS и доступностью.
- Modern CSS Upgrades To Improve Accessibility — как CSS помогает улучшить доступность.
Дизайн Скопировать ссылку
Всегда можно правильно сверстать компонент, но без хорошего дизайна он не будет доступным. В этом разделе найдёте несколько ссылок о доступности в дизайне.
Инклюзивный дизайн Скопировать ссылку
Это практика проектирования продуктов или услуг таким образом, чтобы ими могло пользоваться как можно больше людей.
- Accessibility, Usability, and Inclusion — W3C про разницу между доступностью, юзабилити и инклюзией.
- Inclusive Design Principles — общие принципы инклюзивного веб-дизайна.
- Гайд по инклюзивному дизайну Microsoft.
Советы по дизайну Скопировать ссылку
- Постеры про доступность — проект команды по доступности сайта британского правительства GOV.UK. Проиллюстрированы советы о том, как можно и как нельзя дизайнить для людей со сниженным зрением, глухотой, расстройствами аутистического спектра, дислексией, моторными и физическими особенностями и для пользователей скринридеров.
- Раздел с дизайн-паттернами на Smashing Magazine — статьи про паттерны инклюзивного дизайна: кнопки, слайдеры, аккордеоны, фильтры и много чего ещё.
- The Mental Health Patterns Library — библиотека доступных принципов и паттернов для людей с особенностями ментального здоровья.
- Манифест о доступности для людей с цветовой слепотой — базовые правила для доступного интерфейса с точки зрения цвета.
- Making Content Usable for People with Cognitive and Learning Disabilities — рабочие замени специальной группы Coga TF (Cognitive and Learning Disabilities Accessibility Task Force) из W3C о том, как сделать интерфейс доступным для людей с когнитивными особенностями.
- Доступность в дизайне — гайдлайн Романа Шамина, арт-директора Evil Martians, с подробностями о том, как создать доступную дизайн-систему, есть перевод на английский.
Тестирование Скопировать ссылку
Тестирование тоже важная часть доступной разработки, о которой полезно иметь общее представление.
- Accessibility best practices for screenreader testing — Шери Бирн-Хабер с кратким описанием основных принципов тестировании доступности.
- Web Accessibility Evaluation Tools List — список W3C WAI со всеми одобренными ей инструментами для оценки доступности.
- A Complete Guide To Accessibility Tooling — Ник Чан разбирает самые популярные инструменты для автоматического тестирования, проверки контрастности, линтеры и другие полезные тестерские штуки.
- Accessibility Support — аналог Can I Use в мире доступности. Можно проверить поддержку ARIA-атрибутов и ролей, а также HTML-элементов и атрибутов в разных скринридерах.
- База поддержки HTML-элементов PowerMapper Software, также на сайте есть базы по атрибутам, ARIA и WCAG.
- Гайдлайн BBC по тестированию в скринридерах — поэтапное описание, как проводить тестирование скринридеров на разных платформах.
- Шорткаты и жесты в скринридерах — есть JAWS, NVDA, Narrator, VoiceOver и TalkBack.
Курсы Скопировать ссылку
Здесь собрала только пару популярных курсов, о которых часто упоминают. Больше ссылок на платные и бесплатные англоязычные курсы найдёте на Digital a11y.
- Introduction to Web Accessibility — курс W3C, есть возможность пройти бесплатно с некоторыми ограничениями.
- Бесплатный курс по доступности от Google.
- Платный курс про цифровую доступность Валерии Курмак.
Быть в курсе Скопировать ссылку
Если хотите быть в курсе событий из мира доступности и узнать об этом ещё больше, то вам могут помочь сообщества, подкасты, конференции, митапы и блоги.
Сообщества Скопировать ссылку
- Статьи и посты о доступности на CSS-Tricks.
- Категория «Accessibility» на Smashing Magazine.
- Блог The A11Y Project — опенсорсный проект, посвящённый всем аспектам веб-доступности.
- Посты по тегу «a11y» на DEV Community.
- Статьи «Веб-стандартов» по тегу «a11y» — авторские статьи и переводы, да вы и сами знаете.
- Хаб про доступность на Хабре — авторские посты и переводы статей про доступную разработку.
Подкасты и стримы Скопировать ссылку
- A11y Rules Podcast.
- 13 Letters — подкаст об универсальном дизайне, законодательстве и лучших практиках цифровой доступности со специалистами из разных стран.
- Подскаст «Веб-стандарты» — не концентрируется только на доступной разработке, но новости и события из мира доступности обсуждаются почти в каждом выпуске.
- Accessibility Talks — стримы о доступности.
- Стримы Some Antics на Twitch и их записи на YouTube — проект Бена Майерса о доступной разработке в формате дискуссий с разработчиками, тестировщиками, дизайнерами и всеми, кто занимается доступностью.
- Technica11y — стримы про проблемы и хитрости, связанные с технической доступностью.
- Список других подкастов на The A11Y Project.
Конференции и митапы Скопировать ссылку
В мире проводится много конференций и митапов про доступность. Перечислю несколько мероприятий, которые можно посмотреть бесплатно онлайн.
- Inclusive Design 24 — 24-часовая онлайн-конференция об инклюзивном дизайне и доступности.
- Axe-con — конференция Deque о доступности для разработчиков, дизайнеров, менеджеров и всех неравнодушных.
- #a11yTO Conf — трёхдневная онлайн-конференция, состоящая из тщательно отобранного «плейлиста» из лекций, демо и лайтнингов.
- Accessibility Club Minsk — русскоязычный митап о доступности, часть международной сообщества Accessibility Club. Записи митапов на YouTube.
- Pitera11y_meetup — митап о доступности в Санкт-Петербурге. Плейлист записей докладов на YouTube.
- Список других событий на The A11Y Project.
Персональные блоги Скопировать ссылку
Много технический деталей прячется в персональных блогах.
- Tink — блог Леони Уотсон, директора TetraLogical, члена W3C Advisory Board и BIMA Inclusive Design Council, а также сопредседателя W3C Web Applications Working Group.
- Блог Скотта О’Хары, бывшего дизайнера, который сейчас специализируется на доступной разработке и UX.
- Блог Бена Майерса, веб-разработчика и адвоката доступности.
- Accessabilly — блог Мартина Менгеле, фронтенд-разработчика и консультанта по доступности.
- Блог Сары Суайдан, разработчицы пользовательских интерфейсов и дизайн-систем, автора статей и спикера. Блог не посвящён доступности, но она часто становится темой статей.
- Блог Эрика Бэйли, адвоката доступности и инклюзивного дизайна, мэйнтейнера The A11Y Project.
- HTML Accessibility — блог Стива Фолкнера, технического директора TPGi, ведущего разработчика Web Accessibility Toolbar, члена W3C Web Platforms Working Group и W3C ARIA Working Group.
- Блог Адриана Розелли, консультанта, автора статей, спикера, члена нескольких рабочих групп W3C. Например, W3C HTML Accessibility Task Force и W3C Accessible Rich Internet Applications Working Group.
Конечно, не обязательно начинать с этих блогов. Можете сами попробовать найти в Твиттере интересных вам разработчиков и следить за их блогами через RSS, рассылку или другим удобным способом.
Рассылка Скопировать ссылку
Здесь собраны рассылки, на которые я подписана. Другие можете поискать у The A11Y Project.
- Accessibility Weekly — еженедельная рассылка с полезными статьями, постами и новостями за неделю. Приходит по понедельникам.
- The WebAIM Newsletter — ежемесячная рассылка.
Другие подборки ссылок Скопировать ссылку
- Public Library — библиотека, собранная компанией Stark, которая занимается разработкой инструментов для проверки доступности.
- Digital Accessibility Resources на Digital A11y.
- Список ресурсов по доступности на The A11Y Project.
