Фронтенд и кнопки • Правильная разметка кнопки с иконкой

🗂️ Смотри бесплатные курсы по фронтенд-разработке на канале:
🟠 Курс по HTML
🔵 Курс по CSS
🟡 Курс по JS
🟢 Курс Accessibility
⚪️ Мастер-класс по верстке для новичков
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS)
💬 Чат в телеграмме (помощь новичкам):
@friendlyFrontendChat
#shorts #frontend #фронтенд #html

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@chelchel1542]

Фронтендеры продолжают делать вид что трудятся

[@ДанилТонких-ю3к]

Я конечно душню, но могу сказать как бэкендер, что от фронтендеров намного больше пользы, чем от челов, пишущих документации, сужу по собственному опыту. Мы с другом готовили проект на сдачу нашему преподу, наша тима состояла из 5 человек, но по сути трудились в ней только мы вдвоём, я писал бэк, он фронт, и один из этих оставшихся трёх челов за документацию отвечал (она нужна была по условиям проекта, которые нам препод поставил), ну и так вот, этот чел, когда мы скинули ему готовый сайт, по сути уже на всём готовом, с использованием чатгпт написал документацию, и он так выеживался после этого, типа смотрите какую я сочную документацию сделал, самоутвердиться захотел с помощью чужой работы, а когда мы с другом не успевали допиливать сайт, он вместо того чтобы как-то помочь, просто торопил нас. Ну ладно, справедливости ради, этот чел был не самый бесполезный в нашей тиме, потому что у нас был ещё один чел, который в принципе ничего не делал, даже в день показа проекта, когда мы вчетвером защищали его, он сидел за одним из компов и играл в браузерную змейку

[@jekaagramakov3920]

ухты)) а кто же по вашему впахивает за 3х?))хД

[@yebfudeu3313]

Если использовать дополнительные фреймворки там реально нужно трудиться

[@oxi4825]

🤡🤡🤡

[@СергейНикитин-п4о1э]

брат, главная задача фронтендера, это писать логику кнопки, а не красить ее)

[@AleksanderLamkov]

Ну что ты в самом деле, я же иронизирую 😄 Но всё же и красить кнопки иногда приходится 🥲

[@Gal_Meister]

@@AleksanderLamkovв худшем случае нанимают отдельного верстальщика 🙄 Тратить время фронта на покраску кнопок - слишком дорого

[@flowcsgo804]

Не душни

[@СергейНикитин-п4о1э]

@@flowcsgo804 хуйню не неси)

[@СергейНикитин-п4о1э]

@@flowcsgo804 хуйню не неси)

[@sartjhon3300]

Не знал что с переводом aria-label могут быть проблемы. Благодарочка

[@AleksanderLamkov]

Ознакомься с этим, пожалуйста: adrianroselli.com/2019/11/aria-label-does-not-translate.html И речь идет не о «поле», а об атрибуте. Про изображение - не на этом акцент в видео сделан. Если уж на то пошло, скринридер вовсе зачитает значение из src, но, опять же повторюсь, это видео не про разметку иконки, а про полезную обвязку вокруг. И попробуй-ка через NDVA, JAWS или VoiceOver на практике получить озвучку title. У меня не получилось. Этот атрибут сугубо для браузерного тултипа.

[@szCerber]

Это не контентое изображение, следовательно нехер ему делать в хтмл разметке, по этому суем в контент кнопки спан с названием и классом вижуали хидден, задаем кнопке размеры квадрата, а свг суем бэкграундом в ксс, либо маск имиджем, если нужен интерактив.

[@dreadwood]

@@szCerber а если нужна анимация svg? Или нужно управлять приоритетом загрузки изображения? Хотя обсуждение вообще не об этом

[@АлександрБекач]

Спасибо, было познавательно!)

[@dreadwood]

И этого то же мало. Хотелось бы увидеть про управлением фокуса, состоянием нажатия, раз мы говорим про доступность. Пользователь нажимает, открывается окно, но как он об этом узнает. Он нажал несколько раз на клавишу, но как узнать в каком она сейчас состоянии если это show/hidden?

[@user-lp2cp9vy7q]

можно использовать вместо img svg так будет более лучше

[@AleksanderLamkov]

Согласен. Просто в этом видео акцент сделал на другом.

[@АрнРоанн]

Прости за духоту, но не "более лучше" а либо просто лучше, либо "более качественно". Просто это два прилагательных сравнительной степени, получается масло масляное)

[@miqpaa]

