Стартую новый тред, оставила его на вечерок, ведь у типичного айтишника голова начинает работать только вечером, когда от него все отстали с этими митингами и прочими беседами!
Расскажу про доступный контент :)
А у вас когда голова лучше всего работает?
🤔
33.5% Вечер-ночь🤔
33.2% Утро🤔
12.5% День🤔
20.8% Зависит от всего!Итак... с чего начать? С плана!
Если нужно сделать доступно, мы начинаем с текстов.
Контент-мейкер пишет, потом мы вместе идем по результату, вычитываем на предмет технических неточностей, не очень корректных фраз.
Есть такая техника, как plain language.
plainlanguage.gov/about/definiti…
После вычитки мы переходим к дизайну. Во время создания макетов важно учитывать все аспекты дизайна (и мы попробуем обсудить их позже). Но есть вещи, которых нет на дизайне, и они просто теряются.
- лейблы для кнопок-иконок
- альтернативные тексты
- лейблы для лендмарков
- и др.
ЧТО ЕЩЁ ЗА СКРЫТЫЕ ТЕКСТЫ? Кому они нужны?
В разработке доступности мы часто думаем про пользователей скринридеров (программа чтения с экрана).
Такой пользователь чаще всего незрячий. Он не увидит ваши картинки, структуру вашего контента, кнопки-иконки, если в них нет текста.
Структура документа для незрячего пользователя во многом строится на заголовках и так называемых лэндмарках - областях, куда незрячий пользователь может перейти, нажав одну клавишу (например, для скринридера NVDA это клавиша D). w3.org/TR/wai-aria-pr…
Пример: <nav>, role="navigation".
Когда пользователь оказывается в области, скринридер сообщает ему, что это, - navigation (он говорит именно это слово).
Если на странице два nav, мы запутаем человека.
И тут нам понадобится скрытый лейбл!
Кейс: основная навигация в хэдере страницы и дополнительная - в футере.
<header>
<nav aria-label="Main">
<main>
<footer>
<nav aria-label="Additional">
С помощью aria-label мы добавляем текст ТОЛЬКО для скринридера. Он не появится визуально => его нет на дизайне
В моём предыдущем примере я использовала придуманные слова, но они обычно берутся из головы достаточно прамолинейного разработчика и точно могут стать полезнее😅
В таком случае нужен хороший контент-мейкер, который понимает проблему и отразит её в текстах для страницы.
ВАЖНО:
Скринридер сам называет тип элемента, когда знает его, поэтому не добавляйте это в лейбл, чтобы избежать дублирования!
Пример:
<nav aria-label="Main navigation"> будет зачитано как Main navigation navigation (или navigation Main navigation).
И ещё одна важная вещь.
НЕ БРОСАЙТЕСЬ ФИГАЧИТЬ лейблы всем лэндмаркам, какие видите!
Например, main должен быть всего один на странице, и ему не нужно дополнительных лейблов.
Просто представьте, где пользователь может запутаться, и подумайте, как ЛАКОНИЧНО это пофиксить.
Я продолжу дальше рассказывать про доступность контента, а пока, может есть вопросы по этой и любой теме? ☺️
Фотка для привлечения внимания!)
Поднялись на небольшую высоту над отелем :)
Так, с лейблами для лэндмарков немного разобрались. Понимание придёт не сразу, но придёт :)
Дальше давайте поговорим о более привычных вещах: лейблах для интерактивных контролов!
Тут попробую привести парочку графических примеров, а то чот скучно :)
Начну с простого.
У всех интерактивных элементов (кнопки, поля ввода, ссылки, придуманные) должны быть лейблы :)
Не добавляйте слова label, button, input, edit, click и т.д.
Лейблы должны быть программно связаны с элементами (ща поясню :) )
Глафира Жур