Skip to content

Instantly share code, notes, and snippets.

@pepelsbey
Last active January 29, 2021 11:11
Embed
What would you like to do?

Вопросы к разделу «Доступность и формы»

Смысл задавать вопрос если лекторы их не разбирают?

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

Для чего повышать доступность интерфейсов и как проверять доступность?

В видеолекциях постоянно говорят про какие-то читалки (ридеры) сайтов и т.д. Для чего собственно правильно делать разметку (в рамках доступности), ведь иначе можно было всё сделать дивами. 1. Какими инструментами проверяется доступность? 2. Для кого ещё учитывать разметку для доступности? 3. Существует какой-то чек лист для проверки доступности?

Это хорошие вопросы и на лекции по доступности мы про них подробно расскажем

  1. В инспекторе(developer tools) вашего браузера есть дерево доступности(accessibility tree). Также есть расширения для браузеров, которые подсказывают, что отсутствуют подписи у интерактивных элементов
  2. Для всех людей вне зависимости от их возможностей, наличия/отсутствия и типа устройств ввода.
  3. Есть спецификация WCAG, где вы можете познакомится со всем перечнем. Как пример есть такой чеклист.

Текст в alt

В учебных проектах, в каталогах alt="" остаётся пустым, т.к. если его заполнять, то получиться повтор, нормально ли это или лучше перебдеть и везде для картинок вставить описание в alt?

Чаще картинки всё-таки, чем-то отличаются и эти отличия можно описать в alt. Например, "перфоратор Bosch модель SCX-2", "перфоратор Bosch модель SRX-4".

Как правильно подписать ссылки без href?

Добрый день, стоит ли использовать тег title для ссылок без href в качестве пояснения для пользователя причины недоступности ссылки (в интерактивных курсах такой тег рассматривался, а как в реальных проектах?). Спасибо

Так как ссылки специально отключены и пользователям в целом не нужно с ними взаимодействовать, то и дополнительно описывать их не нужно.

Если есть две одинаковые формы на сайте, только одна в попапе, то как задавать id для одинаковых полей форм?

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

Если же не получилось, то нужно просто задать разные #id для одинаковых по смыслу полей.

Стоит ли размечать фильтры (по цене, по типу, по названию, от большего к меньшему и наоборот) на странице каталога, в виде формы?

Лучше это сделать с помощью ссылок. Так при нерабочем JS сортировка будет работать, а если JS включен, то уже можно сделать сортировку без перезагрузки страницы.

Подскажите, пожалуйста, как отличить меню аккордеон от селекта ?

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

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

Слайдер на CSS

У меня в проекте слайдер. Посмотрел, что многие слайдеры в Вебе управляются с помощью радио-кнопок. Корректно ли использовать радио-кнопки вне тега form?

К сожалению, это антипаттерн. Делать слайдеры на CSS самое плохое решение. При добавлении нового слайда придётся дописывать логику в CSS, JS с этим справится гораздо проще. Есть достаточно много нюансов, которые не решить с помощью CSS, поэтому всю логику лучше описывать с помощью JavaScript. Слайдеры тоже.

Почему так сложно стилизовать элементы форм?

Изначально CSS подразумевал стилизацию текста. Формы уже существовали, а стилизовать их было нельзя. После этого начались проблемы с тем, что браузеры развивались как хотели. Реализация между браузерами немного отличалась.

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

Кнопка или ссылка

Не до конца понятно какие элементы делать кнопкой, а какие ссылкой. Добавление товара в корзину должно быть кнопкой или ссылкой? И почему?

Вот вам алгоритм принятия решения.

  1. По умолчанию всё кнопка
  2. Если подразумевается переход на другую страницу(изменение адреса), то это ссылка.

Всё остальное исходит из ТЗ и совместимостью с неработающими частями сайта. Например, если не работают стили, то логика поменяется? Нет. Поэтому остаётся кнопкой. А если JS отключиться, то как добавить товар в корзину? И в этот самым момент кнопка превращается в ссылку на страницу добавления товара. А при включенном JS мы сможем сделать так, чтобы перезагрузки не происходило. Зато теперь товар смогут добавить абсолютно все пользователи.

