Accessibility course exercises

---

permalink: /index.html

Важные ошибки (частично исправлены в https://frontendj.github.io/a11y-homework/v2/)

• Поиск не является областью (role="search" на FORM)
• aria-haspopup заставляет скринридер произнести "Кнопочное меню", что неверно
  • Известный баг скринридеров - рекомендуется не использовать эту разметку - w3c/aria-practices#1383
• Поля форм не ассоциированы с лейблами
  • Похоже, это происходит потому что LABEL в отдельном DIV
• поиск по сайту объявляется дважды
  • Это перемещение по словам, и я пока не очень понимаю, как с этим бороться. Возможно, одно из решений - использовать текстовый лейбл, но скрывать его с помощью aria-hidden и дублировать с помощью aria-label на поле поиска. Возможно ошибка связана с предыдущей
  • В целом кажется, что все скринридеры произносят лейблы для полей по разному для каждого случая - https://codepen.io/frontendj/pen/wvJRerm
• Не хватает заголовков 2-го уровня для разделов нижней навигации, социальных сетей, подписки на новости (или 3-го, если добавить заголовок 2-го для всего футера)
• ни с чем не связанный кусок текста 'ский', пользователь подумал, что это часть от "английский"
  • это пропущенный баг, там должно было быть слово Русский целиком
• раздел Музей и табуляция - почему-то вызвали перезагрузку страницы. Выглядит так, что пользователь прыгает внутрь таба и немедленно активирует первую ссылку. Очень странное поведение всего компонента.
  • Проблема воспроизводится на Voiceover на элементах с role=tablist и aria-label (в моем случае это aria-label="Фильтр по датам" и aria-label="Информация").
    • Переключиться в режим Unlock VO keys (VO + ;)
    • Сфокусироваться на tablist (прочтет название)
    • Нажать пробел
    • Будет активирована первая ссылка в группе, редирект на нее, а дальше VO начнет зачитывать все элементы на странице подряд
  • Убирание aria-label помогает
• Похожий баг происходит при фокусе на и последующем пробеле
  • Вроде понял - это не баг VO, это так обрабатываются ссылки внутри промо-блока (они растянуты за счет псевдо-элементов). Внутри блока с событиями и зданиями такой трюк тоже есть, и он начинает конфликтовать только в случае если у родителя есть семантическая роль - https://codepen.io/frontendj/pen/GRmKqOX

Можно сделать лучше

• Избыточные области внутри областей навигации
  • Надо понять, что можно сделать, пока нет решения в голове
• пользователь очень долго находился на внутренней странице, думая, что это главная. Для наблюдателя это выглядело, что слово "основная" (навигация) ввело в заблуждение.
  • использовать другое слово? "Главная"?
• для наблюдателя выглядело, что переход на главную вызвал затрудения
  • что тут можно улучшить?
• ссылка "Билеты и льготы" в футере кажется более важной, чем "Посетителям с инвалидностью". Надо ее сделать первой
• блок "О музее" пользователь представил не так, как он выглядит. Думал, что там события
• (личное наблюдение) кажется, после авторизации недостаточно ставить фокус на элемент логина. Нужно уведомлять особо об успешном логине
• Заголовки 3-го уровня внутри списков Музея и Событий можно использовать, они будут весьма удобны (т.к. это в целом списки, то тоже норм, но лучше с заголовками)
• уведомление "Отобрано 1 событие" избыточны, т.к. мы уже представили информацию в кнопке таба
• Указывать label на section - избыточно, если внутри если заголовок
  • Тут тестировщики сами себе противоречат, т.к. до этого говорили, что это хорошая практика. В общем, вопрос пока открытый
• У языка указывать текущее значение как-то (aria-current)
• validator.w3.org: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
• <ul class="promo__list" role="presentation" - можно просто юзать DIV
• все SVG должны иметь aria-hidden=true на случай если внутри будет текст случайно
• кнопки карусели в конец?
  • Тут у меня сомнения. Впрочем карусель, кажется, можно улучшить. Пока как минимум слайды объявляются несколько раз - это раздражает
  • Вот чуть другая реализация - https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html - выглядит попроще, но появляется баг аналогичный role=tablist
• на таблист aria-label не обязательны (перед ними стоят и так понятные заголовки). Попробовать убрать
• aria-label пока плохо читаются скринридерами. Все надо тестить и если надо, юзать лейблы через реальный текст
  • Да, столкнулся с тем, что VoiceOver довольно неадекватно иногда читает текст. Пока практика пытаться по максимуму ставить лейблы через visually-hidden

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

• подписи title для всех иконок нужны, т.к. часто люди не понимают, что иконка означает. В этом проекте такие есть у социальных кнопок, но не у кнопки поиска или авторизации

Понятные моменты

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

Ощущение от главной страницы

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

Частые ошибки и возможности улучшить в других работах

• Отсутствие заголовков 1-го уровня, заголовков секций
• Скрытые визуально элементы используются, как shared лейблы, но при этом доступны для скринридеров в изоляции
• Совет: сокращения "ул", "км" все понимают нормально, но если сделать полное слово - удобнее иногда. Спец символы (например "/") произносятся как есть, что вводит в заблуждение
• role="menu" не надо использовать для навигации, это вполне конкретный компонент
• aria-label на статических элементах
  • Нет однозначного поведения. Иногда они произносятся, иногда - нет
• какие-то проблемы с aria-roledescription, он не всегда правильно обрабатывается
  • Надо изучить что там происходит
• слишком много областей навигации, так что возникают проблемы с названиями
• подписи к элементам с указанием их типа (постер, навигация)
• использование пустых aria- аттрибутов
  • Вот это очень интересно. Похоже некоторые скринридеры могут реагировать на aria-hidden=false или aria-label="" (как я понял из комментария). Обязательно изучить проблему
• отсутствие зацикливания табов внутри модалок
• фокус не возвращается на место после закрытия окна
• ссылки имеют одинаковые лейблы
  • Это выглядит важным, т.к. запутывает навигацию и ломает мысленную карту сайта, которую стороит пользователь в голове. Если ссылки дублируются, надо, видимо, скрывать одну из них от скринридеров