Comments 7
Спасибо, очень полезная серия!
(Мой комментарий не очень полезный — зато вызовет улыбку :) )
Извините за оффтопик, хочу задать небольшой вопрос. Для этого я сделаю вид, что «Помогаю узнать больше про Accessibility» из профиля это приглашение задавать подобные вопросы )) На самом деле, просто специалистов по accessibility очень мало, и обсудить толком не с кем.
Как вы боретесь с тем, что aria-controls требует id, а id должны быть глобально-уникальны? Из-за этого становится нельзя пару элементов, один из которых управляет другим, запаковать в шаблон (<template>) и инстанцировать. Точнее, можно, если при инстанцировании шаблона генерировать идентификаторы, но это такой геморрой. Думаю, добавить ли только ради этого в свой шаблонный движок что-то вроде {autoid}, или есть решение красивее?
Чтобы было понятно, вот как мог бы выглядеть шаблон, соответствующий примеру W3:
<template class="text-editor">
<div class="format" role="toolbar" aria-label="Text Formatting"
aria-controls="{autoid}">…</div>
…
<textarea id="{autoid}" rows="20" cols="80" style="font-family: sans-serif">
</template>
А хотелось бы увязывать вот такие парочки элементов как-нибудь на уровне локального скоупа, а не id, чей скоуп — весь документ. Дело в том, что кроме как для accessibility, это больше ни для чего особенно не нужно. Я вообще стараюсь писать idless разметку.
Заранее спасибо.
Как вы боретесь с тем, что
aria-controlsтребуетid, аidдолжны быть глобально-уникальны?
Не борюсь. Меня id устраивает. Другие вопросы можете в тг писать. В профиле указан ник
К сожалению, id уникальны в рамках документа и на данный момент бороться с этим можно только генерируя случайные id. Можете посмотреть в сторону Shadow DOM, он как раз создаёт скоуп, в рамках которого id не будут конфликтовать с другими на странице, даже если будут повторяться. Но Shadow DOM несёт за собой дополнительную специфику, нужно иметь это ввиду.
Судя по примеру кода и описанию задумки, вам как раз бы подошёл Shadow DOM и веб-компоненты в целом. Как раз позволят запаковать шаблон, изолировать id и бонусом автоматическое инстанцирование.
Спасибо! Ну, Shadow DOM это чересчур )) В итоге я прикрутил к шаблонам специальные переменные. Обычные-то переменные уже были, и заполнялись через атрибуты стаба:
<!-- Шаблон -->
<template class="my-template">
<a href="{url}" class="my-url">{text}</a>
</template>
<!-- Stub -->
<div data-template="template.my-template"
data-template-params='{ "url": "https://aliexpress.com", "text": "Alibaba" }'>
</div>
Пришлось добавить к ним специальные переменные, в т.ч. {autoid} (заменяемый на результат crypto.randomUUID(), хоть это несколько пушечно-воробьёво).
КМК, комитету надо было или сделать для идентификаторов послабления до скоупа, или взять за основу для WAI (accessibility) не такой одиозный механизм. Человек, у которого я учился вёрстке, говорил, что id это синглтон, а синглтон это зло (последнее я знал и по C++ и другим императивным языкам).
Неизвестно полезный CSS. Часть 6