ваш редактор статическим анализом подсвечивает тег img, это предупреждение о том, что alt пусть и пустой, но это обязательный атрибут

[@AleksanderLamkov]

Факт. Не добавил лишь потому, что акцент в видео сделан на другом. По-хорошему для img ещё атрибуты width и height нужно добавить, а ещё лучше - сделать иконку через .

[@ivanspitsyn8951]

Думал расскажут как сделать так чтобы можно было задать несколько тем, размеров и ещё в адаптиве это всё менять, а тут как текст добавить😅

[@TVaNrDwa]

если я не ошибаюсь то для адаптивности размер кнпки в процентах укзазывать, и делать разные проценды для разных разрешений, я фронтендом года 3 не занимался подсказать точно не могу

[@yebfudeu3313]

​@@TVaNrDwaда можно хоть пикселями главное в медиа изменить

[@dphdmn]

Звучит как проблема скрин ридера

[@AleksanderLamkov]

Согласен. Но раз уж мы можем хотя бы подобными костылями улучшить UX пользователей скринридеров, то не стоит этого избегать. Когда скринридеры поумнеют и будут грамотнее обрабатывать aria-label, будет, конечно, получше 🙃

[@captain_zsa]

облом, но нельзя делать кучу этих самых вижуали-хидден. Об этом говорят даже напрямую поисковики. Злоупотреблять этим начали оч сильно. Так что aria-label приходится использовать чаще.

[@dreadwood]

Ссылку можно?

[@yunusgaziev3514]

Лайк за доступность, но img внутри кнопки это зашквар + нет width height и loading decoding.

[@AleksanderLamkov]

Акцент в видео сделан не на этом. Разумеется нужно делать подобные иконки .

[@lukas.pierce]

Походу тут никто не знает оттом что картинку-иконку нужно скрывать от скринридера через aria-hidden="true". Так как данная картинка является декоративным элементом а не частью контента.

[@AleksanderLamkov]

Или можно задать атрибут alt с пустым значением. Будет тот же результат.

[@lukas.pierce]

@@AleksanderLamkov Все верно alt означает алтернативный текст, то есть описание. И если он пустой, то значит нечего озвучивать. Однако поведение браузера может измениться и какой-нибудь умный скринридер через пару лет все равно будет пытаться описать "тут картинка с иконкой конверта". Однако aria-hidden="true" выглядит более надежно, так как он явно указывает что это скрытый элемент по семантике. А пустой alt сейчас почти на всех картинках соответственно развитие технологий пойдет таким образом что все равно нужно принудительно улучшить доступность, так как 90% пустых альтов это просто лень.

[@AleksanderLamkov]

Интересные мысли. Спасибо за развернутый комментарий!

[@keksinjo]

title не рекомендуется указывать, потому что его просто нельзя увидеть, если не наводиться мышкой, т.е. не сработает при использовании клавиатуры, рекомендуется делать отдельный попап

[@AleksanderLamkov]

В целом согласен, но для пользователей тачскринов тултипы в принципе редко делают, это им и не нужно, и так ведь места на экране мало, иконки достаточно. Тут уж хотя бы юзерам десктопа добавить удобств и уже хорошо 🙂

[@Начинающийпрограммист-ю2щ]

Ну, тут вроде речь была про людей с ограниченными возможностями, в им достаточно aria-label, если не ошибаюсь А про попап, который заменяет title при табуляции я чет не задумывался. Но тогда всем Клементом нужно вешать событие на табуляцию, что бы появлялся этот елемент? Понятно, что это через функцию высшего порядка сделать можно или компоненту высшего порядка, но все же чет ооочень заморочено. Я верно ведь понял идею с попапом или нет?

[@keksinjo]

@@Начинающийпрограммист-ю2щ aria-label не достаточно, тут намного более широкая тема)

[@navi4046]

Можно еще добавить картинке alt)

[@Начинающийпрограммист-ю2щ]

Можно добавить? Нужно! И не забывать делать картинки через фиксированные размеры, а не, что бы картинка расширяла блок.

[@thepoisonoflegend]

Фронтендеры, где краску для кнопок покупаете?

[@Joy-Boy776]

Ты любишь программировать: Пишешь код и получаешь удовольствие от этого, а когда код работает то удовольствие приходит в двойне!!

[@ДанилТонких-ю3к]

А когда код не работает, то скорее он получает удовольствие над тобой

[@Joy-Boy776]

@@ДанилТонких-ю3к ну да 😄

