Сьюзи Нащански из Календарь Адвента HTMHell:
All About Dragons
I like dragons. Blah blah blah blah blah.
Видеть, что aria-labelledby атрибут? Он связывает два идентификатора из разметки, один для заголовка (#article1-heading) и один для ссылки (#article1-read-more). Что происходит, так это то, что программа чтения с экрана заменит существующую семантическую метку между тегами ссылок и будет использовать содержимое обоих элементов и объявлять их вместе как одну строку текста:
Read more All About DragonsЯ всегда робею, когда понимаю, что есть что-то, что я должен знать, но не знаю. Это определенно один из таких случаев, и я чертовски благодарен за то, что Сьюзи поделилась им.
На самом деле совсем недавно я был в ситуации, когда я мог бы должен был сделать это. Я всегда стараюсь избегать кучи ссылок «Читать дальше» на одной странице, но придумывать разные варианты одной и той же вещи сложно, когда вы работаете с чем-то вроде цикла из 15 сообщений (даже если есть ресурсы, чтобы помочь). И если нам нужно, чтобы этикетки были короткими по эстетическим причинам — требованиям дизайна и тому подобному — это еще более сложно. aria-labelledby Атрибут дает мне именно то, что я хочу: согласованные визуальные метки и более контекстные объявления для вспомогательных технологий.
И это только в том случае, если текст, который вы хотите использовать для доступной метки, уже существует на странице. В противном случае вы хотели бы пойти с aria-label и с оговоркой, что это чисто для интерактивных элементов, которые не могут помечать объекты с помощью семантического HTML.
Если вы работаете в такой CMS, как WordPress (которой я и являюсь), вам, возможно, придется проделать небольшую дополнительную работу. Например, когда я помещаю блок кнопок на страницу, мне приходится работать с этими параметрами:
Там есть несколько хороших опций, но ничего общего с доступной маркировкой. Если вам интересно, что скрыто на этой панели «Дополнительно»:
Вместо этого вам нужно будет отредактировать кнопку в режиме HTML:
Но прежде чем сделать это, вы должны добавить идентификатор к заголовку, который хотите использовать. Блок «Заголовок» имеет ту же настройку панели «Дополнительно» для добавления привязки, которая вводит идентификатор в элемент:
Затем вы можете перейти к редактированию блока Button в режиме HTML и добавить accessible-labels ID, а также ID самой кнопки. Это пример отредактированной разметки:
Большой! Но WordPress просто не крут с этим:
Вы можете попробовать решить проблему:
Ле вздох. Блок Button должен быть преобразован в блок Custom HTML. Своего рода победа над всем визуальным редактированием, в котором так хорош WordPress. Я очень быстро искал плагин, который мог бы добавлять параметры маркировки ARIA к определенным блокам, но не нашел. Похоже, настала возможность сделать один или отправить PR для блоков, которые могут использовать эти параметры.
