Мы разбираем все вопросы. Но вопросов очень много и поэтому часть вопросов мы разбираем на лекции, а на оставшуюся часть отвечаем в гистах. В противном случае лекция бы состояла только из ответов на вопросы. Гисты также полезны и тем, что после лекции у вас будет возможность задать вопрос авторам программы.
В видеолекциях постоянно говорят про какие-то читалки (ридеры) сайтов и т.д. Для чего собственно правильно делать разметку (в рамках доступности), ведь иначе можно было всё сделать дивами. 1. Какими инструментами проверяется доступность? 2. Для кого ещё учитывать разметку для доступности? 3. Существует какой-то чек лист для проверки доступности?
Это хорошие вопросы и на лекции по доступности мы про них подробно расскажем
- В инспекторе(developer tools) вашего браузера есть дерево доступности(accessibility tree). Также есть расширения для браузеров, которые подсказывают, что отсутствуют подписи у интерактивных элементов
- Для всех людей вне зависимости от их возможностей, наличия/отсутствия и типа устройств ввода.
- Есть спецификация WCAG, где вы можете познакомится со всем перечнем. Как пример есть такой чеклист.
В учебных проектах, в каталогах alt="" остаётся пустым, т.к. если его заполнять, то получиться повтор, нормально ли это или лучше перебдеть и везде для картинок вставить описание в alt?
Чаще картинки всё-таки, чем-то отличаются и эти отличия можно описать в alt. Например, "перфоратор Bosch модель SCX-2", "перфоратор Bosch модель SRX-4".
Добрый день, стоит ли использовать тег title для ссылок без href в качестве пояснения для пользователя причины недоступности ссылки (в интерактивных курсах такой тег рассматривался, а как в реальных проектах?). Спасибо
Так как ссылки специально отключены и пользователям в целом не нужно с ними взаимодействовать, то и дополнительно описывать их не нужно.
Если есть две одинаковые формы на сайте, только одна в попапе, то как задавать id для одинаковых полей форм?
Первое что нужно сделать это пересмотреть интерфейс. Из вашего описания не понятно зачем их две. Тут нужно общаться с заказчиком и дизайнером, и пробовать переделать интерфейс.
Если же не получилось, то нужно просто задать разные #id для одинаковых по смыслу полей.
Стоит ли размечать фильтры (по цене, по типу, по названию, от большего к меньшему и наоборот) на странице каталога, в виде формы?
Лучше это сделать с помощью ссылок. Так при нерабочем JS сортировка будет работать, а если JS включен, то уже можно сделать сортировку без перезагрузки страницы.
Селект подразумевает группирование однотивного односложного контента. Представьте себе это как список: шапки, футболки, шорты. Селекты - это элементы формы, то есть эта информация обязательно должна попасть на сервер.
Аккордеоны же скрывают часть информации, которую пользователю захочется увидеть только, тогда она ему нужна. И информация может быть любой: тексты, карты, видео. Взаимодействия с сервером аккордеону не происходит.
У меня в проекте слайдер. Посмотрел, что многие слайдеры в Вебе управляются с помощью радио-кнопок. Корректно ли использовать радио-кнопки вне тега form?
К сожалению, это антипаттерн. Делать слайдеры на CSS самое плохое решение. При добавлении нового слайда придётся дописывать логику в CSS, JS с этим справится гораздо проще. Есть достаточно много нюансов, которые не решить с помощью CSS, поэтому всю логику лучше описывать с помощью JavaScript. Слайдеры тоже.
Изначально CSS подразумевал стилизацию текста. Формы уже существовали, а стилизовать их было нельзя. После этого начались проблемы с тем, что браузеры развивались как хотели. Реализация между браузерами немного отличалась.
Сейчас же для обратной совместимости со старыми браузерами сохраняют старую реализацию стилизации, но с каждым годом стилизовать формы всё проще и проще.
Не до конца понятно какие элементы делать кнопкой, а какие ссылкой. Добавление товара в корзину должно быть кнопкой или ссылкой? И почему?
Вот вам алгоритм принятия решения.
- По умолчанию всё кнопка
- Если подразумевается переход на другую страницу(изменение адреса), то это ссылка.
Всё остальное исходит из ТЗ и совместимостью с неработающими частями сайта. Например, если не работают стили, то логика поменяется? Нет. Поэтому остаётся кнопкой. А если JS отключиться, то как добавить товар в корзину? И в этот самым момент кнопка превращается в ссылку на страницу добавления товара. А при включенном JS мы сможем сделать так, чтобы перезагрузки не происходило. Зато теперь товар смогут добавить абсолютно все пользователи.
Добрый день, правда ли, что кнопки сейчас предпочтительнее делать через тег с атрибутами button или submit, а варианты <input type="button" ...> и <input type="submit"...> перестают использоваться на практике? И есть ли принципиальное отличие в использовании тегов input и button в данном случае? Спасибо
Здравствуйте! В чем разница между тегами и с типами "submit", "button", "reset"? В каких случаях рекомендуете использовать тег , а в каких тег ?
Когда правильно выбирать input type, а когда button?
Есть теги, которые устаревают и их заменяют новые теги. <input type="submit">, <input type="submit"> -такие теги. Использовать их можно, но уже особого смысла нет, так как <button> справляется с их задачами чуть лучше.
Дело в том, что тег <input> одиночный и из-за этого у него нет возможности указать псевдоэлемент или вложить внутрь иконку, в отличии от <button>.
Также у <button> есть точно такие же типы как и у <input>, например <button type="submit">.
Итого: сейчас предпочтительнее использовать <button>.
В каталоге Глейси, в фильтре есть ползунок, который , но он двойной. Как это реализовать без JS?
На просторах интернета, нашёл реализацию слайдера как на гл. странице Глейси с помощью . Это жизнеспособная схема?
С помощью чего и как именно можно реализовать элемент с двойным ползунком в каталоге "Техномарта", который используется для задания ценового диапазона. Вариант c не подходит, так как там всего один ползунок.
Это ловушка! Не всё что выглядит в макете как <input type="range"> должно быть так свёрстано. У вас ещё много будет таких ловушек.
В эти конкретных случаях больше всего подходит следующая структура Она только для примера
<div class="range-slider">
<input type="number" value="0" name="min">
<input type="number" value="0" name="max">
<div class="range-slider-track">
<div class="range-slider-pin range-slider-pin-min"></div>
<div class="range-slider-pin range-slider-pin-max"></div>
</div>
</div>С помощью CSS стилизуем как на макете. С помощь JS делаем возможным перетаскивать пины. Инпуты нужны, чтобы отправлять данные на сервер. Причем в этом примере уже совсем не важно работает JS или нет. Просто без JS у нас не будет функциональности с перетаскиванием пинов.
Есть вопрос, вернее проблема по работе с графикой. Не получается экспорт графики. Подробнее написал в ВК. https://vk.com/wall-189792771_192
Лучше обратиться в техподдержку Adobe.
Экспортирование процесс простой. Правой клавишей по слою > экспортировать в ... Также попробуй экспортировать любой другой слой, например логотип или иконки социальных сетей.
Что такое 15/28? Уточните вопрос, пожалуйста, чтобы было понятно куда смотреть. Пока вопрос не понятен и ответить мы не можем.
Здравствуйте! Подскажите пожалуйста, как сделать чтобы в форме чекбокс и текст располагались в одной строке друг за другом, и при этом на текст действовал тег (т.е. при нажатии на текст отмечался чекбокс). Почему-то когда оборачиваю текст и в тег то чекбокс становится сверху, а текст размещается под чекбоксом. Что я делаю не так? Пример кода: Разрешать гладить
В вашем пример всё хорошо. Только нужно checkbox выровнять по базовой линии текста.
label {
vertical-align: middle;
}Мы это ещё рассмотрим дополнительно на лекциях про сетки.
Вадим, спасибо тебе за всё что ты делаешь, ты супер <з
Есть пару вопрос, которые не знаю с кем можно обсудить, кроме как с тобой)
Есть такой тег output (вдруг кто не слышал: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output). Когда-то давно, кнопки использовались только в формах. Точней даже не кнопки, а (у меня тут код input type button, но его съел гит). К сожалению, в те времена я ещё не был связан с веб-разработкой. Вадим, как ты думаешь, имеет ли смысл, использовать сейчас output так же, не только в формах, а везде где может понадобиться вывод "вычисленных" данных в виде цифр. Будь то количество товаров в корзине, все количество страниц в пагинации и тд. Спецификация, скринридер вроде не ругаются, но такого я нигде не видел. Только у себя в петах. Всё чтобы разбавить див-суп, так сказать)
В одной из переведенных статей(https://medium.com/web-standards/a-todo-list-40a324436b3e), автор пишет: "Чтобы максимально эффективно использовать