Comments 55
UFO just landed and posted this here
Атрибут role?
Начал писать развернутый ответ, но мою мысль можно выразить более кратко:
Атрибут role в принципе не нужен там, где:
1) HTML-элемент максимально поддерживает CSS стилизацию
2) HTML-элемент максимально поддерживает расширение логики/кастомизацию верстки
3) HTML-элемент поддерживается 99.5% браузеров (https://gs.statcounter.com/ — Edge все еще 3.41%, думаю, это включая IE11)
Попробуйте details в IE вставить или сделать только с 1 Table (и всеми вложенными элементами) фиксируемый при скролле thead.
Атрибут role в принципе не нужен там, где:
1) HTML-элемент максимально поддерживает CSS стилизацию
2) HTML-элемент максимально поддерживает расширение логики/кастомизацию верстки
3) HTML-элемент поддерживается 99.5% браузеров (https://gs.statcounter.com/ — Edge все еще 3.41%, думаю, это включая IE11)
Попробуйте details в IE вставить или сделать только с 1 Table (и всеми вложенными элементами) фиксируемый при скролле thead.
Ого! Прошло уж 15 лет, как доводилось верстать.
А война за семантику всё ещё идёт...
Шёл 2021, HTML Academy решили рассказать про теги, которые вели почти в одно время с html5?
Никогда не поздно напомнить о важном. Вон даже Хабр на дивах свёрстан, что ж теперь :)
Работает — не трожь!
> Никогда не поздно напомнить о важном. Вон даже Хабр на дивах свёрстан, что ж теперь :)
Вёрстка на div'ах в сущности не мешает добавлению семантики для скринридеров. Все специальные семантические теги — это просто блочные контейнеры с предопределёнными ролями. Соответственно можно любому элементу назначить роль вручную: вместо <header> сделать <div role="banner">, вместо <footer> — <div role="contentinfo"> и так далее. На заре эры семантических тегов это и вовсе было более предпочтительным решением, да и до сих пор в некоторых случаях явное указание роли через role всё ещё может требоваться, так как «голые» семантические теги не всеми скринридерами обрабатываются корректно.
Более того, через role доступен ряд ролей, для которых нет аналогов в виде предопределённых тегов, например, role="note".
Кроме того, вы смешали всю семантику в одну кучу. В действительности, какой-нибудь <main> и <article> — это сущности несколько разного порядка, а не просто разновидности семантических тегов. <section> и вовсе основными скринридерами без aria-label игнорируется, так что одно его добавление ничего не даст.
Статьи про accessibility, написанные в лучшем случае чисто по спецификации без реальной практики, сразу видны. Претендуя на менторство в этих вопросах, стоит если и не иметь богатый опыт, то хотя бы проверять примеры с реальным скринридером.
Вот именно там и перечитайте несколько раз следующее:
Боюсь, вы совсем не представляете, насколько всё сложно и неконсистентно у скринридеров и браузеров в этих вопросах, а также какие бывают специфические ситуации при внедрении WAI-ARIA в реальных проектах, из-за чего именно семантика через role до сих пор в ряде случаев оказывается предпочтительнее. Иногда оправдано даже использование, например, role="list" и role="listitem" вместо <ul> и <li>, хотя уж они-то поддерживаются без проблем. Не всё так просто, как кажется на первый взгляд, после беглого чтения спецификации.
Повторю ещё раз последний абзац из комментария, с которым вы пытаетесь спорить:
Вы бы хоть задумались, что вся эта малограмотная ахинея про accessibility остаётся в Интернете и находится поисковиками. Другие разработчики это бездумно повторяют, реализуя кривые или неоптимальные решения. Страдают же реальные пользователи с ограниченными возможностями. которые итак испытывают трудности, а тут ещё разные претенциозные менторы со своими неграмотными советами, по которым порой выходит даже хуже, чем было. Неужели у вас нет даже малейшего ощущения, что высказываться в поучающей монере по теме, в которой вы объективно некомпетентны, — это просто непрофессиональное поведение, особенно когда речь о фундаментальных технологиях, от которых многое зависит для пользователя?
«Under what circumstances may this not be possible?
• If the feature is available in HTML [HTML51] but it is not implemented or it is implemented, but accessibility support is not.»
Боюсь, вы совсем не представляете, насколько всё сложно и неконсистентно у скринридеров и браузеров в этих вопросах, а также какие бывают специфические ситуации при внедрении WAI-ARIA в реальных проектах, из-за чего именно семантика через role до сих пор в ряде случаев оказывается предпочтительнее. Иногда оправдано даже использование, например, role="list" и role="listitem" вместо <ul> и <li>, хотя уж они-то поддерживаются без проблем. Не всё так просто, как кажется на первый взгляд, после беглого чтения спецификации.
Повторю ещё раз последний абзац из комментария, с которым вы пытаетесь спорить:
«Статьи (и комментарии) про accessibility, написанные в лучшем случае чисто по спецификации без реальной практики, сразу видны. Претендуя на менторство в этих вопросах, стоит если и не иметь богатый опыт, то хотя бы проверять примеры с реальным скринридером.»
Вы бы хоть задумались, что вся эта малограмотная ахинея про accessibility остаётся в Интернете и находится поисковиками. Другие разработчики это бездумно повторяют, реализуя кривые или неоптимальные решения. Страдают же реальные пользователи с ограниченными возможностями. которые итак испытывают трудности, а тут ещё разные претенциозные менторы со своими неграмотными советами, по которым порой выходит даже хуже, чем было. Неужели у вас нет даже малейшего ощущения, что высказываться в поучающей монере по теме, в которой вы объективно некомпетентны, — это просто непрофессиональное поведение, особенно когда речь о фундаментальных технологиях, от которых многое зависит для пользователя?
А как это сочетается с (условным) очередным англуляро-реактом, который всё в динамике рисует?
никак. Пишите новый стандарт, если поспеете к следующему релизу.
Так же, как и с голым хтмл.
В динамике фреймворки рисуют то, что мы ему скажем рисовать.
UFO just landed and posted this here
А что, какая-то религия запрещает использовать в jsx семантические теги и aria-*? ;o)
Не скажу за Angular, но React в них прекрасно умеет.
Не скажу за Angular, но React в них прекрасно умеет.
Я так сайт сделал год в 2010 примерно, работал тогда в конторе которая производством сайтов занималась. Заказало у нас одно госпредприятие, которое, как тогда, так и сейчас, хочет и пытается быть очень современным, сайт. Непременно чтобы HTML5. Сделали по нашим стандартам тогда, чтобы даже на ie6 работало (с pngfix в том числе), а потом я просто пошёл и воткнул эти футер, хедер и нав. Ну собственно HTML5 и получился. Всё сделали, показали вроде ок, акты подписали, дошло дело до оплаты. Смотрит на договор и на акт выполненных работ бухгалтер, и думает, дай ка я проверю, что кляты компьютерщики тут наворотили, открывает свой компьютер с ни разу не обновлённой WinXP и ie6, и заходит на сайт. Ну ничего не работает. И отказала в оплате. Выпилил я всю эту семантику за 6 нажатий backspace и всё заработало. Так я сделал и сдал HTML5 сайт который работал под ie6.
В те времена везде использовался HTML5 Shiv.
> открывает свой компьютер с ни разу не обновлённой WinXP и ie6, и заходит на сайт. Ну ничего не работает. И отказала в оплате.
Просто Internet Explorer все неизвестные для него теги по умолчанию считал как с «display: inline». Ну а все эти и прочие он как раз не знал до версии 9.
> Выпилил я всю эту семантику за 6 нажатий backspace и всё заработало. Так я сделал и сдал HTML5 сайт который работал под ie6.
Ну а теперь в 2021 году я вам расскажу, как это надо было решать правильно. :-)
Проблема решалась следующим кодом в контейнере <head>:
<!--[if lt IE 9]>
<script type="text/javascript">
var elements = ['article', 'footer', 'header']; // etc
for(var i = 0; i < elements.length; i++) {
document.createElement(elements[i]);
}
</script>
<![endif]-->
Впрочем, в те времена скринридеры ещё совсем плохо поддерживали семантику новых тегов, так что надо было вручную всем им прописывать соответствующие роли через атрибут role: <header role="banner"> и так далее.
Мой мозг подытожил статью как «используй теги по их изначальному назначению».
Также мой мозг, недоумевая: «Э-э-э-э, а разве должно быть как-то по-другому?»
Современный веб: поджимает губы и, пряча глаза, старается поскорее пройти мимо.
Также мой мозг, недоумевая: «Э-э-э-э, а разве должно быть как-то по-другому?»
Современный веб: поджимает губы и, пряча глаза, старается поскорее пройти мимо.
А что вы скажете насчет веб-компонентов? Разве они были придуманы не для того чтобы избавиться от проблемы ограниченного набора и неоднозначности "семантических" html-тегов? Почему вместо разнообразных <div>, <span>, <header>, <footer>, <main>, <section>, <article>, <h1>, <ul>, etc нельзя использовать кастомные веб-компоненты которые будут лучше подходить по семантике и функционалу к конкретной ситуации и лучше соответствовать дизайн-системе и семантически-функциональной структуре сайта/веб-приложения?
Кастомным веб-компонентам не назначается никакая семантическая роль. Чтобы добавить эту роль, нужно унаследоваться от соотвестствующего элемента:
class CustomHeading extends HTMLHeadingElement {}
customElements.define('custom-heading', CustomHeading, {extends: 'h1'});
// использование
<h1 is="custom-heading"></h1>Правда я ни разу не видел, чтобы кто-то всерьез так делал.
Всерьёз так ни кто не делает, потому, что из всех браузеров отличились разработчики Safari, отказавшись реализовывать расширение нативных элементов. В Safari в целом наследование не от HTMLElement просто не работает.
Семантика пользовательским элементам задаётся двумя способами:
- ARIA атрибуты:
role,aria-labelи т.д. т.п. (Устанавливается либо через сеттерыrole,ariaLabelи т.д. Либо через установку атрибута); - Через готовящийся
ElementInternals.
По семантике ещё делается "виртуальное дерево" для использования с canvas и д.р.
Я далек от веба, но интересуюсь. Скажите, этот перечень , , ,… заранее определенный и конечный, или можно добавлять свои по смыслу? Конечно по возможности надо придерживаться стандартных, но если пишешь очень редко можно ли просто что-то по смыслу написать?
И второй момент. Вижу что некоторые, например
И второй момент. Вижу что некоторые, например
обладают уже некоторыми стилями. Это просто некоторые дефолты в css?
Эти теги прописаны в стандарте. Можно создавать свои веб-компоненты, но эта задача не такая уж тривиальная и точно не решается в рамках простой разметки. Если хочется больше семантики, то используется атрибут role, например:
CSS — это каскадная таблица стилей. По дефолту каждый элемент уже должен иметь свой какой-то стиль, который определяется браузером (очень редко еще и пользователь может переопределять). Например, все ссылки по умолчанию синие и подчеркнутые. Это можно легко переопределить.
<aside role="search">CSS — это каскадная таблица стилей. По дефолту каждый элемент уже должен иметь свой какой-то стиль, который определяется браузером (очень редко еще и пользователь может переопределять). Например, все ссылки по умолчанию синие и подчеркнутые. Это можно легко переопределить.
Воу воу воу, автор и правда считает, что тег b "просто изменяет внешний вид страницы". Может автор еще не знает разницу между b и strong?
В тексте нет такой цитаты. Зато есть такая:
Теги i или b не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Тег <b> используется для визуального выделения текста. <strong> — для важного текста.
Тег <i> — просто курсивное выделение, <em> — особый акцент на слове или фразе.
Что я не так сказал?
При этом теги i или b не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид."
Тег b должен выделять слово или словосочетание. Не может выделять предложение или целый текст. Это тег, которым подчеркивают термин или словосочетание, которое обладает особым значением для страницы и всего сайта. От контекста не зависит, то есть не важно что вокруг слова "шины" будет рассказ про подгузники.
Тег strong должен выделять законченую смысловую сущность. Например предложение или деепричастный оборот. Тег strong зависит от окружающего контекста.
Это два довольно сильных тега для продвижения, если уметь ими пользоваться.
P.S. em и i оказывают слабое влияние на ранжирование
Теги вообще никому ничего не должны :)
Чтобы разобраться, смотрим в спецификацию
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood
Речь идёт про "промежуток текста", без уточнения, предложение это, слово или что-то ещё.
The strong element represents strong importance, seriousness, or urgency for its contents.
Здесь вообще нет уточнения про текст, речь про любое содержимое. В спецификации есть примеры использования, там и в b заворачиваются предложения, и в strong отдельные слова.
Поделитесь источником, из которого вы взяли свои предположения?
Вы друзей что ли позвали, чтобы они 2 минуса мне влипили, а вам два плюса :D
Ладно это все лирика, какие вам источники. Создайте синтетические тесты и увидите разницу.
Как я уже ниже сказал, на заборе тоже много что написано, однако важно как теги на данный момент воспринимают поисковики. Кстати ваша ссылка на спецификацию (W3C) далека от тех, кто реально разрабатывает и внедряет стандарты (WHATWG), что еще раз показывает вашу некомпетентность в этом вопросе.
W3C и WHATWG уже давно помирилось и работают вместе.
Спецификация WHATWG говорит про
Т.е.
Поисковики могут придавать
Спецификация WHATWG говорит про
b абсолютно тоже самое.The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or moodhtml.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element
Т.е.
b это просто визуальное выделение любого текста и ничего больше. Поисковики могут придавать
b любой смысл и вообще игнорировать спецификацию. Это их право.Тег b должен выделять слово или словосочетание.
Тег strong должен выделять законченую смысловую сущность.Интересно было бы увидеть ссылку на документ, который это утверждает.
Как я уже говорил проводите тесты и они вам все подтвердят
Вот вам бумажки если нужно
http://html5doctor.com/i-b-em-strong-element/
Свидетели SEO-говы подъехали)
Про b действительно так написано. Но вот i далеко не курсив. Был курсивом до HTML5, а в нем был переработан и получил новую семантическую нагрузку. Теперь он означает термины, идеоматические фразы, транслитерацию, иностранные фразы или текст, который каким-то образом отличается по произношению от остального текста. И об этом написано в живом стандарте
Да, все верно. Но, как я уже сказал, он довольно мало влияет на ранжирование, даже практически не влияет вовсе. Но поговаривают, что это может изменится, но это пока только слухи.
А ну и про b, это много что может быть написано, главное как работает на практике))
Семантические теги в принципе можно разделить на полезные и не очень. Полезные влияют на SEO, улучшают доступность и UX во вспомогательных технологиях. Бесполезные же (как тот же i, b и в принципе многие элементы семантики текста) либо вообще не оказывают никакого влияния, либо оно крайне незначительно
Ну и как оно работает на практике? Где ваши тесты? Кроме слов ничего.
Да, если бы все следовали этим семантическим правилам выделения, намного проще было бы скрывать всякое мешающее чтению (хедеры/футеры/баннеры/etc) баннерорезками.
Увы, наоборот, делают div'ы с динамически генерящимися id или классами, меняющимися ото дня ко дню.
Увы, наоборот, делают div'ы с динамически генерящимися id или классами, меняющимися ото дня ко дню.
Знаете, я не то чтоб против правильной аккуратной разметки вместо дивов, но сколько лет пишу и учусь, НИКТО еще толком не смог ответить на вопрос зачем.
Все что-то втирают про каких-то незрячих людей первым, как будто большинство пользователей интернета слепые. А сколько их на самом деле? Часть процента? И вот ради этих единиц все сайты нужно писать по специальному шаблону? Да перестаньте.
Потом говорят про выдачу, но при этом всегда есть оговорка что на самом деле никто не знает, как работает ранжирование и скан страниц в том же гугле, поэтому мы просто как бы сами это так себе типа вот ну это самое — придумали, короче. Доказательств этому нет кроме скриншота какой-то таблицы из гугла, забавно.
Еще раз уточню, что я согласен что нужны навы и секции, но вот эта мифическая семантика кроме как на словах непонятно зачем и кому нужна на самом деле.
Все что-то втирают про каких-то незрячих людей первым, как будто большинство пользователей интернета слепые. А сколько их на самом деле? Часть процента? И вот ради этих единиц все сайты нужно писать по специальному шаблону? Да перестаньте.
Потом говорят про выдачу, но при этом всегда есть оговорка что на самом деле никто не знает, как работает ранжирование и скан страниц в том же гугле, поэтому мы просто как бы сами это так себе типа вот ну это самое — придумали, короче. Доказательств этому нет кроме скриншота какой-то таблицы из гугла, забавно.
Еще раз уточню, что я согласен что нужны навы и секции, но вот эта мифическая семантика кроме как на словах непонятно зачем и кому нужна на самом деле.
> Все что-то втирают про каких-то незрячих людей первым, как будто большинство пользователей интернета слепые. А сколько их на самом деле? Часть процента? И вот ради этих единиц все сайты нужно писать по специальному шаблону? Да перестаньте.
У меня есть к вам несколько очень конкретных вопросов. Надеюсь, вы сможете на них ответить. Прошу подумать и ответить на них также максимально конкретно.
- Технический вопрос:
Вам реально объективно проще делать, например, заголовки через div'ы со стилями, чем через h1-h6, или всё-таки если с самого начала просто делать правильно, то объём усилий одинаковый?
Укажите один из двух вариантов ответа:
- Трудозатраты на вёрстку без учёта семантики меньше.
- Трудозатраты на вёрстку с учётом или без учёта семантики в целом сопоставимы, если с самого начала просто делать правильно.
- Социологический вопрос:
Сколько незрячих людей должно быть в Интернете или на вашем сайте, чтобы вы решили, что теперь вы будете верстать с учётом семантики?
Укажите точное число людей или количество процентов от всей аудитории. - Экономический вопрос:
Вы осознаёте,
что люди с ограниченными возможностями такие же клиенты с деньгами, как и все остальные,
что в развитых странах они получают гарантированные социальные выплаты, часто являясь более экономически устойчивыми субъектами, чем многие условно здоровые люди,
что они приобретают повышенную лояльность к сервисам, обеспечивающим хорошую доступность,
что они порождают мультипликативные эффекты, приводя в сервис или подсаживая на продукт своих знакомых и родственников?
Укажите один из двух вариантов ответа:
- Да, моя точка зрения о нужности accessibility учитывает все эти факторы.
- Нет, раньше я не задумывался над этими аспектами.
- Тест на эмпатию:
Попытайтесь представить, что вы через месяц потеряете зрение в результате, например, осложнений от гриппа. В какой-то момент вам потребуется заказать доставку еды на дом, но сайты и приложения соответствующих сервисов окажутся недоступными. Скажите, после такого мысленного эксперимента вы по-прежнему придерживаетесь точки зрения, что заниматься accessibility не нужно, потому что целевая аудитория слишком мала?
Укажите один из двух вариантов ответа:
- Я по-прежнему считаю, что разработчикам напрягаться в отношении accessibility не нужно.
- Я изменил свою точку зрения: учитывать accessibility всё-таки нужно, потому что это вопрос принципиальной невозможности для некоторых людей воспользоваться теми или иными сервисами, в том числе покрывающими базовые потребности, на удовлетворение которых люди с ограниченными возможностями имеют, как минимум, моральное, а, по большому счёту, и юридическое право.
- Дополнительный тест на принципиальность:
Если на вопрос 4 вы ответили «Я по-прежнему считаю, что напрягаться в отношении accessibility не нужно», то скажите, вы готовы повторить это, глядя в глаза человеку с ограниченными возможностями, который, например, не смог заказать еды, купить билет на самолёт или сделать очередной платёж по ипотеке в недоступном Интернет-банке, из-за чего получил штрафные начисления?
Ответьте, да, готовы, или вы только в абстрактном разговоре такой правдоруб-социодарвинист, который регистрирует новые аккаунты, чтобы оставлять такие комментарии анонимно?
Жду от вас конкретных ответов на конкретные вопросы. Равно как и от любого другого, кто согласен с озвученной вами позицией. «А» по вопросу ненужности усилий в сфере accessibility говорят очень многие, но я до сих пор не встретил людей, готовых сказать остальные буквы до самого конца. Обычно уже на втором вопросе начинают мяться.
С вашего позволения утащу это к себе в заметки. Хоть распечатывай и каждому в нос тыкай. Браво!
Давайте я начну сразу с конца, чтоб вам было лучше слышно на вашем high horse в красивой белой броне.
4. Всегда будет кто-то, кто не может пользоваться каким-то устройством или услугой. Будут люди без рук и без ног, будут люди с умственными расстройствами, будут люди у которых просто нет денег на смартфон (шок, я знаю), будут дислексики, будут люди, которые не умеют читать (или читать на вашем языке). До куда ВЫ готовы пойти, чтоб подстроиться под каждую новую потребность? Потребности людей всегда будут безграничны, сколько бы вы ни старались, каждый раз найдется кто-то еще, кто не может пользоваться вашим сервисом. И тогда кто-то такой же умный как вы ворвется и скажет «да что вы! как вам не стыдно!» как сейчас вы пытаетесь свысока говорить мне. Это все чушь. Это невозможно.
Я спросил свой вопрос не потому что я отказываюсь это делаю (в первом же сообщении написал, что делаю и обеими руками за семантику), мой вопрос был весьма простой и конкретный: зачем она? Я не верю своим скудным циничным умом, что вот это реальная причина. Она надуманна, потому что именно плохо зрячих людей, которым именно эта технология нужна, объективно очень мало, но при этом вообще ограниченных людей очень много, но почему-то мы вот ограничились только на этих, понимаете? То есть создается такое ощущение, что кто-то, когда-то придумал семантику, и уже потом подогнал под нее вопрос. Типа, я вот сделал как мне нравится, а когда спросят зачем, я ээээ нуууу короче это для слепых, вот такой я молодец.
5. Опять же повторюсь, раз вы не читаете что пишут, что я за семантику, мне просто хотелось узнать ее корни. Которые, очевидно, вы и сами не знаете. Ах да, я зарегал не новый, а первый аккаунт на хабре, потому что раньше не было поводов писать. Вот спросить решил, а тут оказывается только гордые рыцари сидят, которые по делу ничего сказать не могут.
4. Всегда будет кто-то, кто не может пользоваться каким-то устройством или услугой. Будут люди без рук и без ног, будут люди с умственными расстройствами, будут люди у которых просто нет денег на смартфон (шок, я знаю), будут дислексики, будут люди, которые не умеют читать (или читать на вашем языке). До куда ВЫ готовы пойти, чтоб подстроиться под каждую новую потребность? Потребности людей всегда будут безграничны, сколько бы вы ни старались, каждый раз найдется кто-то еще, кто не может пользоваться вашим сервисом. И тогда кто-то такой же умный как вы ворвется и скажет «да что вы! как вам не стыдно!» как сейчас вы пытаетесь свысока говорить мне. Это все чушь. Это невозможно.
Я спросил свой вопрос не потому что я отказываюсь это делаю (в первом же сообщении написал, что делаю и обеими руками за семантику), мой вопрос был весьма простой и конкретный: зачем она? Я не верю своим скудным циничным умом, что вот это реальная причина. Она надуманна, потому что именно плохо зрячих людей, которым именно эта технология нужна, объективно очень мало, но при этом вообще ограниченных людей очень много, но почему-то мы вот ограничились только на этих, понимаете? То есть создается такое ощущение, что кто-то, когда-то придумал семантику, и уже потом подогнал под нее вопрос. Типа, я вот сделал как мне нравится, а когда спросят зачем, я ээээ нуууу короче это для слепых, вот такой я молодец.
5. Опять же повторюсь, раз вы не читаете что пишут, что я за семантику, мне просто хотелось узнать ее корни. Которые, очевидно, вы и сами не знаете. Ах да, я зарегал не новый, а первый аккаунт на хабре, потому что раньше не было поводов писать. Вот спросить решил, а тут оказывается только гордые рыцари сидят, которые по делу ничего сказать не могут.
> Давайте я начну сразу с конца, чтоб вам было лучше слышно на вашем high horse в красивой белой броне.
Вам стоило всё-таки начать с начала, потому что спокойное рассуждение над первыми вопросами подготавливало бы вас к более осознанному восприятию последних. Это давало вам шанс показать себя думающим воспитанным человеком.
> 4. Всегда будет кто-то, кто не может пользоваться каким-то устройством или услугой. Будут люди без рук и без ног, будут люди с умственными расстройствами, будут люди у которых просто нет денег на смартфон (шок, я знаю), будут дислексики, будут люди, которые не умеют читать (или читать на вашем языке).
Совершенно верно, но для большинства перечисленных вами проблем есть свои решения. Именно для этого существуют
специальные контроллеры и системы управления, позволяющие при очень серьёзных нарушениях моторики или при полной невозможности двигаться всё-таки взаимодействовать с компьютерной техникой,
методические приёмы написания текста простыми формулировками, чтобы они легче воспринимались людьми с ментальными нарушениями, неопытными пользователями, типа пожилых людей, или же иностранцами, плохо знающими язык,
специальные шрифты для дислексиков, компенсирующие их трудности восприятия письменного текста,
приёмы адаптации текста для TTS, чтобы его было удобно читать вслух при невозможности или трудности прочитать напрямую,
оптимизация сайтов и приложений под старые и слабые устройства, которыми пользуются люди, не имеющие возможность купить современное мощное оборудование,
локализация на разные языки
и так далее и тому подобное.
Однако вы занимаетесь подменой понятий, когда вопрос семантичной вёрстки ставите в один ряд с этими вещами в контексте трудозатрат.
Разные приёмы повышения доступности имеют разную степень сложности реализации. Делать заголовки через h1-h6 — это совсем не так сложно, как делать перевод сайта на другой язык. Ряд перечисленных проблем и вовсе решается на стороне пользователя, так что от вас усилий не требует.
Вы же не считаете, что наложить вики-разметку на текст статьи в Википедии — это также сложно, как переписать эту статью для другого языкового раздела Википедии?
Именно про простоту использования семантической вёрстки и был вопрос 1, который вы проигнорировали, а вопрос 4 был про эмпатию, когда любой нормальный человек согласен делать малые или вовсе ничтожные усилия ради решения больших проблем других людей, но вы этот вопрос предпочли заболтать демагогическими рассуждениями.
> До куда ВЫ готовы пойти, чтоб подстроиться под каждую новую потребность?
До туда, до куда мне хватит ресурсов разного рода в каждом конкретном случае. Да и всё совсем не так прямолинейно, например, я не знаю китайского, но у меня есть разработки с китайской локализацией, потому что я просто предусмотрел локализуемость, а тот, кто мог перевести, пришёл и перевёл. От меня только требовалась минимальная эмпатия, чтобы задуматься о людях, общающихся на других языках, ну и усилие на подключение gettext в одну строку кода.
Ну а ресурсы для вёрстки заголовков через h1-h6 вместо div есть, на мой взгляд, у каждого разработчика. Особенно если продукт разрабатывается с нуля без тяжёлой наследственности. Здесь и сейчас мы пока говорим только про семантичную вёрстку.
Если кто-то считает, что верстать из одних div и span со стилями без семантических ролей и соответствующих тегов существенно проще, чем верстать хотя бы чуть более семантично, то я хотел бы услышать аргументы.
Именно аргументы, которые я готов рассмотреть и возможно изменить свою точку зрения. Ну а пока я нахожусь на позиции, что активные скептики семантической вёрстки — просто истероиды в фазе отрицания из-за нежелания выходить из зоны комфорта. Зона же комфорта с закреплённой дурной привычкой верстать без семантики сформирована у них всего лишь несистематизированным хаотичным освоением основ HTML.
> Потребности людей всегда будут безграничны, сколько бы вы ни старались, каждый раз найдется кто-то еще, кто не может пользоваться вашим сервисом.
Accessibility — это не то, что нужно сегодня сделать на 100 процентов. Такое, действительно, практически невозможно, хотя к этому стоит асимптотически стремиться. Accessibility — это то, что сегодня должно быть хотя бы чуть-чуть лучше, чем вчера. Перестать использовать сплошные div'ы без ролей, а начать использовать специализированные теги — это подходящий маленький шаг вперёд, который верстальщику практически ничего не стоит.
> раз вы не читаете что пишут, что я за семантику, мне просто хотелось узнать ее корни. Которые, очевидно, вы и сами не знаете.
Если бы я хотел узнать корни семантики, то в текущую дискуссию вошёл примерно бы так:
«Скажите, а откуда вообще взялась семантика в гипертексте? Как мне кажется, контекст доступности появился позже её возникновения.»
Вы же пришли сразу с эпатажными заявлениями в форме безапелляционных заявлений с оборотами «Да перестаньте» или «Это все чушь», ну и с социодарвинистским душком. Не думаю, что у вас есть моральные основания жаловаться на жёсткий ответ. Вам ответили далеко не так жёстко, как вы начали свою ветку дискуссии. Если вы такой резкий, не надо ныть, когда вам тоже отвечают резко, а то это напоминает поведение «картонного» хулигана, обижавшего только малышей в песочнице и первый раз получившего в нос от ровесника.
Базовая семантика в HTML в виде заголовков, списков, таблиц и прочего изначально была чем-то вроде предопределённых стилевых классов. Подразумевалось, что автор просто ставит тег заголовка, а он уже визуально отображается особым образом.
Постепенно аппетиты росли, так что появились каскадные таблицы стилей (CSS).
Понимание ценности семантики для доступности пришло позже, потому что сами технологии обработки веб-страниц при помощи скринридеров появились только через несколько лет, после появления HTML.
В современном смысле, семантичность в любом документе нужна для облегчения его парсинга и переноса в другие форматы. Ну а скринридер — это просто частный случай парсера. Семантика существует не только в HTML, но и в PDF (PDF/UA), и в RTF, и много где ещё.
- Откройте хорошо размеченную статью Википедии.
- Выделите весь текст и скопируйте его в буфер обмена.
- Откройте Word и вставьте туда текст из буфера.
- Откройте Блокнот и тоже вставьте туда текст из буфера.
- Выделите текст в Блокноте и скопируйте его в буфер обмена.
- Вернитесь в Word, создайте ещё один документ и вставьте в него текст из буфера.
- Попробуйте построить оглавление в первом и втором документе Word.
В первом документе HTML-заголовки стали заголовками Word и, сохранив свой семантический смысл, так что мы можем с ними взаимодействовать. Во втором же документе, куда мы копировали plain text, мы потеряли всю семантику (заголовки, ссылки, таблицы и пр.).
Когда вы таблицу верстаете HTML-тегами, её можно прямо со страницы скопировать в Excel и сразу начать работать с ней как с табличной структурой данных. Если же вы сверстаете таблицу на div'ах, то потенциальному аналитику данных придётся сначала пройти ад чистки данных и корректного распределения их по строкам и столбцам.
Если вы будете размечать иностранные слова в русском тексте через атрибут lang, то, когда какой-нибудь Google проиндексирует этот текст и будет читать его через Google Ассистент, иностранное слово, например, греческий корень в энциклопедической статье про термин, будет прочитано греческим синтезатором речи.
В общем современный цифровой текст — это не только символьная запись речи или каких-то понятий, это ещё куча подразумевающихся структур, конструкций на разных языках и прочее. Семантика позволяет сохранять смысл всех этих вещей.
Тут в соседних ветках комментариев спорят о реальной значимости разных тегов. Однако в действительности есть теги, которые вообще мало на что влияют в бытовом вебе и поисковой оптимизации, но они всё равно специфицированы, чтобы именно помогать сохранять те или иные семантические контексты, если это вдруг понадобится. Например, теги удалённого и добавленного текста, чтобы размечать отображения разницы версий текста. Это просто пространство стандарта, которое тоже нужно, потому что такой класс задач существует. И вот HTML уже содержит необходимые решения, которыми при необходимости можно просто сразу взять и воспользоваться, не изобретая новое решение для каждой такой задачи.
Человеческая цивилизация развивалась за счёт накопления и систематизации знаний. В цифровой форме этому процессу помогает не просто хранение данных, но и их правильная разметка. Семантическая вёрстка — это, как бы пафосно не звучала, ваш личный вклад в правильное накопление и хранение знаний человечества. Хранения в виде правильных семантических структур, а не в виде свалки букв.
Времена раскрашенного «плоского» текста прошли. Сегодня все данные должны создаваться, передаваться и храниться с максимально подробной семантической разметкой. Ну а данными является всё, даже глупые комментарии на Хабре. Какие данные являются ценной информацией — это уже не верстальщику решать.
Но даже, если бы семантика в вебе была нужна исключительно незрячим, то всё равно этим бы стоило заниматься, потому что ни один верстальщик не переломится, если заголовки будет размечать через h1-h6.
Просто делайте, как вам сказали, и не рассуждайте.
Это главное, что надо вынести из всей этой дискуссии тем, кто плохо воспринимает абстрактные фундаментальные концепции. (Тут я как бы упрощаю задачу и обеспечиваю accessibility для тех, кто слаб в понимании общей аргументации.)
На этом со своей стороны дискуссию в этом ключе заканчиваю. Вы показали себя как не очень воспитанный и не особо интеллектуально чистоплотный оппонент, сваливающийся в демагогию и подмену понятий, а такие собеседники мне не интересны. Надеюсь, вы умеете и по-другому; жаль, что в этот раз у вас не получилось. Задачу же публичного представления близкой мне точки зрения я уже решил.
Значение тега article:
независимая, отделяемая смысловая единица, например комментарийОбъясните пожалуйста, я не понимаю, почему комментарий относиться к тегу article? Ведь комментарий зависимый. Например взять первый комментарий
Давно пора расширить семантический словарь для веб и стандартизировать. Ибо развитые стандарты это основа развития технологии.и например, вставить в статью «Как приготовить блинчики?». Ведь смысл комментария теряется. Получается, что это зависимая смысловая единица. Может я размышляю не в той плоскости?
Ксати main не обязательно один на странице. Их может быть несколько, но только один должен быть активным.
Я продолжу писать в WML
Что насчёт сложности верстки, accessibility и схемы микроформатов? Что внутри тега article, itemprop="comment", vcard,streetadress itemscope, и так далее согласно Schema.org? Это делается? Или осталось в пятилетнем прошлом?
Спасибо за статью, полезно и структурировано.
Я всегда задавался следующим вопросом, валидно ли мы делаем SPA? Суть вопроса в том, что всю семантику мы включаем в <div/>, ведь вариантов у нас немного?
Т.е. получается так:
Я всегда задавался следующим вопросом, валидно ли мы делаем SPA? Суть вопроса в том, что всю семантику мы включаем в <div/>, ведь вариантов у нас немного?
Т.е. получается так:
<body>
<div>
<header></header>
<main></main>
<footer></footer>
</div>
</body>
Спасибо за статью! Я пользуюсь советами HTML академии уже 2 года как начал изучать фронт. Как то на днях, яндекс предложили занять роль ментора на Практикуме в веб части для иностранных студентов. Тестовое сделал, заключалось в код ревью и комменты по работе.
Ответ на мой вариант был отрицательным. Одна из причин была не дал комментариев по семантике.
Но я как раз дал их таким образом что есть:
1- Header, nav
2- Main, section
3- Footer
И когда попросил обратную связь, где посмотреть стандарты по семантике. Мне ничего не скинули в ответ
Sign up to leave a comment.
Забудьте про div, семантика спасёт интернет