Как сайт сделать доступным


Как сделать сайт доступным для незрячих и слабовидящих? / Хабр

Если проследить эволюцию создания сайтов и сервисов, то можно заметить, что сначала было важно, чтобы они хотя бы были и работали. Затем создатели стали задумываться о внешней красоте и привлекательности для клиентов, ну а потом постепенно стали ориентироваться и на удобство для пользователей.

Теперь же возник новый тренд — “доступность”. Ведь сейчас сайты просматривают не только с больших мониторов в спокойной обстановке, но и со смартфонов в трясущихся автобусах и ноутбуков в шумных кафе, а среди пользователей появляется все больше пенсионеров и даже людей с ограниченными возможностями.

Когда задумались о доступности?


В 1996 году был создан Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), и на одной из встреч был предложен черновик гайдлайнов для улучшения доступности веба. Инициатива получила поддержку таких крупных спонсоров, как Microsoft, IBM, Adobe, и сейчас все популярные браузеры имеют настройки доступности и поддержку разметки WAI-ARIA для предоставления возможности полноценного использования Интернета людям с физическими ограничениями (нарушения работы органов зрения и опорно-двигательного аппарата).

Сейчас существуют руководства для веба с целью повышения доступности контента: международный стандарт WCAG2.0 для пользователей с различными ограничениями здоровья (зрение, слух, моторика и т.д.) и российский национальный стандарт доступности веб-ресурсов для инвалидов по зрению ГОСТ Р 52872-2012. Они разрабатывались для людей с нарушениями здоровья, однако использование тех же принципов повысит уровень комфорта в работе с сайтом и для здоровых людей. Ведь люди могут просто устать или же читать сайт с маленького телефона с тусклым экраном, на котором плохо виден текст.

Экология доступности


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

1. Масштабируемая верстка


(5.1.7.7 ГОСТ Р 52872-2012: размер шрифта текста может быть изменен в пределах 200 процентов без применения вспомогательных технологий таким образом, что пользователю не нужно прибегать к горизонтальной прокрутке для прочтения строки при режиме отображения страницы во весь экран).

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

В качестве удачного примера использования масштабируемой верстки можно привести сайт Центрального Банка РФ. Масштаб сайта можно увеличить в браузере не только до 200%, но и до 500% без появления горизонтальной прокрутки.


На скриншоте: увеличение масштаба до 200%. Полосы прокрутки нет

2. Достаточная контрастность текста и фона


(5.1.7.3 ГОСТ Р 52872-2012: Визуальное отображение текста и изображения текста имеет коэффициент контрастности не менее 4,5:1).

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

Контрастность текстов можно проверить с помощью чекеров контрастности, например Colour Contrast Analyser, или расширений для браузера, например “Contrast Ratio Checker” для Chrome. Существуют даже онлайн-чекеры контрастности, не требующие установки на компьютер.


На сайте Пенсионного Фонда РФ основной текст имеет достаточную контрастность, 14:1.

Для дополнительного текста (подсказок, рекламных материалов) требования к контрастности чуть менее строгие.

3. Возможность работать с сервисом с помощью клавиатуры


(5.2.1.1 ГОСТ Р 52872-2012: Всей функциональностью контента можно управлять через интерфейс клавиатуры без каких-либо ограничений по времени нажатия на клавишу, за исключением случаев, когда вызываемая функция требует ввода с помощью других устройств, зависящего от направления движения пользователя, а не только от конечной точки. Это не запрещает и не должно препятствовать предоставлению возможностей ввода с помощью мыши и других способов в дополнение к клавиатуре).

Переключение между клавиатурой и мышкой — временны́е затраты, которые можно минимизировать, если корректно работает TAB и ENTER. Многие из нас пользуются клавиатурой для навигации, даже не задумываясь над этим.

Люди с нарушениями здоровья могут не пользоваться мышкой из-за проблем с мелкой моторикой. А незрячие люди могут пользоваться экранными дикторами — программами для озвучивания текста на экране. В таких случаях важно, чтобы на сайте корректно работал фокус (при нажатии на кнопку TAB выделялась следующая ссылка/кнопка, а также в строке состояния браузера отображалась ссылка, куда будет совершен переход).

Работа с клавиатурой на сайте хорошо реализована на сайте Госуслуг.


Госуслуги: при нажатии кнопки TAB фокус переключается последовательно на каждую кнопку/ссылку.

Если посмотреть на сайты иностранных коллег, например на сайте банка Barclays реализована возможность пропустить повторяющиеся элементы (верхнее меню) при управлении с клавиатуры. Она включается только по клавише TAB.


На скриншоте видно, что пропускается все сквозное верхнее меню и идет переход сразу к первой кнопке на странице.

Это ускоряет доступ к нужному контенту при управлении с клавиатуры при просмотре сайта.

Как можно заметить, большая часть требований — технические, относящиеся к верстке сайта .

Но об “экологии верстки” стали задумываться только недавно. Хотя о доступности веб-контента для лиц с ограничениями здоровья говорили еще в 1994 году, бурное развитие веба привело к тому, что сейчас хорошо сверстанные сайты с учетом рекомендаций для комфортного чтения — скорее исключения или “правила хорошего тона” серьезных веб-студий.

Что делать, если с версткой сайта все плохо? Панель комфортного чтения!


