Перевод статей «Web accessibility – Everything you need to know» и «How to learn web accessibility».
«Веб-доступность сайтов, инструментов и технологий означает, что они спроектированы и разработаны таким образом, чтобы их могли использовать люди с ограниченными возможностями».
— Введение в веб-доступность от w3.org
У некоторых людей может быть нарушение зрения. Возможно, им придется пользоваться вашим сайтом при помощи клавиатуры и скринридера (программы для чтения с экрана, которая зачитывает текст на вашем сайте пользователю). Если код вашего сайта не позволяет это сделать, эти люди вообще не смогут использовать ваш сайт.
Также у посетителей вашего сайта могут плохо работать руки и пальцы. Это может быть проблемой при использовании сенсорных устройств. Если на вашем сайте элементы, на которые нужно нажимать, мелкие и расположены близко друг к другу, люди с нарушениями моторики тоже не смогут пользоваться вашим сайтом.
В общем, сайт можно назвать доступным, если им может пользоваться любой человек, а для этого там должны быть учтены различные виды инвалидности.
От кого зависит доступность сайта?
Доступность сайта зависит от кода фронтенда. Это означает, что на нее влияют все, кто работает над фронтендом. В список входят:
- фронтенд (или full stack) разработчики
- дизайнеры
- создатели контента (авторы текста и изображений).
Больше всего на доступность сайта влияют разработчики. Они добавляют во фронтенд проекта намного больше кода, чем кто-либо другой. В результате и их работа влияет на доступность намного больше, чем работа всех остальных.
Кроме того, именно разработчики решают, как работа других людей добавляется во фронтенд. Например, создатель контента может предоставить какой-то текст, но в код его преобразуют разработчики. Автор текста может добавлять свои творения на сайт самостоятельно, но системы для этого настраивают разработчики.
И поскольку больше всего на веб-доступность влияют разработчики, они должны знать, что это такое и как делать веб-продукты доступными.
Все эти знания будут полезны и другим людям, в частности, дизайнерам и создателям контента, но в меньшей степени. Они могут либо изучить эту тему самостоятельно, либо попросить разработчиков обучить их тому, что им необходимо знать.
Мы предполагаем, что большинство наших читателей — разработчики, так что давайте рассмотрим, как разработчику научиться создавать доступные сайты и приложения.
Для начала изучите семантический HTML
Самое важное, что вы можете сделать для обеспечения веб-доступности, это использовать семантический HTML. Используя правильные элементы и атрибуты, вы уже делаете 80% того, что нужно для обеспечения доступности продукта.
Если ваша специализация — фронтенд, HTML вы должны уже знать. Но повторить и освежить знания никогда не помешает.
Обратите внимание на справочник по HTML-элементам от MDN. Эту страницу можно бегло просмотреть всего за несколько минут или же прочитать полностью минут за 20. Там перечислены все HTML-элементы с указаниями по использованию.
Если вам нужны дополнительные сведения о каком-либо из этих элементов, вы можете перейти по соответствующей ссылке и просмотреть страницу, посвященную этому элементу. Например, вот страница по элементу <body>.
Начинающие разработчики, возможно, еще не слышали о семантическом HTML. В таком случае я советую начать с ресурсов по веб-разработке для начинающих. После изучения основ можно будет заняться изучением темы веб-доступности.
Тестирование и практика
В изучении любого предмета большое значение имеет практика. Что касается доступности, практика состоит в том, чтобы попробовать пользоваться сайтом так, как будет пользоваться человек с ограниченными возможностями. Например:
- для навигации по сайту пользоваться только клавиатурой
- потреблять контент веб-страницы, пользуясь только скринридером (т. е. не просматривая страницу глазами)
- использовать на сайте инструменты для симуляции недостатков зрения.
Ничто не может превзойти личный опыт, так что будет полезно прочувствовать доступность своего творения на себе. Не обязательно проделывать все это каждый раз, но чем больше практики, тем лучше.
Ресурсы для изучения темы веб-доступности
После непременного изучения семантического HTML можно погрузиться в тему собственно доступности. По ней есть много хороших источников информации. Здесь я упомяну те, которыми сам пользовался.
Вводные видеокурсы
Я просмотрел два видеокурса и уверенно их рекомендую:
(Курсы платные, — прим. ред. Techrocks).
Эти курсы вводные, но они покрывают очень много тем, связанных с доступностью в вебе. Подозреваю, что если вы их просмотрите, то будете знать о доступности больше, чем большинство других фронтенд-разработчиков.
Если нужно выбрать между этими двумя курсами, я бы выбрал курс Купермана, он вроде бы немного шире охватывает тему. Второй курс более продвинутый и заточен на JavaScript-приложения.
Разумеется, вы можете просмотреть любые другие вводные видеокурсы.
MDN и web.dev
Вот страница MDN о доступности. Вот страница web.dev на эту же тему.
Это самые нужные сайты для веб-разработчиков.
В частности, на MDN очень тщательно рассматриваются вопросы доступности. Если вы — фронтенд-разработчик и хотите хорошенько изучить эту тему, я советую читать ресурсы MDN. Из них вы узнаете:
- о семантическом HTML
- о том, какие возможности у людей могут быть ограничены, и какие технологии могут помочь в каждом случае,
- как создавать пользовательские виджеты,
- о WAI-ARIA (Англ. Web Accessibility Initiative — Accessible Rich Internet Applications. Технологический стандарт, разрабатываемый Консорциумом Всемирной паутины для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями. — Википедия).
Информация на web.dev тоже очень хорошая, но не такая всеобъемлющая. Я бы сказал, она для начинающих, хотя и более подробная, чем уже упомянутые вводные видеокурсы.
Статьи WebAIM
(WebAIM (англ. Web Accessibility in Mind — «Держа в уме веб-доступность») — неприбыльная организация, занимающаяся решениями в сфере веб-доступности с 1999 года. Базируется в Университете штата Юта (США). — Прим. ред. Techrocks).
Статьи WebAIM даже подробнее, чем статьи MDN. Они вам отлично подойдут, если вы хотите:
- разобраться в мотивации к обеспечению доступности,
- узнать, какие бывают ограниченные возможности у людей и как эти люди пользуются веб-сайтами,
- очень тщательно изучить веб-доступность,
- разобраться в конкретных темах, связанных с веб-доступностью. Например, у них есть подробная статья об alt-тексте для изображений. Я больше нигде не видел ничего подобного.
Единственный недостаток статей WebAIM — в них мало примеров кода. Если вы хотите видеть примеры, MDN вам подойдет больше. Но если вы уже хорошо знаете HTML и JavaScript, вы вполне сможете реализовать концепции из статей WebAIM даже без примеров. В этом случае WebAIM — прекрасный выбор.
Другие источники
Некоторые люди предпочитают учиться по книгам. К сожалению, не могу ничего рекомендовать, потому что сам не читал книг по этой теме. Если вы читали и можете что-то посоветовать, — добро пожаловать в комментарии!
Дополнительно
Есть еще несколько вещей, которые можно изучить и которые, возможно, не слишком хорошо освещены в уже упомянутых источниках.
Accessibility statements
В некоторых странах (например, в Великобритании) обязательно публиковать на сайте accessibility statements (подробная информация о доступности сайта и о том, какой функционал сайта может помочь людям с ограниченными возможностями пользоваться этим сайтом, — прим. ред. Techrocks).
Даже если в вашей стране таких правил нет, во WCAG (руководство по обеспечению доступности веб-контента) можно прочитать много хороших доводов в пользу такой публикации.
Статья о разработке Accessibility Statement.
WAI-ARIA
Также стоит хорошенько изучить WAI-ARIA.
В этом стандарте много документов. Вам нужен WAI-ARIA authoring practices. В этом документе вы найдете пояснения и рекомендации по правильному применению ARIA. К тому же, он предназначен для разработчиков, так что читать будет не слишком сложно.
Этим документом можно пользоваться как справочником. То есть, читать от корки до корки не обязательно. Но стоит хотя бы просмотреть, чтобы в случае чего знать, где искать нужные сведения.
Пожалуй, для начала будет достаточно:
- прочесть вступительный раздел,
- почитать о нескольких паттернах проектирования и виджетах — это даст вам преставление о том, на что обращать внимание, если захотите в будущем создавать пользовательские виджеты,
- бегло просмотреть все остальное.
После этого можно будет обращаться к этому документу, как к справочнику.
Что дальше
Подпишитесь на экспертов в теме веб-доступности.
Именно эти люди занимаются исследованиями и постоянным улучшением сферы веб-доступности. Отслеживая их публикации, вы будете узнавать обо всех новостях из первых уст, не дожидаясь выхода официальных спецификаций. Также они могут рекомендовать различные полезные приемы, которые не войдут в спецификации (и о которых вы иначе даже не узнаете).
План обучения
В этой статье вы прочли о большом количестве различных ресурсов. На каких стоит остановить выбор? Это зависит от того, сколько вы хотите узнать, сколько времени у вас есть и как вы предпочитаете учиться.
Если вам нужно хорошее введение в тему, я рекомендую посмотреть один (или оба) видеокурса. На этом можно остановиться. После просмотра вы будете знать о доступности гораздо больше, чем большинство разработчиков. Но если вас не интересуют вводные курсы, этот шаг можно пропустить.
Если вы хотите узнать о доступности подробнее, просмотрите ресурсы MDN. Если вам нужно что-то еще более подробное, прочтите все статьи WebAIM.
Лично я изучил все эти ресурсы в указанном порядке и нашел их очень полезными. Но вы можете выбрать те, которые вам нравятся.
Кроме того, не обязательно изучать все сразу. Можно остановиться на чем-то одном, а позже вернуться и изучить что-то еще.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
