Как верстать доступные сайты?

Question

[Juniorrrrr]

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

Я умею верстать соблюдая семантику

Буду премного благодарен если поделитесь ресурсами

Comments

[Juniorrrrr]

Если вдруг кому-то будет ещё интересно у React есть отличное описание с различными статьями на эту тему React docs

Answer 1

[Вадим]

То, о чём Вы спрашиваете, официально называется WAI-ARIA.
Тут можно скачать бесплатно экранного диктора и с помощью него тестировать свои сайты, осуществляя навигацию по ним с помощью табуляции, а так же открывая специальное меню с помощью горячих клавиш (командная кнопка приложения, которую назначите, по умолчанию ins+f7, или f6? Не помню уже точно :-) )

Доклады Вадима Макеева на ютубе:
https://www.youtube.com/watch?v=MWJKwn_gKR4
https://www.youtube.com/watch?v=ssJsjGZE2sc

Если действительно умеете соблюдать семантику, то, скорее всего, Вы уже сделали достаточно.
Рускоязычные ресурсы по доступности:
https://weblind.ru/
specialbank.ru/guide (В данный момент чёт не работает, но должен)
Есть курс, где учат именно этому: https://kurmak.info/
Статья на хабре: https://habr.com/ru/post/40730/ (там внизу есть полезные ссылки)
Тут можно найти информацию по этому вопросу, в том числе перевод статей из первой ссылки англоязычных ресурсов

В подкасте Веб-стандарты упоминается об этом очень часто. Тут можно прослушать все выпуски, а так же покопаться в выпусках и поискать упоминания доступности и статьи про это.

Есть англоязычные ресурсы
Про доступные компоненты: https://inclusive-components.design/ (нажимаете в хроме справа сверху "перевести страницу" и профит)
Есть спецификация: https://www.w3.org/TR/wai-aria-1.1/#usage (аналогично, перевод в браузере и профит)
MDN: https://developer.mozilla.org/en-US/docs/Learn/Acc...

Comments

[Juniorrrrr]

Большое спасибо