Хорошего эффекта можно добиться без исправления верстки всего сайта. Например, на многих государственных сайтах используется такое решение, как “Панель для слабовидящих”, которая решает вопрос с контрастностью и размером шрифта. С помощью нее можно добавить функции, которые удовлетворят потребности людей с ограниченными возможностями — например, возможность настроить отображение цвета на сайте поможет людям с дальтонизмом, а увеличение интервалов между буквами и строчками, а также настройка шрифта с засечками — людям с дислексией, для которых рядом стоящие буквы меняются при чтении местами.
Такая панель хорошо реализована на уже упоминавшемся выше сайте ПФРФ.

Также удачный вариант ее реализации — на сайте Росбанка. В ней используются иные настройки цветовой схемы, чем у ПФРФ.


Панель комфортного чтения на сайте Росбанка.

В 2018 году такая панель появилась и на сайте ВТБ.


Панель комфортного чтения на обновленном сайте ВТБ.

На сайте Пенсионного Фонда РФ есть несколько иные варианты настройки контрастности, а также встроен свой собственный “экранный диктор”, благодаря чему не требуется запуск дополнительных программ.


Панель комфортного чтения на сайте ПФРФ (с примененной настройкой контрастности)

Для установки подобной панели не обязательно иметь доступ к исходному коду сайта. Существуют подобные плагины и для популярных CMS, которые может установить практически каждый без особенных затрат, поскольку установка плагина осуществляется либо автоматически, либо требует не слишком трудоемких манипуляций пользователя с готовым скриптом. Например, можно использовать плагин Comfortable Reading (для WordPress и Joomla).


Пример настройки сайта с помощью плагина Comfortable Reading

Есть панель — нет проблем? Все не так просто!


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

1. Ограниченный функционал


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


Пример: сайт Генпрокуратуры РФ. Имеются настройки размера шрифта и три варианта цветовой схемы.

2. Отдельная версия сайта для слабовидящих


Версия для слабовидящих находится на отдельном URL. Также на ней может отсутствовать часть контента по сравнению с обычной версией. Это не самое удачное решение, поскольку нужно поддерживать две отдельных версии сайта, что ведет к дополнительным затратам. Такой вариант используется, например, на http://kremlin.ru/.

3. Проблемы работы с экранным диктором


На некоторых сайтах хорошо реализована панель для настроек (ПФРФ) или адаптивная версия (Госуслуги), но есть проблемы взаимодействия с программами экранных дикторов. Например, не озвучивается часть контента или сложно установить фокус на элемент при включенной программе диктора.

О проблемах работы интернет-банков и мобильных приложений с экранным диктором компания USABILTIYALB подробно рассказывала на банковском завтраке в сентябре 2017 года.

4. Версию для слабовидящих сложно найти даже зрячему человеку


Например, используются очень бледные, незаметные иконки, как на сайте Счетной палаты РФ:


Смогли бы вы сразу заметить иконку, если бы она не была выделена на скриншоте?

Иногда используются нестандартные пиктограммы, по внешнему виду которых сложно догадаться, что это версия для слабовидящих (например, сайт Конституционного суда).


Пример нестандартной иконки

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

Заключение


Мы видим, что развитие юзабилити и доступности на данный момент идет не столько со стороны бизнеса, сколько со стороны государства. Проблемы доступности активно обсуждаются и решаются в банковской сфере, при поддержке ЦБРФ.

1 января 2016 года вступил в силу Федеральный закон № 419-ФЗ «О внесении изменений в отдельные законодательные акты Российской Федерации по вопросам социальной защиты инвалидов в связи с ратификацией конвенции о правах инвалидов», и большинство государственных сайтов добавили версию для слабовидящих. Однако на некоторых из них такая версия отсутствует.

Это, например:

Совет Безопасности РФ http://www.scrf.gov.ru/
Верховный Суд РФ http://www.supcourt.ru/
Совет Федерации http://www.council.gov.ru/
Росстандарт http://www.gost.ru/

Доступность сайтов важна не только для государственных сайтов, но и для бизнеса. Следование рекомендациям по повышению уровня доступности уже поможет расширить аудиторию не только за счет лиц с инвалидностью, но и за счет улучшения пользовательских качеств сайта для широкой аудитории и нас с вами. Конечно, для принятия максимально эффективных мер необходимо провести аудит текущей версии сайта, составить ТЗ на верстку, соответствующую рекомендациям, или как минимум внедрить панель комфортного чтения.

По нашему мнению, в ближайшем будущем появятся и стандарты для панели для слабовидящих, и правила “хорошего тона” верстки будет соблюдаться все чаще и чаще!

10 советов, как сделать ваш сайт более доступным

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

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

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

Большинство руководств по обеспечению доступности веб-сайтов уже идут рука об руку с практикой разработки веб-сайтов. Просто прочтите это сообщение в блоге, в котором рассматриваются 10 быстрых и простых способов сделать сайт более доступным в 2020 году и в последующий период.

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

Свяжитесь с нами онлайн или позвоните по телефону 888-601-5359 , чтобы узнать больше!

Что такое доступность веб-сайта?

Доступность веб-сайтов направлена ​​на то, чтобы сделать каждый веб-сайт в Интернете доступным для всех. Почти каждый пятый человек в США живет с инвалидностью, что подчеркивает необходимость того, чтобы сайты стали доступными для пользователей с ограниченными возможностями или физическими недостатками.

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

