Яндекс.Телемост, доступность с клавиатуры и векторные иконки

00:00 Интро
01:38 Обзор интерфейса
04:27 Главные кнопки
07:19 SVG-иконки
14:10 Звук пустых кнопок
17:26 Вкладки в настроках
20:33 Кастомные селекты
23:10 Выводы

* * *

Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12–35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Aputure Light Storm 120d II + Light Dome
Софт: DaVinci Resolve, iZotope RX

[pepelsbey]

01:38 Обзор интерфейса
04:27 Главные кнопки
07:19 SVG-иконки
14:10 Звук пустых кнопок
17:26 Вкладки в настроках
20:33 Кастомные селекты
23:10 Выводы

[antonlogunov]

А мне нравятся ваши оба формата. И как обучающие видео, так и обзор-разбор сайтов. Спасибо ваш труд, очень помогает мне в обучении разработки!))

[almazmusic]

Ах, если бы бизнесу было дело до оптимизаций...

[wmkphsg]

Как же замечательно, что вы продвигаете тему доступности сайтов! Это очень правильно, молодец

[rjrompp]

Что сказать, было интересно.
Вадим, давай про кастомные селекты видео (которые ты в конце рассматривал, в настройках) с рассказом, как сделать их полностью доступными?

[xcnstlz]

Вадим молодец, очень точно все подмечено. Максимальная полезность и лаконичность.

[alexku]

Ну, да: кнопка для кнопки это прогресс после десятка вложенных таблиц.

[sanchezz]

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

[frutezzzzz]

Все супер, спасибо за качественный контент!

[GPTalksZone]

Отличные видео. Спасибо. Продолжайте, это очень информативно.

[dmitry_leo]

Спасибо за твоё творчество! Благодаря тебе я, начинающий верстальщик, каждый раз узнаю что-то новое и сразу стараюсь делать доступными свои первые, тренировочные страницы!

[dahamyr]

Хочу добавить, что Lighthouse уже имеет искать "безымянные" button автоматически, а последней шестой версии он умеет встраиваться в CI (официальная поддержка). Я тестил - работает мгновенно, настраивать просто, к большинству ошибок даёт ссылки на статьи и разбором. Например разбор для кейса кнопок: web.dev/button-name
Вадим, вы не думали записать ролик про фронтопс, рассказать чем линтите ваши проекты? Видел новый сайт веб-стандартов линтится в PR, было бы интересно послушать как настроили и что из линтеров выбрали для себя

[jbgjewr]

А ещё, вроде бы, внутри кнопки нельзя использовать div. Вместо него нужно юзать span. Не знаю с чем это связано, но валилатор ругается.
Хотя вроде как ясно. div - это все таки блок, хоть и не отдельная секция. А кнопки делить на блоки не айс по идее

[mushnikov]

Подумали про будущее )) чтоб потом не добавлять я про autocomlit

[BossRus]

Доброе время суток, мне интересно Ваше мнение по такому вопросу:
Из интерактивных элементов все используют кнопки, либо ссылки.
Но что на счет использования элементов форм? Например, логика работы вкладок в модалке в данном видео, соответствует логике работы нативных радио-кнопок (Включена только одна из группы). Так же, если кнопка работает как "выключатель", логика ее работы такая же как у чекбокса (вкл/выкл).
У нас с коллегами немного разнятся мнения, я считаю, что использование таких элементов оправдано, т.к. нативное всегда лучше кастомного, табы можно переключать стрелками и не пролистывать их все (если их под сотню) кнопкой Tab, коллеги же говорят, что использовать элементы форм вне форм плохо и вообще, какая разница и зачем заморачиваться, если логику можно очень быстро написать, например, на vue.
Спасибо за видео.

[trampsport]

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

[HDD]

В сложных сервисах кнопки типа "войти" зачастую не могут быть кнопками по ряду пичин.
Как правило нужно произвести N запросов чтобы понять как логинить пользователя (возможно это можно сделать без перекидывания на другую страницу).
Хотя можно конечно получше сделать – элемент "войти" ссылкой, но с перехватом клика и если нужно, блокировать переход.

[sergeykozhenkov]

Как обычно познавательно, но такой вопрос давно интересует: что лучше - загрузить svg-иконку или нарисовать на чистом CSS? SVG-анимация или css-анимация? Что в каких случаях лучше?

[sick_bear]

Дизлайки поставили разработчики сервиса))

[levsonc]

Похоже на иконки, экспортированные из Фигмы. Там как раз обычно пять знаков после запятой остаётся.
Ещё есть техника избавления от точки через умножение, например на 100, и соответствующим умножением viewBox, чтобы остались целые числа. Но из-за этого бывают глюки рендеринга в Хроме, особенно под маком. Надо проверять.
P.S. В спеке SVG x̶̶̀m̶̶̀l̶̶̀ǹ̶̶s̶̶̀ (удалено) xml-пролог необязателен. Браузеры понимают его в любой форме. Но не все программы это поддерживают.