Comments 29
Любопытно, когда появится ChatGPT который сможет описывать то что есть на странице словами. Особенно когда картинки. Как я принимаю, это уже есть, дело за интеграцией
Про aria-required Вы написали полнейшую дичь. Написанное и пример верны для простого required, а aria-required используется для случаев особых извращений, когда вся нормальная семантика идет по женскому половому признаку и в качестве элемента формы используется какой-нибудь, например, div, т.е. элемент, не являющийся по смыслу элементом формы, но зачем-то приспособленный автором к этой несвойственной для него роли. Тогда будет div aria-required="true" но в случае формы здорового человека будет просто input required.
Продолжу тему, поднятую комментарием выше.
Бредятина про section и aria-label[led-by] это явный косяк конкретного ридера. По стандрату HTML section обязан иметь хотя бы 1 элемент <hn>, который и будет заголовком секции. aria-тэги нужны, как правильно заметили выше, только для ситуаций с кривой вёрсткой. Однако ж одни рукожопы, начиная с авторов бутстрапа, их бездумно лепят куда попало, а потом другие не осилившие спецификацию не могут обрабатывать html код без aria-костылей.
Хотя меня тоже терзают смутные сомнения, что это косяк парсера, а не автора, заголовок не является обязательным для section. Если не прав, приведите, пожалуйста, ссылку на стандарт, где утверждается обратное.
validator.w3.org
По ссылке расположен валидатор гипертекстовой разметки, а не текст стандарта.
Разумеется. И если скормить ему вёрстку с <section> без какого-нибудь <hn>, он ругнётся и приведёт ссылку на текст стандарта. Try it yourself!
Ругань валидатора даже от самого W3C не является стандартом HTML, коих у нас на сегодня 2: собственно, стандарт (Recommendation) от W3C и нечто аморфное от WHATWG, называемое "живым стандартом". Ни в одном не сказано, что Hx обязан находится внутри section.
Он приводит ссылку не на текст стандарта, а на справку по тэгам заголовков.
Что же до требования иметь заголовок - это требование не HTML, а WAI-ARIA:
Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with
aria-labelledbyif a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with roleheading.
Ну вот видите, вы сделали работу, которую господин@ifap пытался пассивно-агрессивно повесить на меня. Смысл в том, что никакие aria-атрибуты в данном случае не нужны, в html уже всё есть.
Нужны. Читайте ещё раз:
Authors SHOULD reference a visible label with
aria-labelledbyif a visible label is present.
Ну и до кучи ещё можно заглянуть в алгоритм вычисления Accessible Name: вы не найдёте там никаких упоминаний тэгов h1-h6.
Ну то что мой собеседник понятия не имеет, о чем говорит, я подозревал, а он лишний раз подтвердил, вскриком выше, но Вы-то где увидели в процитированном фрагменте про заголовки (h) и секции (section)?! Я уж не говорю о том, что написанное относится лишь к частному случаю role="region"
В процитированном фрагменте написано, что элемент с ролью "region" обязан (MUST) иметь label, которую лучше бы (SHOULD) указывать как часть heading, которая может быть (MAY) standard host language heading element (вот вам и упоминание h_-тэга).
Секции напрямую в этом фрагменте не упоминаются, однако по умолчанию они как раз имеют роль "region" (если не нарушается процитированное правило).
Без заголовков section можно подписать так же как form и прочие элементы, поддерживающие aria-label:
<section aria-label="Контакты">
Почта: <a href="mailto:mail@example.ru" >mail@example.ru</a>
</section>
NVDA читает: "Контакты Область"
А с заголовком можно вообще не подписывать.
С точки зрения навигации по странице, если есть заголовок, то не подписанная section - не проблема.
Когда я перемещаюсь между заголовками с помощью клавиши "h" и нахожу "Контакты", то нет никакой разницы, как это семантически оформлено.
С другой стороны, когда я ищу ориентиры с помощью клавиши "d", не подписанная section в ориентиры не попадает (в отличие от nav, main или footer)
Для контактов правильнее использовать специальный тэг address.
Уговорили )
<section aria-label="Контакты">
<address>
Почта: <a href="mailto:mail@example.ru" >mail@example.ru</a>
</address>
</section>
Плохо уговорил: section тут лишнее, т.к. address с точки зрения семантики и есть section aria-label="контакты"
Речь шла о том, как скринридер озвучит именно section.
address не является областью, у него другая роль.
Если интересно, то
<address aria-label="Контакты">
Приёмная: <a href="tel:+222333222333" >+22 (233) 322-23-33</a>
</address>
звучит так: "Контакты Группа ..."
В список семантических ориентиров address не попадает и по клавише "d" не ищется
Эвона как... тадыой, масло - масляное, контакты - контактные :(
Добавлю почему так происходит. Тэг address не обязательно означает контактную информацию владельцев сайта, это могут быть контакты автора статьи, автора поста или даже комментария...
Думаю, было бы неприятно слышать в списке разделов по записи на каждый комментарий.
Поддержу. Принцип БлокЭлементМодуль рулит.
Ну и ещё один пример фееричного косяка доступности. Открываем главную страницу Дзена. Там есть блок со списком главных новостей. Причём на каждой ссылке на новость звучит "открыть нвоости по теме". Какая новость, откуда... Причём в коде есть вся нужная инфа, в том числе и в атрибутах area-label. Но добавлена она туда настолько криво, что скринридеры её не видят...
А когда открываешь новость, вместо заголовка новости скринридер просто произносит: "Заголовок сюжета".
Хорошо, что название новости в заголовке окна браузера пока что отображается...
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 3