Зачем делать сайт доступным?

Вы хотите сделать свой веб-сайт доступным по нескольким причинам, в том числе:

  • Предоставьте целевой аудитории равный доступ к вашему сайту, услугам и контенту
  • Защитите свою компанию от штрафов и судебных исков из-за недоступности веб-сайта
  • Продемонстрируйте приверженность вашего бренда обслуживанию всех членов вашей целевой аудитории
  • Развивайте свой бизнес, выходя на более широкий рынок и обслуживая его в рамках своей целевой аудитории

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

Как сделать ваш сайт доступным

Если вы готовы узнать, как сделать свой веб-сайт доступным, воспользуйтесь этими 10 советами:

1. Используйте значимые атрибуты заголовка

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

Не поможет, если атрибут заголовка совпадает с текстом ссылки, как в следующем примере:

   Портфолио   

Почему? Потому что для пользователей программ чтения с экрана это избыточно и не дает им никакой дополнительной ценности.

В приведенном выше примере, даже несмотря на то, что средства проверки веб-доступности и проверки по Разделу 508 не позволят вам пройти свои автоматические тесты без него, на самом деле лучше не использовать атрибут title.

Лучшим атрибутом заголовка для приведенного выше примера является:

   Портфолио   
2. Разместите важные интерактивные элементы выше веб-страницы.

Вот простое упражнение по обеспечению доступности в Интернете: определите важные гиперссылки и элементы управления пользовательским интерфейсом, к которым вашим пользователям нужен доступ на одной из ваших веб-страниц. Затем посчитайте, сколько раз вам нужно нажимать клавишу TAB, чтобы добраться до него.

Вы дошли до него достаточно быстро? Или надо было как сумасшедшее нажимать клавишу Tab? Удалось ли вам увидеть, какая гиперссылка элемента управления интерфейсом была в данный момент сфокусирована при нажатии клавиши Tab?

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

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

3. Не начинайте атрибуты заголовка одинаковым текстом

Часто встречаются элементы гиперссылок с атрибутами заголовка, которые выглядят следующим образом:

  Home   Продукты   Контакт  

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

Пользователи, использующие программы чтения с экрана, такие как JAWS, часто полагаются на атрибуты заголовка для поиска веб-ссылок на странице. В JAWS, например, есть функция для объединения списка ссылок на веб-странице, отсортированных в алфавитном порядке. Если атрибуты заголовка начинаются с одного и того же текста, труднее использовать функции поиска, встроенные в программы чтения с экрана.

4. Правильно используйте заголовки

Теги заголовков позволяют пользователям программ чтения с экрана переходить к интересующим их разделам. Заголовки на веб-странице - это контур веб-страницы; использование

сразу после элемента

обозначает раздел, который является частью предыдущего

.

Многие из нас пренебрегают заголовками, в том числе и я. В каждом отдельном случае, когда я неправильно использовал элементы заголовка, я не мог найти разумного объяснения этому - и вы тоже.

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

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

Но на сайтах с большим количеством контента, таких как тот, который вы сейчас просматриваете, форма комментария фактически находится где-то в середине структуры HTML, хотя визуально она находится прямо внизу веб-страницы. Без заголовков разделов, указывающих, где начинается веб-форма, пользователям программ чтения с экрана пришлось бы пробираться через большой объем контента, чтобы добраться до формы. В шести редакциях заголовок уровня 3 «Оставить комментарий» позволит пользователям программ чтения с экрана быстро перейти к нему.

5. Используйте четкие и содержательные заголовки страниц

Первое, с чем столкнется пользователь программы чтения с экрана сразу после полной загрузки веб-страницы, - это текст между тегами </code>. Худшее, что вы можете сделать, помимо отсутствия тега <code> <title> </code>, - это разместить их все одинаково на всех ваших веб-страницах. Это затрудняет для пользователей, которые полагаются на вашу разметку HTML, чтобы определить, на какой странице они находятся, и является ли ссылка, по которой они нажали, той же веб-страницей, на которой они были ранее, или нет.</p> <p> Если заголовки ваших страниц совпадают или у вас нет заголовков страниц, пользователям программ чтения с экрана всегда нужно будет прочитать содержимое, прежде чем они решат, что они находятся на веб-странице, на которой они хотят находиться. Заголовки страниц должны быть краткими и содержательными. </p> <p> Хорошие заголовки страниц, которые включают повторяющийся текст: </p> <pre> <head> <title> О нас - Наш магазин

   Все статьи: Наш магазин   
   Наш магазин: Главная   
6.Используйте пропустить навигацию

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

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

Пропустить навигацию - это просто ссылка в верхней части веб-страницы, при нажатии на которую вы попадаете в раздел содержимого. Вы можете скрыть эту ссылку от трудоспособных пользователей, переместив ссылку за пределы области просмотра браузера с помощью CSS.

