Остановите войну в Украине!

Под­бор­ка ссы­лок для зна­ком­ства с до­ступ­ной раз­ра­бот­кой

Редактура Вадим Макеев Василий Дудин

Когда изучаешь новую тему, сложно сразу понять, с чего начать. Особенно, если это активно развивающиеся технологии и подходы. Например, веб-доступность.

Здесь собраны ссылки на ресурсы по доступности, которые пригодятся веб-разработчикам. Они помогут сориентироваться в море информации в начале погружения в эту тему.

Отбирала их по нескольким критериям:

  • о них часто упоминают другие разработчики;
  • в текстах есть важная или актуальная информация;
  • эти источники помогли мне самой в изучении доступности.

Постаралась собрать здесь и ресурсы на русском языке, но пока их больше на английском. Как и с другими веб-технологиями, многие специалисты по доступности из англоговорящих стран.

НавигацияСкопировать ссылку

Основы основСкопировать ссылку

Про веб-доступность в общемСкопировать ссылку

Ресурсы 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.

Не призываю читать её от начала до конца, но туда стоит заглядывать в любой непонятной ситуации с разметкой.

Другие полезные ссылки:

WCAGСкопировать ссылку

WCAG (Web Content Accessibility Guidelines) — руководства по обеспечению доступности веб-контента. Содержат основные рекомендации о том, как сделать любой цифровой продукт доступным.

Может показаться, что это слишком сложно для начала. Но, поверьте, большинство статей и других гайдлайнов ссылается на WCAG, а автоматические инструменты генерируют отчёты на основе их критериев успешности.

У руководств несколько версий:

Ещё несколько полезных ресурсов:

  • 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.

Дополнительные ссылки:

Небольшая справка: Deque — американская компания, которая проводит аудиты, разрабатывает инструменты для тестирования доступности и занимается обучением.

Accessibility APIСкопировать ссылку

Для большего понимания того, что происходит под капотом у браузеров, полезно копнуть чуть глубже в сторону Accessibility API.

Больше всего технических подробностей содержится в рекомендациях W3C Core Accessibility API Mappings 1.1.

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

Дерево доступности (accessibility tree) похоже на DOM-дерево, только вместо HTML-элементов в него попадают их доступные роли и имена. Именно с ним взаимодействуют скринридеры, когда им нужно прочитать контент страницы.

AOMСкопировать ссылку

Если интересно, то дополнительно можно почитать про AOM (Accessibility Object Model, Объектная модель доступности). Она похожа на DOM, только нужна для доступа JavaScript к дереву доступности. Пока что это экспериментальный JavaScript API.

Информацию из первых рук найдёте в репозитории рабочей группы, которая разрабатывает этот API.

Вспомогательные технологииСкопировать ссылку

Это аппаратное или программное обеспечение, которое упрощает взаимодействие пользователей с контентом. Например, экранные лупы, увеличивающие размер интерфейса, выносные кнопки, специальные мышки или скринридеры.

В веб-доступности много внимания уделяется скринридерам. Это одна из самых популярных вспомогательных технологий, которой пользуются люди со слепотой, сниженным зрением и, на самом деле, не только они. Из статьи «What is a screen reader?» можно больше про них узнать.

У скринридеров есть особенности поддержки HTM-тегов, атрибутов и ARIA. Ссылки по этой теме собраны дальше в разделе про тестирование.

ПользователиСкопировать ссылку

Полезно не только знать о доступности в теории, но и понимать, каким пользователям она нужна больше всего. Это поможет лучше разобраться в барьерах и том, как именно они мешают реальным людям.

ЗаконыСкопировать ссылку

В какой-то момент на вас начнут со всех сторон наступать странные слова и аббревиатуры. ADA, Section 508, EN 301 549. Это всё связано с законами, которые регулируют доступность.

Чек-листыСкопировать ссылку

Они пригодятся для тестирования, аудита доступности или для быстрой проверки требований. Только помните, что такие списки не заменяют WCAG. Так что не полагайтесь только на них.

Самые популярные чек-листы:

Пишем доступный кодСкопировать ссылку

Официальные руководства W3CСкопировать ссылку

Другие руководстваСкопировать ссылку

Библиотеки доступных компонентовСкопировать ссылку

Доступные CSS и JavaScriptСкопировать ссылку

В основном в руководствах, гайдах и библиотеках компонентов упор делается на HTML. Это логично, но CSS и JS тоже могут влиять на доступность.

ДизайнСкопировать ссылку

Всегда можно правильно сверстать компонент, но без хорошего дизайна он не будет доступным. В этом разделе найдёте несколько ссылок о доступности в дизайне.

Инклюзивный дизайнСкопировать ссылку

Это практика проектирования продуктов или услуг таким образом, чтобы ими могло пользоваться как можно больше людей.

Советы по дизайнуСкопировать ссылку

ТестированиеСкопировать ссылку

Тестирование тоже важная часть доступной разработки, о которой полезно иметь общее представление.

КурсыСкопировать ссылку

Здесь собрала только пару популярных курсов, о которых часто упоминают. Больше ссылок на платные и бесплатные англоязычные курсы найдёте на Digital a11y.

Быть в курсеСкопировать ссылку

Если хотите быть в курсе событий из мира доступности и узнать об этом ещё больше, то вам могут помочь сообщества, подкасты, конференции, митапы и блоги.

СообществаСкопировать ссылку

Подкасты и стримыСкопировать ссылку

Конференции и митапыСкопировать ссылку

В мире проводится много конференций и митапов про доступность. Перечислю несколько мероприятий, которые можно посмотреть бесплатно онлайн.

Персональные блогиСкопировать ссылку

Много технический деталей прячется в персональных блогах.

  • 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 — ежемесячная рассылка.

Другие подборки ссылокСкопировать ссылку