Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Вопросы к разделу «Доступность и формы»

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

1. <button> или <input type="submit">?

В формах для кнопок лучше использовать элемент button или input[type="submit"] и аналогичные? В чем разница между и . Почему в Барбершопе для создания просто кнопок использовали второй вариант?

Лучше использовать button, так как button парный тег. У парных тегов есть псевдоэлементы, которые иногда пригождаются, например для того, чтобы повесить иконку. Вообще, тег button вышел позже input[type="submit"] и расширил возможности input. Более того, если ничего не указывать в атрибуте type тега button, то тип по умолчанию является submit, но вы всё равно указывайте тип. Сейчас нет никакого смысла пользоваться input[type="submit"].

Почему в Барбершопе для создания просто кнопок использовали второй вариант?

В этому случае у нас стоял выбор между <a> и <button>. Если элемент никуда не ссылается, то это button.

2. Как поменять фон страницы по радиокнопке?

В слайдере Глейси смена мороженок и фона всей страницы осуществляется с помощью радиокнопок. Как с помощью селектора, учитывающего состояние checked, не просто поменять слайд, но и фон всей страницы? Разве цвет фона не будет параметром body?

Как поменять фон страницы по радиокнопке?

Такие сложные стилистические изменения делают с помощью JavaScript. CSS применяется только для стилизации каких-то простых смен состояний, например :hover, :disabled. Как только появляется чуть более сложная логика, то от изменения стилями отказываются. Ведь вам придётся специально подстраивать разметку под стили.

Конкретнее. Все селекторы в CSS работают в глубь DOM-дерева, а не на наружу. Получается, что при изменение :checked состояния нам нужно, чтобы input находился рядом с body. И тогда у вас может возникнуть мысль создать новый div у которого будет меняться фон, который будет находится рядом с input, а сами input переместить выше. Хотя на макете всё наоборот. Появляется дополнительная разметка. Усложняется понимание CSS-стилей. Также у вас сразу же возникнут проблемы, когда вы захотите добавить новый слайд, ведь придётся писать дополнительные CSS-стили.

3. Как использовать <label>?

С какими типами форм можно использовать label - input, select, еще какие-то? Как все же правильно делать, обворачивать в , или же прописывать for и id для каждого из них? В каких случаях label и поле ввода нужно связывать по id, а когда можно лишний раз не усложнять код и расположить input внутри label?

Спецификация прямо говорит с каким элементами может быть ассоциирован <label>. Посмотреть можно тут. image Нас интересует самый правый ряд.

<label> можно использовать и так и так. Всё зависит от того как удобнее вам в конкретном месте. Использовать связку for и id удобно, когда вам не нужно, чтобы элементы находились вместе, например при использовании в таблицах. Часто же, элементы форм оборачивают в <label> и это нормально.

Только есть одно предостережение, когда вы оборачиваете ссылки с помощью <label> делайте это правильно.

<!-- плохой пример -->
<label>
  <input type="checkbox" name="tac">
  <a href="tandc.html">Я согласен с пользовательским соглашением</a>
</label>

Этот пример плох тем, что при клике на текст вы переходите по ссылке и никак не меняете состояние чекбокса.

<!-- хороший пример -->
<label>
  <input type="checkbox" name="tac">
  Я согласен с <a href="tandc.html">пользовательским соглашением</a>
</label>
<!-- хороший пример -->
<label>
  <input type="checkbox" name="tac">
  Я согласен с пользовательским соглашением
</label>
(прочитать <a href="tandc.html">пользовательское соглашение</a>)
@chapaikaNK

This comment has been minimized.

Copy link

commented Sep 13, 2019

Не совсем понятно про форму поиcка в проекте техномарт
Реализовывать ли ее через input type="search",либо посредством другой формы?
Является ли слово "поиск" placeholder? Если да то тогда почему в styleguide при неаведении показывается "перфоратор"?

@ZomboBombo

This comment has been minimized.

Copy link

commented Sep 13, 2019

Здравствуйте!

