Мы разбираем все вопросы. Но вопросов очень много и поэтому часть вопросов мы разбираем на лекции, а на оставшуюся часть отвечаем в гистах. В противном случае лекция бы состояла только из ответов на вопросы. Гисты также полезны и тем, что после лекции у вас будет возможность задать вопрос авторам программы.
В видеолекциях постоянно говорят про какие-то читалки (ридеры) сайтов и т.д. Для чего собственно правильно делать разметку (в рамках доступности), ведь иначе можно было всё сделать дивами. 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;
}
Мы это ещё рассмотрим дополнительно на лекциях про сетки.
На странице со статьей (https://allyjs.io/tutorials/hiding-elements.html) про класс visuallyhidden (ссылка на которую размещена в материалах к лекции про "Доступность и формы") присутствует следующая информация: "ally.js is published under the MIT License" и приведена ссылка на текст MIT-Лицензии: https://allyjs.io/legal.html, где есть следующие строчки: "The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.".
Вопрос: если я использую css-код класса visuallyhidden, как правильно добавить текст MIT-лицензии в свой проект, чтобы потом не было проблем с авторством? Нужно копировать текст лицензии в каждый файл исходного кода или достаточно разместить его в отдельном файле? Правилен ли следующий вариант: в папку проект добавлен файл "The MIT License (MIT) for usage of the ''visually-hidden'' class CSS-code, that using in this project.doc", содержащий текст:
"The MIT License (MIT) for usage of the "visually-hidden" class CSS-code, that using in this project.
Copyright (c) 2015 Rodney Rehm
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."