[@ilyasidorchik]

и ещё скрыть img через aria-hidden="true"

[@AleksanderLamkov]

Да, будет полезно. Или можно оставить alt атрибуты пустым, чтобы скринридер не зачитывал содержимое из src 😅

[@Sclif999]

Привет из бутрастрапа, sr-only

[@argabid5897]

Автор, ты отстал от жизни, красить кнопки было модно 10 лет назад. Сегодня фронтенд - это лицо и двигатель бизнеса

[@AleksanderLamkov]

К чему такая серьезность?) Это ведь была ирония.

[@АндрейАндриянов-т7ж]

Но тем не менее, кнопки то всё ещё красим?)

[@asante5979]

Лицо бизнеса показывается на презентациях инвесторам, они и есть двигатель бизнеса. Много взяли на себя

[@anazkomult]

Успокаивай себя дальше.

[@user-rb7vs5bx6b]

Ща бы title в 2024 юзать

[@AleksanderLamkov]

Ща бы что-то кроме div в разметке в 2024 писать Из той же серии 🥲

[@qwapple]

@@AleksanderLamkov щас бы div в 2024 юзать

[@asante5979]

А что с title не так? Я только начал изучать разметку

[@user-rb7vs5bx6b]

@@asante5979 когда в последний раз на каком-то сайте ты наводил мышку на какой-то элемент, чтобы дождаться(!) пока появится тайтл чтобы узнать что это за элемент? Должно быть либо интуитивно понятно, либо кастом

[@asante5979]

@@user-rb7vs5bx6b А, ну в плане использовать title как единственный источник инфы это да, неудобно. А то я думал сам атрибут перестал отвечать моде. Спасибо!

[@bomboklaa]

Как жаль, что каждый индус, когда получает отсосорсинговый заказ, на фоне своего невероятного профессионализма во всех областях it забывает про значения сокращений ui/ux и начинает захлёбываться своей превосходной интеллектуальностью, чтобы пользователи vimium никогда быстро не могли нажать туда, куда нужно.

[@artashesmartirosyan6028]

А в какой приложение ты это делал? Типо чтобы и дизайн и коды писать?

[@AleksanderLamkov]

Сверху просто браузер Chrome, снизу IDE WebStorm.

[@ИгорьМешалкин-ж7ф]

Так и не сформулировал в чём проблема. Что решили то?

[@AleksanderLamkov]

1. При наведении курсора на кнопку теперь есть подсказка в виде тултипа, объясняющего, что делает кнопка. 2. Пользователю скринридера теперь озвучится не просто «кнопка», а «кнопка» + то, что написано в visually-hidden элементе.

[@Djimmy2kurtki]

Почему ты постоянно делаешь акцент на скринридер?

[@AleksanderLamkov]

Потому что этой теме недостаточно уделяют внимание на русскоязычном ютубе.

[@wertolotik]

а если ты и кнопки красишь, и логику пишешь, и архитектуру ядра, и все это в адовых количествах?

[@AleksanderLamkov]

Бежать тогда с такой работы надо 🥲 А если серьезно, то декомпозиция, делегирование и work-life-balance. Тащить всё в одиночку - такое себе.

[@wertolotik]

@@AleksanderLamkov тащить все в одиночку это норма для тру инда разраба.... я игрушку делаю)

[@webmobiledev]

А почему вы svg всегда ставите в img? Я вставляю иконки просто как svg, возможно это не правильно

[@timur.shhhhh]

Большое нагромождение кода, + сложнее в стилизации, потому что у тебя могут быть разные изображения в кнопке.

[@AleksanderLamkov]

Я всегда вставляю как . В этом видео акцент не на этом, поэтому сделал через .

[@webmobiledev]

@@timur.shhhhh я через use вставляю,и нет нагромождения

[@geldelian]

use когда много иконок, а так сложно каждый раз лезть и изменять что-то @@webmobiledev

[@lexxkrt]

им фронтэндерам за количество символов платят, поэтому и лишние теги и всякие ария-лабель

[@ЯнДощинский]

Напихаем везде скрытых спанов, чтобы другие люди, пришедшие в проект, потом плевались. Конкретно в этом случае может быть времени займет и немного, но ухудшит кодовую базу точно. Это все влечет за собой замедление разработки, а Единственное преимущество в том, что 0.01% пользователей узнает что это за кнопка из скрин ридера. Лицо продукта представили?

[@AleksanderLamkov]

Мне кажется, ты преувеличиваешь. Ухудшит кодовую базу плохая архитектура, неудачно подобранный стек, некачественное ревью, вечногорящие дедлайны, а не добавление иконочным кнопкам вспомогательного текста. Плеваться будет только невежа, который не шарит в A11y, либо циник, который делит пользователей сайта на сорта и решает отсечь недостойных, ведь их, по его мнению, недостаточно много, чтобы о них вообще задумываться. А ведь ещё бывают ГОСТ требования к доступности определенного рода сайтов, что в принципе вынуждает думать о гораздо большем, нежели о десятисекундном добавлении вспомогательном текста кнопке.

[@dreadwood]

А можно информацию про 0.01%? Это надеюсь статистика пользованием интернета?) Пандусы, кстати, тоже не нужны. Кстати, в Евросоюзе как и США есть штрафы за игнорирования a11y

[@evilballer]

Но с точки зрения логики разметки это костыль

[@AleksanderLamkov]

Да, соглашусь. С aria-label, нормально обрабатывающимся автопереводом, было бы куда более изящнее. Но что есть то есть. В вебе вообще многое делается костылями 🥲

[@dreadwood]

На сайте для a11y должна быть структура заголовков, чтобы пользователь понимал навигацию. А если в дизайне нет явных заголовков, а разбитие на разделы происходит только визуально? В таком случае visually-hidden поможет добавить информации слабовидящим и скроет информацию от остальных, с которым доступен визуальные способы донесения информации

[@elmedvedo8167]

Мда, по сути же костыль на костыле.

[@AleksanderLamkov]

Увы, более изящных решений этой проблемы пока нет :(

[@elmedvedo8167]

@@AleksanderLamkov Понимаю. Инклюзивность вообще огромная головная боль, даже на нативной мобиле

[@RyuzakiRnd]

По-хорошему, следует ещё принудительно писать type="button" (т.к. по умолчанию, type="submit"). Конечно, в спецификации сказано, что type имеет значение только при указанном value, но, де факто, браузеры обрабатывают как им угодно. В общем, если не хотите в какой-то момент словить странное поведение на странице (а потом тратить время на понимание, что же не так), - лучше type="button" прописывать всегда. * Как, собственно, и в других случаях, - если что-то можно указать явно - лучше это сделать, а не полагаться на ожидаемое поведение по умолчанию.

[@RyuzakiRnd]

Отдельно хочется сказать спасибо, что для кнопки в примере использован . Многие, увы, до сих пор для кнопок используют , а потом удивляются сайд-эффектам.

[@AleksanderLamkov]

Да, так делать нужно. Спасибо за содержательный комментарий! В видео акцент сделан на другом, поэтому информацию про type опустил. В своем курсе по HTML и в мастер-классах по верстке я про type постоянно напоминаю 🙂

[@RyuzakiRnd]

А вот class="button" у тега - вопросы вызывает. Был бы класс типа "chat_button" - было бы понятно, что выделяется отдельный класс кнопок, отличающийся от button без класса. Но в данном случае - странная фигня. Если это дефолтный стиль, то почему бы его не задать напрямую тегу , а не навешивать доп. класс сверху?

[@RyuzakiRnd]

Ну и да, для слеш у тега (как и у прочих одиночных тегов) - не нужен. Это требование сугубо xhtml.

[@AleksanderLamkov]

Потому что я всегда верстаю компоненты по БЭМу, чтобы унифицировать специфичность селекторов. Согласно этой методологии использовать в качестве селектора имя тега для дальнейшей стилизации компонента - некорректно.

[@Kolabrod]

ненужная инфа

[@AleksanderLamkov]

Проджект-менеджер проекта с ТЗ по ГОСТу с тобой не согласится 😅

[@dreadwood]

ненужный коммент

[@dinacostudio]

Нет смысла писать и подстраиваться под screenreader так как количество пользователе минимально.

[@BestBoy9543]

Знаешь это как сначала на себя взвалили бремя поддерживать ie версии жизни мамонтов, сейчас сбросили и придумали новое.

[@dinacostudio]

@@BestBoy9543 кстати по поводу ie кто-то все ещё его поддерживает хотя уже нету смысла

[@AleksanderLamkov]

Это пока вы не разрабатываете веб-приложение для большой аудитории, где даже доли процента важны.

[@dinacostudio]

@@AleksanderLamkov ну Эмм на этот процент можно забить если у вас действительно большая аудитория

[@AleksanderLamkov]

Противоречие в своих словах не видите? 🙃 Чем больше аудитория, тем больше владельцы бизнеса борятся даже за крохи процентов аудитории. 1% аудитории сайта Чебоксарской шаурмечной = 2.5 человека 1% аудитории соц. сети = миллион человек А аудитория = деньги.

[@dikem_]

Какие нафиг кнопки? Фронтенд нечто большее

[@Liunamme]

Пользователи мобилки 🗿

[@AleksanderLamkov]

Да, на мобилках никаких тултипов-подсказок для кнопок с иконками не делают, но хотя бы пользователи скринридера (а они тоже пользуются мобилками) смогут понять, что наверняка делает кнопка.

[@maxcraft199]

​@@AleksanderLamkov какой процент пользователей пользуется скринридерами, чтобы для них так заморачиваться?

[@AleksanderLamkov]

В среднем около 5. Да даже если бы 0.01% был, то неужели так много времени уходит на то, чтобы написать грамотную разметку?

[@maxcraft199]

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

[@skreepatch2473]

@@maxcraft199 в некоторых странах есть законы которые обязывают владельцев сайтов в сфере обслуживания следить за доступностью (a11y accessibility), так что лучше сразу научиться хорошей базе

[@Prolaps-us]

Почему фронтэнд разработчик должен заниматься этим? Мне кажется должна быть отдельная профессия, что бы специальный человек адаптировал ux для людей с нарушением органов восприятия.

[@Prolaps-us]

Почему вы вообще фокусируетесь на таких вещах? Канал о фронтэнд разработке, мне кажется логичнее было бы уделять таким не очень то и важным темам меньше времени.

[@AleksanderLamkov]

Фронтенд разработчик = разработчик интерфейсов. Именно мы ответственны за то, каким будет UX всех пользователей сайта при взаимодействии с разработанным нами интерфейсом. И не стоит делить клиентов сайтов на «с нарушениями» и «без». Писать правильную разметку не сложно, нужно лишь уделять достаточное ей внимание.

[@Prolaps-us]

@@AleksanderLamkov гораздо интереснее было бы узнать о менее специфичных вещах, но вы уделяете им слишком много времени.

[@AleksanderLamkov]

Например о каких?

[@Prolaps-us]

@@AleksanderLamkov понятия не имею, вы же автор) Свистоперделки всякие, разборы, лайфхаки и прочее связанное с вёрсткой - сугубо фичи связанные с mvp, вот это интересно.

[@NikitaSoncev]

заменил arial на скрытый элемент, вон из профессии

[@AleksanderLamkov]

Никита, самый умный, да? Я на этом собаку съел. С автопереводами aria-label не дружит, учи матчасть: adrianroselli.com/2019/11/aria-label-does-not-translate.html

[@JayDi85]

Хрень полнейшая. Основные мобильные пользователи идут лесом. Ридерами никто не пользуется. Делают кнопки с текстом.

[@AleksanderLamkov]

При чем тут основная аудитория мобильных устройств? У них как всё было, так и останется. Улучшается UX для пользователей десктопной версии сайта и, да, для пользователей скринридера, которых на самом деле больше, чем вам кажется.

[@JayDi85]

@@AleksanderLamkov давайте еще в 2024 году рекомендовать делать две разные версии сайта вместо одного адаптивного. Вообще огонь!

[@AleksanderLamkov]

Зачем же такие крайности? Я предлагаю просто писать хорошо HTML-разметку, чтобы угодить всем пользователям. Не нужно никаких дополнительных библиотек, чтобы обеспечить комфортный UX. Делаем свою работу качественно и пользователи наших веб-приложений останутся довольны 🙂

[@Sclif999]

Проблема как минимум в том что по законодательству многих стран контент должен быть ДОСТУПЕН, если вы делаете сайт медицинской организации вы ОБЯЗАНЫ сделать скринридер, версию для людей у которых проблемы со зрением(кроме размеров шрифтов), а ещё в основную с увеличением буковок

[@kchertupsevdonimi]

Так и делают, называетсяmobile first, а на ПК делают на отвали​@@JayDi85

[@tigranbalayan6521]

Чел ты из какой пещеры?) Такую откровенную чушь несешь) если у тебя есть локализатор почему нельзя вызвать эту функцию и на aria-label? И да чел, ты путаешь верстальшика с фронтэндером. П.С. Я те могу показать такой фронт энд что такой архитектуры в твоих бэк-эндах не было)

[@AleksanderLamkov]

Какой такой «локализатор»?