Вопрос по разметке секции "Записаться" в учебном проекте: почему в скринкасте и демке форма размечена только с помощью <input type="text"> (кроме поля для номера телефона)?
...
<form action="https://echo.htmlacademy.ru" method="post">
    <input type="text" name="date" value="" placeholder="08.10.2017">
    <input type="text" name="time" value="" placeholder="10:00">
    <input type="text" name="name" value="" placeholder="Борода">
    <input type="tel" name="phone" value="" placeholder="+7 123 456-78-90">
</form>
...
Существуют, ведь, и более подходящие для каждого поля типы, такие как type="date", type="time".
Почему они не используются в скринкасте и демке и можно ли их использовать в своих проектах?

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 13, 2019

@chapaikaNK, <input type="search"> это правильный тип поля для поисковой строки. Другое дело, сколько реальной пользы приносит пользователям эта правильность, по сравнению с <input type="text">. Кажется, что немного — клавиатура телефона или вообще не меняется, либо незначительно. Учитывая, что вам придётся потратить какое-то дополнительное время, чтобы привести его внешний вид к макету, ценность такой «правильности» снижается.

Текст «Поиск» — это лейбл поля, его описание, а не пример поиска, поэтому это не placeholder.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 13, 2019

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

    <input name="date" value="" placeholder="08.10.2017" type="date">
    <input name="time" value="" placeholder="10:00" type="time">
    <input type="text" name="name" value="" placeholder="Борода">
    <input type="tel" name="phone" value="" placeholder="+7 123 456-78-90">

image

@ZomboBombo

This comment has been minimized.

Copy link

commented Sep 13, 2019

Понятно, спасибо.

@egolikov

This comment has been minimized.

Copy link

commented Sep 13, 2019

Добрый день. В каких случаях используется aria-label? Только когда мы делаем кастомный интерактивный элемент?

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 13, 2019

@egolikov, aria-label нужен тогда, когда вам нужно добавить доступный лейбл (подпись) к любому элементу. Это может быть интерактивный элемент, вроде поля формы или ссылки, либо обычный элемент, вроде картинки. Примеры:

  • <button type="button" aria-label="Закрыть карту">x</a>
  • <a href="" aria-label="Глейси в Твиттере"></a>
  • <svg role="img" aria-label="Картинка"><path>…</path></svg> равносилен <img alt="Картинка">
@egolikov

This comment has been minimized.

Copy link

commented Sep 13, 2019

Спасибо.

@pepelsbey, тогда какая разница, например, между текстом внутри ссылки, который делает её доступной
<a href="">Глейси в Твиттере</a>
и ссылкой с aria-label
<a href="" aria-label="Глейси в Твиттере"></a>

Что лучше использовать и в каких ситуациях?

@thelera

This comment has been minimized.

Copy link

commented Sep 14, 2019

Зачем у тега <input> в форме фильтров товаров на странице каталога барбершопа прописан класс visually-hidden? (на видео в в скринкасте по разметке внутренних страниц барбершопа)

@thelera

This comment has been minimized.

Copy link

commented Sep 14, 2019

Можно ли на странице index.html барбершопа в форме обернуть поля формы в <fieldset> + добавить <legend>?
Обязательно ли <input> в связке с <label> оборачивать в <p>?

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 14, 2019

@egolikov, для конечной задачи разницы нет: скринридеру будет одинаково в обоих случаях.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 14, 2019

@hazerman, сайт без стилей — это миф. Я не знаю ни одного сайта, который смог бы работать без стилей хотя бы на половину. Более того, чтобы на самом деле обеспечить функционирование сайта без стилей, нужно очень сильно заморочиться и в реальной жизни вам никто на даст время на это. Если вы делаете что-то сложнее текстовой страницы, что-то на JS, то сделать адекватный фолбэк просто невозможно. Есть и третий аргумент: без стилей — это не ваш сайт, это какая-то сломанная незнакомая страница, никто из пользователей не будет пользоваться сайтом, на котором отвалились стили, если только от этого не зависит их жизнь. Пожалуйста, не распростаняйте этот миф. Его главная проблема в том, что он не только нереален, но и нереализуем.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 14, 2019

@thelera, на демке visually-hidden проставлен для чекбоксов и радиокнопок, которые вам нужно сверстать по дизайну. Этот класс доступно прячет оригинальные чекбоксы и позволяет вам сверстать «поддельные» по дизайну, оставив настоящие для доступности. Расскажем об этом в следующих разделах.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 14, 2019

@thelera, оборачивать поля формы в тег «группа полей» (fieldset) нужно, если это группа полей и у них есть подпись. Если это одно поле или это не логическая, а визуальная группа — оборачивайте в <div>, тег без логического смысла. Оборачивать поля и лейблы в <p> не обязательно.

@kashmir1

This comment has been minimized.

Copy link

commented Sep 15, 2019

Интерактивные элементы, которые никуда не ведут, а переключают информацию на странице, это кнопки или псевдоссылки, которые мы потом "оживим" Javascript? Например на техномарте в блоке "Сервисы" у нас вкладки - гарантия, доставка, кредит. У них тот же принцип, что и в галерее на барбершопе? Т е делать их button.

Смутило, что там есть состояние active для вкладки

@kashmir1

This comment has been minimized.

Copy link

commented Sep 15, 2019

Что на текущем этапе делать с <input type="range"> c двумя ползунками? Насколько я понимаю, без JS его не сделать интерактивным. На этапе работы с формами и последующим CSS его просто оформить визуально? Будем ли разбирать его в лекции по JS?

@consaltus

This comment has been minimized.

Copy link

commented Sep 15, 2019

@chapaikaNK, <input type="search"> это правильный тип поля для поисковой строки. Другое дело, сколько реальной пользы приносит пользователям эта правильность, по сравнению с <input type="text">. Кажется, что немного — клавиатура телефона или вообще не меняется, либо незначительно. Учитывая, что вам придётся потратить какое-то дополнительное время, чтобы привести его внешний вид к макету, ценность такой «правильности» снижается.

Текст «Поиск» — это лейбл поля, его описание, а не пример поиска, поэтому это не placeholder.

Тогда вообще путаница получается. Этот лейбл надо скрывать через visually-hidden? "Поиск" прописывать через value? Стоило на лекции возможно сообщить об этом, т.к. поле поиск очень распространенное.

@rimidbit

This comment has been minimized.

Copy link

commented Sep 15, 2019

Ссылка имеет смешанное тело (картинка-иконка и текст), у картинки заполнен alt , в результате в Accessibility описание ссылки выглядит как содержимое alt + текстовая часть ссылка. Как грамотно заполнять в таких случаях alt? Если можно объясните на примере

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 17, 2019

@kashmir1, всё верно: переключение табов — это как переключение картинок в галерее, для этого хорошо подходят кнопки. У кнопок тоже может быть активное состояние, я показывал это в демке про кнопки. Но может быть вы имеете в виду не active, а current? Это состояние вы описываете классом, который меняет дизайн этой кнопки.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 17, 2019

@kashmir1, с двумя ползунками ничего не поделать, к сожалению: у вас не получится оформить <input type="range"> так, чтобы там появилось два ползунка. Вам нужно сверстать ползунок на нейтральных дивах и спанах, чтобы его можно было потом оживить на JS.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Sep 17, 2019

@rimidbit, при смешанном или сложном содержимом ссылки можно написать такой ссылке aria-label, который перезапишет всё описание, которое генерируется от её содержимого. Это будет проще всего сделать. То есть лучше воспользоваться специальным атрибутом для улучшения доступности, чем модифицировать текст ссылки или альт картинки.

@Ali-Gator

This comment has been minimized.

Copy link

commented Oct 21, 2019

На сайте: https://weblind.ru/inner.html#health имеются такие примеры:

<label id="label-mail">Электронная почта</label>
<input type="email" aria-labelledby="label-mail" aria-required="true" tabindex="0">
<label id="label-phone">Телефон</label>
<input type="email" aria-labelledby="label-phone" aria-required="true" >

Насколько я понимаю, не хватает атрибута for для label, равного по значению атрибуту id у input. Я прав? Или в приведенном выше примере всё корректно и так можно связывать подпись и элемент? Т.к. по факту связь работает в браузере.

@pepelsbey

This comment has been minimized.

Copy link
Owner Author

commented Oct 21, 2019

@Ali-Gator, Веблайнд говорит о доступном описании контрола с помощью альтернативной адресации. К сожалению, эта адресация помогает только скринридерам и нет удобной связи «нажал на лейбл — сфокусировал поле», так что я бы не рекомендовал такой способ.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.