Проблемы аудита доступности Lighthouse

Внести вклад UX
1

Я полностью готов исправить любые возникающие проблемы с доступностью. Вы обнаруживаете их с помощью встроенного аудита Lighthouse в Chrome или каким-то другим способом?

7 лайков
$primary-medium SCSS variable problems
2

Отлично!

Да, я использую аудит Google Lighthouse.

1 лайк
3

Разделите это на отдельную тему, чтобы подробнее разобрать проблемы. Начнём с…

Список тем

Помимо контраста, который пока можно исправить с помощью CSS, есть две проблемы:

  1. Первая проблема со списком элементов, похоже, является ошибкой аудита или, возможно, особенностью того, как аудитор видит отображение нашей страницы? Эти элементы списка определённо содержатся.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

55%20PM
55%20PM1172×166 29.7 KB

  1. Вторая проблема — «[aria-*] атрибуты не имеют допустимых значений». Это касается конкретно наших выпадающих списков категорий и тегов… проблема здесь, по-видимому, в aria-haspopup. Согласно примеру здесь Navigation Menu Button Example | APG | WAI | W3C, у нас должно быть aria-haspopup="true" вместо просто aria-haspopup.

    Похоже, мы не передавали значение true как строку. Я исправил это здесь: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 лайков
4

Темы

Одна проблема (помимо контраста и ранее упомянутой не-проблемы с li)

Ссылки не имеют понятного имени

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

Два случая:

  1. Каждой публикации присваивается элемент a.tabLoc без размеров. Похоже, они предназначены для навигации по публикациям с помощью клавиатуры? Скрыты с помощью aria-hidden: true, так как бесполезны для скринридеров. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. Иконка конверта, используемая для обозначения того, что тема является личным сообщением, также ведёт на ваш ящик личных сообщений, и мы загружали эту ссылку для всех тем… даже если они не являются личными сообщениями. Я сделал эту ссылку условной только для личных сообщений, а также добавил атрибут title и aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub и UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 лайков