5 распространенных проблем с доступностью веб-приложений и способы их устранения

5 распространенных проблем с доступностью веб-приложений и способы их устранения

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

Делаете / делали ли вы эти ошибки в своих проектах?

1) Использование элемента ввода без связанной метки

Неправильно — Использование простого текста рядом с элементом ввода

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Текст «Username» не связан с input, поэтому, когда программа чтения с экрана объявляет input, она не сообщает, что он предназначен для ввода имени пользователя. input будет объявлен как “input, edit text”, поэтому пользователь программы чтения с экрана не будет иметь ни малейшего представления, для чего этот input, и что в него вводить.

Текст «Username» также не будет действовать как цель для нажатия / касания, чтобы установить фокус на input.

Неправильно — использовать метку, но не связывать ее с элементом ввода

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

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

Неверно — используется метка с атрибутом for, но id отсутствует / неправильный

Для “First name” input не содержит атрибута id, а для «Last name» элемент содержит атрибут id, но со значением name, а не lastName. В обоих случаях label неправильно связано с input.

Также обратите внимание, что значения атрибутов чувствительны к регистру, поэтому атрибут for=»Username» не будет соответствовать input с атрибутом id=»username».

Правильно — Использование метки и ввода с правильными значениями атрибутов for и id

Правильно – элемент ввода обернут в метку

Правильно — Использование атрибута aria-labelledby

Если существует один или несколько элементов, которые содержат текст, подходящий для использования в качестве метки для input, на идентификаторы этих элементов можно ссылаться с помощью атрибута aria-labelledby. В этом примере input будет объявлено следующее: “reset password username, edit text”.

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

Правильно — Использование атрибута aria-label для невизуальной метки

В некоторых очень специфических случаях визуальная метка не требуется для input, поскольку цель input понятна из окружающего контента. В этом примере для зрячего пользователя ясно, для какой цели предназначен input, благодаря кнопке «Поиск» рядом с ним. Однако для пользователей программы чтения с экрана это визуальное соединение невозможно. Атрибут aria-label может быть использован для обеспечения невизуальных меток для input.

2) Использование шрифтов иконок без текстовой альтернативы

Шрифты иконок предоставляют удобный способ добавления масштабируемых, стилизованных иконок на веб-сайт (хотя теперь, возможно, SVG-иконки обеспечивают лучший подход). Разметка для отображения иконки обычно представляет собой тег <i> или span с примененным к нему классом, который включает в себя селектор :before или :after для вывода определенного символа Юникод. Этот символ Юникод визуально отображает иконку в файле шрифта, но программа чтения с экрана либо не объявляет этот символ, либо объявляет буквальное описание иконки. Ни первое, ни второе не является идеальным.

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

Неправильно — Иконка без текстовой альтернативы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Неправильно — Скрытие текста в маленьких окнах просмотра

Правильно — Иконка с текстовой альтернативой

Обратите внимание, что атрибут aria-hidden=»true» был применен к <i>, чтобы гарантировать, что программа чтения с экрана не объявляет символ Юникод.

Правильно — текстовая альтернатива все еще доступна, когда отображаемый текст скрыт в маленьких окнах просмотра

Класс sr-only (только для средств чтения с экрана) был применен к первому , который размещает текст вне области просмотра, поэтому он не может быть видим, но все еще существует в DOM и объявляется средством чтения с экрана.

Как текст, отображаемый только в больших окнах просмотра, так и тег иконки <i> имеют атрибут aria-hidden=»true», поэтому не объявляются программой чтения с экрана.

3) Добавление обработчика кликов к неинтерактивному элементу

Неверно — добавление обработчиков кликов в div и span в React и Vue

В отличие от нативного button или <a>, пользователь клавиатуры не может взаимодействовать и вызывать обработчики кликов для элементов div или span, а пользователь программы чтения с экрана не знает, что с элементами div или span можно взаимодействовать.

Правильно — использовать обработчики кликов с интерактивными элементами

4) Не использование активной области для важной информации

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

Активные области обеспечивают возможность динамического изменения содержимого с объявлением программами чтения с экрана.

Неправильно — Важная информация не будет объявлена

Правильно – Активная область используется для объявления важной информации

5) Не указание атрибута href для тега анкора

Неправильно — без атрибута href

Неправильно — пустой атрибут href

Правильно — href атрибут указан со значением

Источник: https://keepinguptodate.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий