Комментарии 6
Вау, целая статья про гиперссылку и все ради рекламы яндекс сервиса. А теперь скажи Настя, а есть другие замечательные сервисы (вроде htmlbook) которые рассказывают про тэги в html?
Конечно! Htmlbook отличный) Также часто заглядываю в MDN Web Docs. Привела для примера Доку по своим субъективным предпочтениям и ощущениям, что именно дизайнерам (особенно новичкам) подтянуть базу по веб-разработке – самое то.
htmlbook уже не актуален. Он не обновляется, не поддерживается и там много ошибок, неточностей и допущений. Лучше уж в качестве справочника использовать MDN. Но Дока хороша тем, что это актуальный русскоязычный справочник, который активно развивается и поддерживается сообществом.
Статья про HTML, поэтому не могу пройти мимо и хочу сделать несколько уточнений.
Aria-labelтоже хранит в себе описательный текст для ссылки.
Важный момент. Если у ссылки есть текстовое содержимое, то aria-label использовать не стоит. С иконками тоже нюанс: если иконка сама по себе имеет имя (например <img> с alt), то aria-label будет лишним.
Например, для иконки-крестика закрытия окна, иконки-карандаша редактирования параметров.
На мой взгляд не очень хорошие примеры. Иконка-крестик закрытия окна должна быть кнопкой, так как это действие, а не навигация. Что касается иконки-карандаша, то зависит от контекста. Если по нажатию данные становятся редактируемыми, появляется всплывающее окно, то это кнопка. Если при нажатии происходит переход на страницу редактирования, тогда это ссылка.
Атрибут disabled
Если добавить тегу ссылки этот атрибут, она станет неактивной, некликабельной
У ссылок нет атрибута disabled, его указание ни к чему не приведёт и выбрать элемент в CSS при помощи псевдокласса :disabled также будет нельзя.
Атрибут disabled можно назначить не только ссылке, а любому интерактивному элементу: кнопке, чекбоксу и т.д.
Список элементов, для которых доступен disabled достаточно ограничен: <button>, <input>, <select>, <textarea> и <fieldset>. Поэтому я бы сформулировал это так, что disabled можно указать у встроенных элементов форм, а не у любых интерактивных элементов.
Если при этом включить какой-нибудь скринридер, то названия элементов будут озвучиваться.
При использовании скринридера названия в любом случае будут озвучиваться, наличие или отсутствие рамки фокуса на это не влияет. Скринридер использует свой собственный фокус (курсор), который может как совпадать с браузерным фокусом, так и находится в другом месте, отличном от браузерного фокуса (в режиме обзора, например).
Скорее всего, в дизайн-макете вы используете для подобного макета элемент кнопки из дизайн-библиотеки. Но разработчики всё равно сделают её ссылкой, стилизованной под кнопку.
Как раз наоборот. Практика показывает, что когда разработчики видят визуально кнопку, она подписана в макете как "кнопка", в дизайн-системе есть кнопка, то и в коде будет кнопка. Я бы посоветовал дизайнерам в макетах дополнительно отмечать, когда элемент с внешним видом кнопки на самом деле является ссылкой.
Дизайн-разбор ссылок в вёрстке