Comments 13
В некоторых примерах было бы неплохо добавить картинки с результатами, а так статья хорошая
Пожалуйста, не забывайте добавлять элемент <main>
Его не надо добавлять, им надо заменять теги блока с основным контентом, т.е.:
<main>контент</main>
вместо
<div id=content>контент</div>
Потому как конструкция
<main><div id=content>контент</div></main>
усложняет DOM, ничего не давая взамен.
усложняет DOM, ничего не давая взамен.
Нет.
https://developer.mozilla.org/ru/docs/Web/HTML/Element/main
<main>не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как<body>, заголовков, таких как<h2>(en-US) и т.п.,<main>не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.
Спасибо, я мог бы и догадаться, что семантический тег не добавляет к DOM. Но все же настаиваю, что оборачивание в дополнительный тег, когда можно не оборачивать, а просто поменять div на main, не оправдано и усложняет разбор кода.
Даже если не обращать внимание на кривой надмозговый перевод (concept в данном случае это не концепция, а понимание), эта фраза всё равно очень спорная. В чем отличие "информативного характера" от "структуры документа"? Где и какими гвоздями эта самая структура забита?
Понятно же, что в любом случае практическая интерпретация семантики остается на усмотрение юзер-агента. И есть случаи, когда тег <main> имеет конкретную функциональную нагрузку — пример приведен на том же самом MDN.
Настоящее бесилово - когда используют бездумно live region. Например, на сайте есть слайд-шоу, и скринридер при смене слайда произносит: "Слайд 1 из 10", "Слайд 2 из 10" и т.д. Читать такой сайт невозможно, а всё потому, что кто-то решил радовать незрячих бесполезной информацией о смене слайдов...
Обновляйте элементы с aria-live атрибутом только в ответ на действие пользователя! Не используйте live region в периодически обновляемых элементах!
Отличная статья, лови плюсик в карму
Первое правило доступности и aria-аттрибутов - по возможности не использовать aria-аттрибуты,а использовать для этого "нативные" методы
поле Alt не рекомендуется оставлять пустым, будет ругаться w3c validator. Поле alt нужно заполнять. А если вас смущает то, что скрин ридер озвучивает два раза ФИО, скройте картинку от скрин ридера или грамотный ход будет написать в alt в данном случае alt="Фото Стаса мельникова"
Вот так не будет ругаться alt=""
При моих настройках скринридера данная картинка читается как "изображение без описания". Инхо слово "аватар", например, здесь было бы благозвучнее. Особенно, если картинка кликабельна.
Я ещё не читал две следующих статьи, может дальше об этом будет, но меня сильно напрягают кликабельные элементы на странице, которые напрочь не видны скринридерами. Навскидку пример, к сожалению, не приведу.
Ребята. Хочу спросить про раздел "▍ Атрибут alt может засорять уши пользователям скринридера дублированием информации"
Если я хочу нажать на фотографию, чтобы поставить лайк, написать комментарий или поделиться, то как это сделать при пустом альте?
Если просто сделать alt="фото", так будет не лучше?
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи