Изображения без альтернативного текста

Три изображения без атрибута alt. Программы чтения с экрана не могут их озвучить.

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

Типовые тексты ссылок

Подробнее о наших услугах здесь.

Знаете ли вы свои обязанности в соответствии с BFSG? кликните сюда.

Дополнительная информация: более, дальше, ►.

Нарушения контраста

Светло-серый на белом (~1,6:1) — значительно ниже порогового значения WCAG 4,5:1.

Светло-коралловый на белом (примерно 2,4:1) — типично красивый цвет для этого бренда, но недоступен для широкой публики.

Белый на светло-коралловом фоне (~2,4:1) — та же проблема, но с другой стороны.

Светло-серый на чуть более светлом сером (примерно 1,2:1) — классический вариант для „минималистичных" тем.

Неработающие элементы управления клавиатуры

Следующие „кнопки" представляют собой несемантические div-элементы без индекса вкладки и без роли ARIA. Щелчки мыши работают, но щелчки по вкладке — нет.

А вот якорь без атрибута href — он тоже не фокусируется:

Неправильная форма

Нет ни одной метки — для справки, нет поля вокруг группы радиокнопок, обязательные поля отмечены только звездочками, нет атрибута aria-describedby для отображения ошибок.

Нарушенный порядок вкладок и отсутствие концентрации

Четыре ссылки с положительными значениями tabindex — порядок перехода по вкладкам изменен по сравнению с визуальным порядком.

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

Мини-кнопки

Кнопки размером не более 20×20 пикселей — минимальный размер согласно WCAG 2.5.5 составляет 44×44 пикселя.

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

Непрерывная анимация без снижения уровня защиты от движения.

Оранжевый блок вращается бесконечно — даже если посетитель установил параметр „меньше движений" в операционной системе.

Языковой микс без указания длины

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

Также на французском языке без маркировки: Nous offrons des Solutions d'accessabilité numerique pour les site WordPress.

Сломанный аккордеон

Аккордеон на основе div без атрибутов role, aria-expanded, aria-controls.

Отсутствующие достопримечательности

В этом разделе отсутствуют семантические области (нет навигации, нет раздела "side", нет role="region"). Программы чтения с экрана не могут переключаться между разделами.

• Ссылка А
• Ссылка B
• Ссылка C

Таблица данных без ячеек заголовка

Видео без различимых субтитров

Встраивайте любые видео без элемента `track` для субтитров — модуль плагина должен это отметить.

(Источник, вероятно, отсутствует — речь идёт только о шаблоне разметки.)

Сложный настенный текст

Разработка доступных веб-приложений с соблюдением стандартов WCAG 2.1 требует междисциплинарного понимания семантики HTML, спецификаций ARIA, методов визуализации CSS и вспомогательных технологий, таких как программы чтения с экрана, дисплеи Брайля и системы преобразования речи в текст. Взаимодействие этих технологий, особенно в динамических одностраничных приложениях, использующих фреймворки вроде React, Vue или Angular, должно обеспечиваться за счет управления областями в реальном времени и корректного управления фокусом. Это вряд ли достижимо без соответствующей специализации и многолетнего практического опыта.

Бегущая строка с бегущей строкой

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