Home

Автор: Кристин Джеквони (Kristin Jackvony)
Оригинал статьи
Перевод: Ольга Алифанова

Web-доступность означает простоту использования сайта и его понимания людьми, имеющими визуальные, аудиальные, физические или когнитивные особенности. Знаете ли вы, что существуют специальные гайдлайны доступности для сайтов? Эти гайдлайны называются "Гайдлайны доступности веб-контента", или WCAG. Они были созданы Web Accessibility Initiative, частью Консорциума World Wide Web (W3C). Эти гайдлайны можно увидеть в этом кратком руководстве.

Для тех, кто столкнулся с ними впервые, они могут смотреться угрожающе – их так много! Но не отчаивайтесь – приступить к тестированию доступности действительно очень просто! В этой статье я покажу, как проверить доступность веб-страницы и внести два быстрых исправления, чтобы ваше приложение стало доступнее.

Самый простой способ провести аудит доступности вашего сайта – это применение инструмента WAVE. Это расширение доступно для Chrome, Firefox и Edge, и оно абсолютно бесплатно. Чтобы установить его, перейдите на https://wave.webaim.org/extension/ и выберите браузер, который планируете использовать. Как только оно установлено, оно станет доступным на панели инструментов вашего браузера. Для использования расширения перейдите к странице, которую хотите проверить. Затем кликните по расширению, чтобы активировать его. вы тут же получите ряд иконок на странице, показывающих вам, где вы соответствуете гайдлайнам, а где их нарушаете. При клике на иконках вы узнаете больше о гайдлайне, о котором идет речь, и получите ссылку на справочную страницу WCAG, а также ссылку, отправляющую вас напрямую в код.

Исправление багов доступности зачастую тоже очень простое дело! Вот два простых фикса, которые сможет внедрить любой, знакомый с HTML:

Добавление alt-текста к изображению

Когда сетью пользуются люди с нарушениями зрения, они обычно полагаются на программу, читающую с экрана. Она говорит им, какие элементы расположены на странице. Если на странице есть картинка без альтернативного текста, программа не сумеет ее описать. Все, что тут нужно сделать – это добавить альтернативный текст, описывающий содержание картинки. Вот пример картинки без alt-текста:

<img src=”/img/thinkingTesterLogo.png”>

Вот пример той же картинки с alt-текстом:

<img src=”/img/thinkingTesterLogo.png” alt=”Thinking Tester logo”>

Добавление настройки "for" для метки

Когда пользующийся экранным чтецом человек заполняет веб-форму, он должен знать, для чего нужны все поля ввода на форме. Просто метки недостаточно; настройка "for" делает назначение поля кристально ясным. Вот пример поля ввода с меткой без настройки "for":

<label>Email</label>

<input id=”email” placeholder=”Email”>

Вот так оно будет выглядеть с настройкой "for":

<label for=”email address”>Email</label>

<input id=”email” placeholder=”Email”>

Эти простые изменения никак не повлияют на визуальные аспекты страницы, но сильно помогут тому, кто пользуется экранным чтецом! И их так легко внести, что все, кто может печатать и создавать пулл-реквесты, могут это сделать. Многие другие изменения – например, правильность порядка заголовков – тоже легко внедряются.

В США более 7 миллионов человек пользуются экранным чтецом регулярно, и, конечно, такие программы широко используются во всем мире. Всего несколько простых изменений, и люди с нарушениями зрения получат куда более удобный продукт.

Обсудить в форуме