Вот пример: предположим, что у вас есть структура HTML, указанная ниже, и вы хотите иметь навигацию с пропуском, которая позиционирует читателя в области основного содержимого ( div # content ).

   

Заголовок страницы

...

Вы разместите ссылку пропуска навигации прямо над неупорядоченным списком, например:

   Пропустить навигацию     

Заголовок страницы

...

Некоторые сайты решают оставить ссылку пропуска навигации видимой, но если вы предпочитаете скрыть ее от зрячих пользователей, вы можете использовать CSS для отступа ссылки за пределами области просмотра веб-браузера:

 #skipnav { позиция: абсолютная; верх:  -10000px ; } 

Обратной стороной вышеупомянутого метода является то, что, хотя он будет работать для пользователей программ чтения с экрана, он не поможет пользователям, которые не могут использовать мышь, поскольку они не смогут использовать клавишу Tab для перехода к переходу с пропуском навигации. ссылка на сайт.Улучшение описанного выше метода можно найти на WebAIM: ссылки, которые становятся видимыми при фокусе с клавиатуры.

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

WebAIM содержит очень подробное обсуждение пропуска навигации, которое включает в себя несколько приемов (с их плюсами и минусами), которые вам следует прочитать.

7. Обозначьте элементы формы

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

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

   id = "searchbox"  name = "searchbox "  type = "text" /> 

С помощью CSS вы можете стилизовать этот элемент метки в виде значка или скрыть его от обычного просмотра, вытолкнув его из области просмотра браузера, если это действительно необходимо.

8. Протестируйте свои веб-страницы с отключенными CSS и JavaScript

Один из самых простых способов определить, насколько удобен доступ к веб-сайту для пользователей, которые не видят контент на мониторе компьютера, - это отключить CSS и JavaScript. Зачем?

С помощью CSS мы можем размещать элементы где угодно, независимо от того, где они находятся в реальной объектной модели документа.

С помощью JavaScript мы можем управлять элементами страницы, скрывая, удаляя и показывая их в зависимости от действий пользователя.

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

9. «Посмотрите», каково это использовать вспомогательные технологии

Возможно, лучший способ полностью понять универсальный дизайн в Интернете - это увидеть, как реальный человек использует веб-сайт с вспомогательными технологиями. Если вы не знаете человека с какой-либо формой инвалидности, которая влияет на его способность пользоваться Интернетом, существует множество онлайн-тренажеров, которые помогут вам хотя бы частично получить представление о том, как вспомогательные технологии обрабатывают веб-сайт и взаимодействуют с ним.

Для моделирования программы чтения с экрана попробуйте WebAnywhere, веб-инструмент, созданный в результате сотрудничества Мичиганского и Рочестерского университетов. Если вы хотите почувствовать себя слепым и взаимодействовать с веб-сайтом: запомните несколько сочетаний клавиш, которые использует WebAnywhere. Перейдите на свой сайт с помощью WebAnywhere. Выключите монитор и отсоедините мышь. Наконец, попробуйте читать и взаимодействовать с веб-страницей, на которой вы находитесь.

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

Кроме того, существует множество инструментов, которые помогут вам проверить свою работу на соответствие общепринятым стандартам и рекомендациям по обеспечению доступности Интернета. Их много, и большинство хороших бесплатны. См. Статью: 10 инструментов для оценки доступности веб-дизайна.

10. Доступность сети не сводится к ухудшению общего пользовательского опыта

Последний совет, которым я хотел бы поделиться, - это скорее философская точка зрения на проектирование с учетом доступности Интернета.

Многие из нас думают, что достижение высокого уровня доступности в Интернете означает, что это происходит за счет общего / среднего пользовательского опыта. Это не . Речь идет о предоставлении нескольких точек доступа разного уровня сложности.

Я усвоил этот урок, глядя на комплексное игровое оборудование.

Я заметил, что речь идет не о снижении сложности препятствий на игровой площадке (например, показанной ниже), а о предоставлении нескольких точек доступа с разным уровнем сложности.

Изучите Jungle Jim ниже, который предоставляет своим пользователям несколько точек доступа.

Photo of an accessible playground equipment. Фото из APE

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

Какое значение имеет эта концепция для веб-дизайна?

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

Речь идет не о и не о , использующих Ajax, потому что программы чтения с экрана не могут анализировать асинхронные манипуляции с DOM клиентскими скриптами (например, изменение содержимого без перезагрузки страницы), речь идет о предоставлении пользователю объяснения, что страница будет обновляться при выполнении определенное действие, и они могут его не увидеть, или предложить им альтернативный опыт (например, Jungle Jim).

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

Подробнее о том, как сделать веб-сайт более доступным

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

Просмотрите следующие ресурсы, чтобы узнать больше о том, как сделать веб-сайт более доступным:

Введение в веб-доступность

У группы W3C Web Accessibility Initiative есть документ вводного уровня для тех, кто хочет узнать о доступности Интернета, но не знает, с чего начать.

WebAIM

WebAIM (Web Accessibility In Mind) продвигает универсальный дизайн в сети и содержит множество статей о доступности сети; Простое изучение дизайна сайта и исходного кода HTML / CSS может дать вам представление о том, что такое сайт, доступный в Интернете.

Погружение в доступность

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

Как люди с ограниченными возможностями используют Интернет

Документ W3C, который дает читателям обзор того, как люди с физическими недостатками используют Интернет.

Сделайте свой веб-сайт доступным с помощью WebFX

Доступный веб-сайт сегодня имеет решающее значение для бизнеса.Если вы не сделаете доступный веб-сайт, ваша компания рискует не только судебными исками и штрафами, но и шансом связаться со всеми членами вашей целевой аудитории. Разрешите своему бизнесу расти, создав доступный и удобный сайт.

Свяжитесь с нами онлайн или позвоните по телефону 888-601-5359 , чтобы узнать, как наши доступные услуги веб-дизайна могут помочь!

.

10 главных советов по обеспечению доступности вашего веб-сайта в 2020 году

Еще в 1970-х годах в отчете Всемирной организации здравоохранения было указано, что 10% населения мира жили с каким-либо видом инвалидности. Согласно сегодняшнему исследованию, эта цифра возрастает до 15%. Сюда входят:

- 466 миллионов человек с глухотой и потерей слуха.

- 1,3 миллиарда слепых или слабовидящих.

- 2-3% населения мира с когнитивными нарушениями.

Это мрачные факты, которые никто не любит слышать.

Я знаю, что нет, но, увы, я тоже являюсь частью этой статистики (слепой на один глаз и 25% дефектом на другом).

Вот почему я нашел тему «Советы по обеспечению доступности вашего веб-сайта» особенно важной для включения в Hosting Tribunal.

[bctt tweet = ”Доступность - это не только вопрос обслуживания инвалидов. Речь идет о том, чтобы сделать Интернет бесплатным и доступным для всех. ”Username =” ”]

В конце концов, в этом весь смысл его существования.

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

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

Что такое веб-доступность?

Проще говоря, онлайн-доступность - это искусство сделать ваш веб-сайт доступным и удобным для всех.Сюда входят люди с нарушениями зрения или слуха, когнитивными проблемами, физическими недостатками и даже пожилые люди. Эта широкая аудитория использует вспомогательные технологии, такие как программы чтения с экрана в Интернете, устройства распознавания речи, терминалы Брайля или альтернативные клавиатуры для просмотра веб-страниц. ?

Неправильно!

Фактически, колоссальные 70% веб-сайтов не соответствуют основным принципам , изложенным в Руководстве по обеспечению доступности веб-контента (WCAG).Честно говоря, эти стандарты были установлены в феврале 2017 года, не так давно. Но это не должно служить предлогом для пренебрежения нуждами людей, которым уже достаточно тяжело.

Почему доступность веб-сайта?

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

Вот хорошие новости:

Оптимизация страницы вашей компании для максимальной доступности не требует больших усилий и приносит массу ощутимых и нематериальных преимуществ, таких как:

- Повышение репутации вашего бренда

- Улучшение качества обслуживания клиентов

- Увеличение доли рынка

- Снижение юридических рисков

- Использование инновационных технологий

Эти возможности слишком хороши, чтобы их можно было упустить.

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

1. Выберите платформу для создания сайтов, поддерживающую доступность

Быстрое развитие систем с открытым исходным кодом обеспечило их достаточную универсальность, чтобы соответствовать рекомендациям по доступности в Интернете. WordPress, как самая популярная CMS, (неудивительно) хорошо подготовлена ​​для выполнения этой задачи. Однако другие рыночные конкуренты, такие как Joomla и Drupal, также отлично справляются со своей задачей.

Напротив, популярные платформы с закрытым исходным кодом, такие как Squarespace и Blogger, предлагают значительно меньшую доступность.Разработчики этих инструментов ориентированы на совершенно другую аудиторию, и оптимизация страниц для людей с ограниченными возможностями кажется малой в их списке приоритетов.

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

Сообщество WordPress играет активную роль в разработке и улучшении надстроек WP. Их все больше беспокоит, как реализовать веб-доступность, и это, безусловно, видно по всем новым плагинам и темам, которые хорошо оснащены для этой задачи.В WordPress также есть отдельная «команда специальных возможностей», которая помогает разработчикам в работе над основными обновлениями.

Поговорим о приверженности!

Joomla была королем CMS до того, как WordPress пришел к власти. И это не потому, что Joomla ухудшилась - просто WP развивался так быстро, что было невозможно угнаться за его темпами. Тем не менее, вторая по популярности система управления контентом хорошо разбирается в модификациях доступности. Вы можете легко реализовать доступный код для основных элементов и оптимизации темы.Просто убедитесь, что ядро ​​шаблона восприимчиво к таким изменениям, и все готово.

Drupal обычно обслуживает более технически дружелюбную аудиторию, но это не означает, что доступность отходит на второй план. Приложение для веб-строительства полностью совместимо с WCAG 2.0 и предлагает обширную документацию по внедрению этих стандартов. Последнее обновление ядра Drupal 8 сделало шаг вперед, добавив улучшения в разметку HTML5 и ARIA (о них я расскажу подробнее ниже).

Любая из трех платформ идеально подходит для начала, но как насчет всех веб-мастеров, которые уже управляют сайтом? Не волнуйтесь, ребята, я о вас много не забыла.Вот несколько инструментов, которые позволяют проверить, насколько доступен ваш веб-сайт прямо сейчас:

  • WAVE (Инструмент оценки доступности веб-сайта) - разработан организацией WebAIM. Включает онлайн-проверку и расширения Mozilla / Chrome.
  • SortSite - запускает ваш веб-сайт в соответствии с рекомендациями WCAG 2.0 и определяет приоритетность возможных проблем. Доступно в виде настольного или веб-приложения.
  • A11Y Compliance - разработан Бюро по обеспечению доступности Интернета и охватывает все последние стандарты, включая раздел 508 Закона об американцах с ограниченными возможностями (ADA).Поддерживает стандартные разметки сайтов, такие как CSS, HTML, XHTML, SVG, PDF и другие.

2. Используйте семантическую разметку

Когда вы пишете для широкой аудитории, вы всегда должны помнить о удобочитаемости, чтобы текст хорошо читался и нес четкое значение. То же самое, так сказать, «за кадром». Правильная маркировка основных элементов контента имеет решающее значение, когда речь идет о том, чтобы сделать их понятными для читателей, которые не могут полагаться на визуальные подсказки.

К счастью, HTML5 предоставляет все решения для оптимизации меток ваших объектов.Давайте посмотрим на ключевую семантическую разметку и то, как она помогает сделать наш контент более читаемым:

  • - определяет новый раздел в содержании. Обычно начинается с нового заголовка.
  • <статья>
.

Введение в веб-доступность | Инициатива веб-доступности (WAI)

Резюме

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

Обеспечение доступности Интернета приносит пользу отдельным лицам, компаниям и обществу. Международные веб-стандарты определяют, что необходимо для доступности.

Содержание страницы

Доступность в контексте

Сила Интернета в его универсальности.
Доступ для всех, независимо от инвалидности, является важным аспектом.

Тим Бернерс-Ли, директор W3C и изобретатель World Wide Web

Сеть изначально разработана для работы для всех людей, независимо от их оборудования, программного обеспечения, языка, местоположения или способностей. Когда Интернет достигает этой цели, он становится доступным для людей с различным слухом, движением, зрением и когнитивными способностями.

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

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

Что такое веб-доступность

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

  • воспринимать, понимать, перемещаться и взаимодействовать с Интернетом
  • внести свой вклад в Интернет

Доступность в Интернете включает все ограничения, влияющие на доступ в Интернет, в том числе:

  • слуховой
  • познавательный
  • неврологический
  • физический
  • речь
  • визуал

Доступность Интернета также полезна людям без инвалидности , например:

  • человек используют мобильные телефоны, смарт-часы, смарт-телевизоры и другие устройства с маленькими экранами, разными режимами ввода и т. Д.
  • пожилых людей с изменением способностей в связи со старением
  • человек с «временной инвалидностью», например с переломом руки или потерянными очками
  • человек с «ситуативными ограничениями», например, при ярком солнечном свете или в среде, где они не могут слушать аудио
  • человек, использующих медленное Интернет-соединение или имеющих ограниченную или дорогую полосу пропускания

7-минутный видеоролик с примерами того, как доступность важна для людей с ограниченными возможностями и полезна для всех в различных ситуациях, см .:
Перспективы веб-доступности Видео (YouTube)

Дополнительная информация о том, что такое доступность

Доступность важна для людей, бизнеса и общества

Интернет становится все более важным ресурсом во многих аспектах жизни: образование, занятость, правительство, торговля, здравоохранение, отдых и т. Д.Очень важно, чтобы Интернет был доступен для обеспечения равного доступа и равных возможностей для людей с различными способностями. Доступ к информационным и коммуникационным технологиям, включая Интернет, определен как основное право человека в Конвенции Организации Объединенных Наций о правах инвалидов (КПИ ООН).

Интернет предлагает возможность беспрецедентного доступа к информации и взаимодействия для многих людей с ограниченными возможностями. То есть барьеры доступности печатных, аудио- и визуальных средств массовой информации можно гораздо легче преодолеть с помощью веб-технологий.

Доступность поддерживает социальную интеграцию людей с ограниченными возможностями, а также других лиц, например:

  • пожилые люди
  • человек в сельской местности
  • человек в развивающихся странах

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

Доступность в сети требуется по закону во многих ситуациях.

Важна дополнительная информация о доступности

Обеспечение доступности Интернета

Веб-доступность зависит от нескольких компонентов, работающих вместе, включая веб-технологии, веб-браузеры и другие «пользовательские агенты», инструменты разработки и веб-сайты.

W3C Web Accessibility Initiative (WAI) разрабатывает технические спецификации, руководства, методы и вспомогательные ресурсы, описывающие решения для обеспечения доступности.Они считаются международными стандартами доступности Интернета; например, WCAG 2.0 также является стандартом ISO : ISO / IEC 40500.

Подробнее о том, как сделать Интернет доступным

Как сделать ваш веб-сайт доступным

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

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

Подробнее о том, как сделать ваш веб-сайт доступным

Оценка доступности

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

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

Дополнительная информация об оценке доступности

Примеры

Альтернативный текст для изображений

Изображения должны включать эквивалентный альтернативный текст (замещающий текст) в разметке / коде.

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

Если предоставляется эквивалентный замещающий текст, информация доступна для слепых, а также для людей, отключающих изображения (например, в областях с дорогой или низкой пропускной способностью). Он также доступен для технологий, которые не видят изображения, например для поисковых систем.

Ввод с клавиатуры

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

Расшифровка аудиозаписей

Так же, как изображения недоступны для людей, которые не видят, аудиофайлы недоступны для людей, которые не слышат. Текстовая расшифровка делает аудиоинформацию доступной для глухих или слабослышащих людей, а также для поисковых систем и других технологий, которые не слышат.

Для веб-сайтов легко и относительно недорого предоставлять стенограммы.Существуют также службы транскрипции, которые создают текстовые расшифровки в формате HTML.

Другие примеры

Для получения дополнительной информации

W3C WAI предоставляет широкий спектр ресурсов по различным аспектам стандартов веб-доступности, обучения, тестирования / оценки, управления проектами и политик. Мы рекомендуем вам изучить этот веб-сайт или просмотреть список ресурсов WAI.

Помогите улучшить эту страницу

Поделитесь своими идеями, предложениями или комментариями по электронной почте в общедоступный список wai-eo-editors @ w3.org или через GitHub.

Вернуться к началу .

Как сделать веб-сайт доступным для всех [с 6 основных шагов]

Китон Роббинс

12 июня 2019 г.

Вы чувствуете необходимость сделать свой веб-сайт доступным для людей с ограниченными возможностями, но не знаете, где начать?

Хорошие новости для вас. Вам просто нужно внести несколько небольших изменений в свои веб-страницы (и изображения), чтобы вывести их из темноты.

В конце концов, в мире один миллиард человек страдает каким-либо видом инвалидности.Так что, возможно, будет хорошей идеей повысить скорость вашего сайта для 15% населения мира.

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

В этой статье мы поможем вам:

  • Узнать о правилах доступности веб-контента
  • Понимать шесть основных навыков (включая замещающий текст для изображений), которые можно использовать для улучшения доступности вашего веб-сайта
  • Рисунок что такое программа чтения с экрана и как она работает
  • Выделите основные способы, которыми веб-сайты злоупотребляют некоторыми замечательными доступными веб-инструментами
  • Оставьте вам несколько инструментов для оценки и дальнейшего улучшения доступности вашего веб-сайта

Веб-контент Рекомендации по обеспечению доступности

В мире веб-содержимого и доступности Рекомендации по обеспечению доступности веб-содержимого предлагают стандарты для всех разработчиков и дизайнеров.Эти рекомендации, чаще всего называемые WCAG, были разработаны Консорциумом всемирной паутины (W3C) и их инициативой по обеспечению доступности Интернета. WCAG широко считается международным стандартом веб-доступности.

Руководящие принципы постоянно пересматриваются, чтобы обеспечить их соответствие общепринятым практикам.

WCAG предназначен для:

  • разработчиков веб-контента
  • разработчиков инструментов веб-авторинга
  • разработчиков инструментов оценки веб-доступности
  • Другим лицам, нуждающимся в стандарте веб-доступности или мобильной доступности

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

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

6 основных навыков

Итак, как выглядит включение соображений доступности на ранней стадии процесса? Это проще, чем вы думаете.

Фил Крагнес, менеджер по размещению компьютеров в Университете Миннесоты, вместе со своей командой разработал надежный веб-сайт, основанный на шести основных навыках для повышения доступности вашего веб-сайта, под названием Accessible U.

Шесть основных навыков включают:

  1. Заголовки и структура документа
  2. Гиперссылки
  3. Подписи к видео
  4. Маркеры и нумерованные списки
  5. Цвет и контраст
  6. Альтернативный текст изображения

Фил имеет степень в области когнитивной психологии от Университет Карнеги-Меллона, магистр экспериментальной психологии: человеческая память, обучение и познание из Университета Нью-Мексико, и он сам изучил HTML, CSS, JavaScript и jQuery.

Он также потерял зрение из-за диабета в средней школе и получил двойную ампутацию ниже колена.

Фил знает по личному и профессиональному опыту, как важно не ставить цель вашего веб-сайта «соответствовать рекомендациям по доступности».

«Это первое, что я пытаюсь донести до людей. Если вы просто пытаетесь выполнить рекомендации, вы не создаете страницу со специальными возможностями. Я могу сделать страницу, соответствующую WCAG, которая не будет использоваться или недоступна. Соответствие не означает доступности.Но если вы сделаете его доступным, он будет соответствовать требованиям ».

«Это действительно просто, и это хорошо. [Однако] люди не знают, что в некоторых случаях это нужно делать », - говорит Фил.

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

Если вы ищете что-то более глубокое, Фил также создал отличный ресурс для дизайнеров и разработчиков под названием Inclusive By Design.

Доступные полнофункциональные Интернет-приложения

Еще одним важным открытием для веб-доступности стало создание многофункциональных доступных Интернет-приложений, обычно называемых ARIA.

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

ARIA позволяет пользователю расширять HTML, добавлять новые атрибуты и многое другое. При правильном использовании ARIA поддерживает лучшее взаимодействие с пользователем, в первую очередь с нестандартными виджетами и элементами управления (например, с.грамм. ползунки, древовидные виджеты, сетки данных, электронные таблицы, сложные меню, панели вкладок и т. д.). В ARIA есть множество отличных виджетов и элементов управления, которые разработчик может использовать для создания и улучшения доступности.

Освоение виджетов и элементов управления ARIA - ключ к созданию впечатляющих впечатлений от просмотра пользователями вашей страницы.

Устройства чтения с экрана

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

Программа чтения с экрана - это программное обеспечение, которое интегрируется непосредственно в операционную систему компьютера (Mac, устройства iOS, Windows и т. Д.).Программа чтения с экрана преобразует текст в речь и обеспечивает компьютеризированный голос, который сканирует и читает веб-страницы для пользователя.

Хотя трудно найти глобальные цифры общего числа пользователей программ чтения с экрана, Джаред Смит и его команда из WebAIM собрали интересную статистику.

Джаред - заместитель директора WebAIM, некоммерческой консалтинговой компании по вопросам доступности Интернета, базирующейся в Центре людей с ограниченными возможностями при Университете штата Юта в Логане, штат Юта.

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

Они также ежегодно проводят всесторонние опросы сообщества инвалидов по различным вопросам доступности Интернета.

Из 1792 пользователей программ чтения с экрана, опрошенных в ходе опроса в октябре 2017 года, 89,2% (1585 респондентов) заявили, что используют программу чтения с экрана из-за инвалидности. Однако 10,9% (192 респондента) заявили, что у них нет инвалидности.

Что касается типов инвалидности, использующих программы чтения с экрана, 75,8% (1358 респондентов) были слепыми, 20,4% - слабовидящими / слабовидящими и 5% (90 респондентов) глухими / слабослышащими.

Как звучит недоступный веб-сайт

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

Если ваш веб-сайт недоступен, возможно, вы создаете интерфейс, очень похожий на тот, который мы только что описали.

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

Распространенные ошибки доступности сети

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

Джаред, имеющий степень магистра в области учебных технологий, провел 20 лет, обучая тысячи разработчиков по всему миру веб-дизайну, разработке и доступности.

Неправомерное использование альтернативного текста для изображений является для него основным предметом спора.

«Это один из основополагающих аспектов доступности. Это невероятно эффективно для пользователей с нарушениями зрения. В хорошо составленном альтернативном тексте есть много нюансов. В некотором смысле альтернативный текст - одна из самых сложных вещей, которым мы учим, [но] это также один из аспектов доступности, которым чаще всего пренебрегают.Хотя мы говорили об этом еще в 1999 году, - говорит Джаред.

Вот объединенный список Джареда и Фила нескольких способов, которыми дизайнеры, разработчики и авторы веб-страниц злоупотребляют инструментами, чтобы сделать страницы доступными в Интернете:

  • Неправильное использование тегов заголовков
  • Веб-сайты, предназначенные для взаимодействия с строго касанием или мышью
  • Отсутствие или несоответствующее использование областей ориентиров в ARIA
  • Длинные абзацы замещающего текста
  • Отсутствие присвоения изображениям имени файла и сохранение длинного пути к изображениям Google (например,грамм. 4b7aa1b4a357de003932783f4d5ddeb0738856b2_web-accessibility-cover)
  • Подробное графическое описание диаграммы / графика вместо описания основных моментов (например, диаграмма, показывающая взаимосвязь между упражнениями и продолжительностью сна)
  • Чрезмерное использование словаря ARIA (загрузка дополнительного содержимого ARIA HTML поверх плохо спроектированная веб-страница), приводит к очень медленному взаимодействию с пользователем
  • Отсутствие тестирования с помощью ARIA (например, когда кто-то с программой чтения с экрана пытается взаимодействовать с приложением или страницей после разработки)
  • Разработчики, не соблюдающие спецификации ARIA (например,грамм. неправильное использование разметки и кода)

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

Оценка доступности Интернета

Итак, если большинство веб-сайтов просто сосредоточены на том, чтобы соответствовать требованиям и злоупотреблять доступными им доступными веб-инструментами, то как мы в целом делаем то, что делаем Интернет доступным для всех в 2019 году?

По словам Фила, доступность Интернета «не сильно улучшилась.

«Я бы поставил ей либо C +, либо B-», - говорит он. «Есть сайты, на которые я попадаю, которые совершенно непригодны для использования, но это довольно редко. Альтернативный текст для изображений - это все еще одна из самых больших наклеек ».

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

«Это то, о чем мы часто спрашиваем в наших опросах, которые мы проводим среди пользователей с ограниченными возможностями.Мы спрашиваем: «Как вы думаете, доступность Интернета стала лучше, хуже или не изменилась за последний год?» Среди людей с ограниченными возможностями общее мнение, что ситуация улучшается, - говорит Джаред.

Инструмент оценки доступности Интернета

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

Джаред и его блестящая команда из WebAIM разработали инструмент оценки веб-доступности (WAVE). WAVE - это инструмент, помогающий веб-разработчикам, веб-мастерам или авторам сделать их веб-контент более доступным. Он использовался для оценки доступности миллионов веб-страниц.

Инструмент невероятно прост в использовании. Вы просто вводите адрес веб-страницы и отправляете форму. Затем вам будут представлены некоторые встроенные значки и индикаторы, представляющие информацию о доступности этой выделенной части веб-страницы.

Другие ресурсы по обеспечению доступности в Интернете:

  • Хотите понять, как лучше взаимодействовать с программами чтения с экрана? Эта статья о маркировках и связях ARIA от команды разработчиков веб-сайтов в Google - это то, с чего нужно начать.
  • Khan Academy создала замечательный инструмент Tota11y, чтобы показать вам, как ваш сайт выглядит для программ чтения с экрана. Это обеспечивает контраст и высветит другие проблемы соответствия. Его можно добавить на ваш сайт с помощью всего одной строчки кода.
  • Хотите знать, что радует ваших пользователей с ограниченными возможностями? Хотите еще несколько быстрых тестов и советы для рассмотрения? Сайт проекта A11Y является обязательным к посещению ресурсом.

Какие области вы определили, которые необходимо обновить, чтобы улучшить доступность вашего веб-сайта? Как вы собираетесь сделать свой сайт более доступным для всех? Ваш сайт работает после прохождения теста WAVE? Дайте нам знать в разделе комментариев ниже!

Китон Роббинс

12 июня 2019 г.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий