Откройте консоль и найдите строку, где ошибка - кликните на ссылку, там файл и строка с ошибкой будет ссылкой, дальше садитесь и смотрите пристально и долго)
Чтоб сказать, сколько товаров в списке товаров можно скрытый блок сделать и туда на бекенде или через компонент выводить количество, а визуально скрывать. Так можно и себе жизнь облегчить и ничего не испортить.
Просто в погоне за семантикой нельзя упускать ее сути и цели - делать удобный и понятный для всех интерфейс. Именно для этого очищается используются эти html5 семвнтические теги, а не ради философии.
iminby, я тоже не мог ответить чётко на этот вопрос, пока не поставил скринридер и не стал вникать, как им пользоваться. Так вот, благодаря заголовкам можно быстро перейти с раздела в раздел.
Поэтому, если в секции есть заголовок "Список товаров" второго уровня, тогда человек, если захочет посмотреть товары, будет искать подзаголовки, то есть h3, так что не рекомендую делать h1.
По этой же логике и ответ на второй вопрос о списке. Тем, кто пользуется визуально тег ul ничем не помогает. Роботы типа seo им секции и артикла с заголовками хватит, чтобы понять структуру, а людям с ограничеными возможностями хватит ориентиров и тех же заголовков. Между товарами они смогут переходить по заголовкам, а для быстрого перехода к покупке через таб или хоткей на ближайший ориентир.
Выходит, что список не сильно тут важен для пользователя. Единственное, что он может дать - скажет сколько элементов в списке, но очень усложнит разметку.
iminby, окей, описание и цену можно и дивом, но как бы тег р не имеет особого смысла, кроме обертки специально под phrasing content. Но реально, можно и див, не суть) В общем, да, сошлись)
iminby, Вы сами спросили, нужно ли внутри article все оборачивать в section. По Вашему описанию понятно, что карточка товара - это article, вот и вопрос, зачем section внутри? Section - крупный смысловой блок, у которого к тому же должен быть заголовок.
Конечно, можно и так, но для текста подойдет тег р. Вот только тег aside вокруг figure зачем и зачем header вокруг заголовка? Не то чтобы это ошибка, но просто сама суть, какая у этих семантических оберток?
Дело в том, что теги типа aside помогают в качестве ориентиров на странице, и зачем ориентир вокруг картинки? А header и footer не имеют роли ориентиров, если не являются прямыми потомками body, зато в качестве вступления и заключению подходят как раз, так что окей. Просто хотел подчеркнуть, что у этих оберток есть вполне конкретные цели в разметке, и злоупотребление может даже немного помешать, я про aside, кажется это уже перебор. Заголовок сам по себе часть навигации, в доп. обертках часто не нуждается. Кнопки внизу карточки товара в footer - ок, я бы еще роль добавил, или взял aside, то есть вот тут aside как раз в тему, имхо) В остальном согласен.
MyQuestion, ариа атрибуты сами по себе не открывают-закрывают меню, это делает javascript, но в функциях, которые управляют меню нужно менять значение некоторых ариа атрибутов, чтоб скринридер тоже понимал, что происходит и мог объяснить пользователю.
MyQuestion, это не просто чья-то статья - это спецификация, официальная документация, о том, как делать доступные элементы интерфейса, все что там описано это так должно быть реализовано. Там же примеры кода. Можно скопировать себе меню и поменять стили, можно на этом принципе создать свое. aria атрибуты нужны скринридерам, чтоб они понимали, что этот элемент меню, внутри еще подменю, другие ариа атрибуты говорят, что меню скрыто или открыто, и самое главное - там описаны сценарии, как этим меню будут пользоваться с клавиатуры.