Прокачиваем вёрстку ARIA-атрибутами. Атрибут role

[ifap]

Вы так и не разобрались в том, что такое семантика. Вот на примере истории с поиском:

<form role="search">

своей заданной ролью Вы не переопределяете тип тэга form, а лишь конкретизируете его роль - в данном конкретном случае эта форма становится не просто формой, а Формой Ивановной поискового запроса. Дальше:

<search> - это совсем не то же самое, что <form role="search">

Оставим за кадром эксперименты в прямом эфире и растекание мысью по древу WHATWG (TL;TR: если сегодня в этом недостандарте появилось что-то новое, совсем не факт что уже завтра это новое не объявят deprecated). Суть вот в чем: в <search> оборачивается не форма для поискового запроса, т.е. не:

<search><form role="search"> элементы поисковой формы </form></search>

а вообще все на странице, что имеет отношение к поиску, от формы запроса до найденных результатов. Это и есть семантика, буквально такое сообщение агенту пользователя: внутри этого тега все, что имеет отношение к поиску. Т.е. и форма, и/или результаты поиска, и/или подсказки по поисковым запросам.

PS: и в большинстве случае тем, кто не знает, что такое role, лучше этого и не знать, чтобы руки не чесались понапрасну.

[melnik909]

В чем же я еще не разобрался? С элементом search услышал.

[ifap]

Вы так и не разобрались в том, что такое семантика.

Отсюда и Ваша ошибка с search, и странные примеры/иллюстраци к остальному. Мы можем придать заголовку роль гиперссылки - прекрасно, зачем? Когда Вы себе ответите на этот вопрос, Вы поймете, в чем странность Вашего примера и какой пример будет не странным.

[melnik909]

Какие примеры по вашему мнению странные? Я понял, что "заголовку роль гиперссылки". Еще есть?

[ifap]

Самый странный - со списком. Сперва мы у списка зачем-то убираем визуальные признаки списка, а затем героически возвращаем его "читаемость" именно как списка через role. Не скажите, зачем это может понадобиться? (Hint: любезный многим рукожопым верстальщикам способ верстки меню через ul/li - извращение, а не пример). Кстати, я не уверен, что изменение семантической роли через CSS - стандартное поведение, а не взбрык конкретного агента пользователя.

[melnik909]

"Не скажите, зачем это может понадобиться? "

Потому что в текущий момент list-style: none убивает список

[Cringeon]

Когда-нибудь он узнает, что такое breadcrumbs(там, правда, ol) и какие фичи семантическая верстка такого элемента может дать в том же Гугле(особенно, если помазать их микроразметкой)

[ifap]

Я бы не стал приводить в пример технику, прямо нарушающую стандарт HTML. Даже если ее поощряет великий Гугл, с которого хватит и того, что он убил стандарт HTML.

ЧСХ, хотя ol, как следует из его имени, это упорядоченный список, большинство используют его как нумерованный.

[VADemon]

Семантика — единственный способ донести смысл HTML страницы

на работу скринридера также влияет CSS. ... Взять свойство list-style

Железно!

[Denai]

Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists.
No ARIA is better than bad ARIA.
С этих двух утверждений должна начинаться и заканчиваться любая статья про ARIA