<input> или <кнопки>?

Добрый день, правда ли, что кнопки сейчас предпочтительнее делать через тег с атрибутами 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>.

Как верстать двойной <input type="range">?

В каталоге Глейси, в фильтре есть ползунок, который , но он двойной. Как это реализовать без 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 Откуда взялся oninput и с чем его едят &

Что такое 15/28? Уточните вопрос, пожалуйста, чтобы было понятно куда смотреть. Пока вопрос не понятен и ответить мы не можем.

Как расположить элементы на одной строке

Здравствуйте! Подскажите пожалуйста, как сделать чтобы в форме чекбокс и текст располагались в одной строке друг за другом, и при этом на текст действовал тег (т.е. при нажатии на текст отмечался чекбокс). Почему-то когда оборачиваю текст и в тег то чекбокс становится сверху, а текст размещается под чекбоксом. Что я делаю не так? Пример кода: Разрешать гладить

В вашем пример всё хорошо. Только нужно checkbox выровнять по базовой линии текста.

label {
   vertical-align: middle;
}

Мы это ещё рассмотрим дополнительно на лекциях про сетки.

@pepelsbey
Copy link
Author

@what1s1ove,

Есть такой тег output. Вадим, как ты думаешь, имеет ли смысл, использовать сейчас output так же, не только в формах, а везде где может понадобиться вывод "вычисленных" данных в виде цифр. Будь то количество товаров в корзине, все количество страниц в пагинации и тд.

<output> используется редко и кажется один из тех тегов, которые оказались не слишком востребованны разработчиками. Но если вам нравится — вперёд, вы покажете знание тегов, кроме дива.

В одной из переведенных статей, автор пишет: "Чтобы максимально эффективно использовать <section>, вы должны подписать их. То есть, связать их заголовки с элементами , используя aria-labelledby". Вообще имеет смысл это делать прям всегда?

В рамках этого курса мы специально не углубляемся в ARIA и учим вас встроенной семантике HTML. По идее, заголовка внутри <section> должно хватать — как минимум, эти заголовки будут полезны при навигации по заголовкам. А вот чтобы сами секции стали полезными, их нужно дополнительно связывать с заголовками. Читайте статьи, делайте лучше :)

@baileys-li
Copy link

Есть теги, которые устаревают и их заменяют новые теги. <input type="submit">, <input type="submit">

Опечатка, как я понимаю. Имелось в виду <input type="submit"> , <input type="reset"> и <input type="button">

@alenashashko
Copy link

Подскажите, пожалуйста, нужно ли прописывать value=" " (пустой атрибут) для полей input type="text" ?? В разметке барбершопа присутствует. Если нужно, то для чего это делается? Спасибо!

@pepelsbey
Copy link
Author

@alenashashko, мы хотим, чтобы в верстали работоспособные формы, то есть проверяли их на нашем тестовом сервере, которые указан в экшене формы. То есть указание данных, которые передаются на сервер приветствуется. Для текстовых полей это введённый текст, для чекбоксов name, для радиокнопок — name и value.

@Nismoracer
Copy link

Добрый день. Пробовал "ходить" по своему сайту с клавиатуры. Столкнулся со следующей проблемой: в гугл хроме получается отлично перемещаться по всем ссылкам, кнопкам и элементам формы. Со всеми остальными браузерами ситуация иная - с клавиатуры получается перемещаться только между элементами "input" формы, ссылки они игнорируют. Использование "tabindex" и "outline" для :active не помогает. Как можно побороть эту проблему? Заранее спасибо.

@pepelsbey
Copy link
Author

@alenashashko добавлять пустой атрибут value не нужно, атрибут value для радиокнопок лучше заполнять чем-то подходящим по смыслу, именно пара name-value отправляется на сервер в этом случае.

@pepelsbey
Copy link
Author

@Nismoracer похоже, что у вас macOS, где навигация по всем интерактивным элементам выключена по умолчанию. Её можно включить в настройках клавиатуры: System Preferences > Keyboard > Navigate (…) All Controls — или что-то вроде.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment