Skip to content

Instantly share code, notes, and snippets.

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;
}

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

@what1s1ove
Copy link

what1s1ove commented Jan 31, 2020

Вадим, спасибо тебе за всё что ты делаешь, ты супер <з
Есть пару вопрос, которые не знаю с кем можно обсудить, кроме как с тобой)

  1. Output
    Есть такой тег output (вдруг кто не слышал: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output). Когда-то давно, кнопки использовались только в формах. Точней даже не кнопки, а (у меня тут код input type button, но его съел гит). К сожалению, в те времена я ещё не был связан с веб-разработкой. Вадим, как ты думаешь, имеет ли смысл, использовать сейчас output так же, не только в формах, а везде где может понадобиться вывод "вычисленных" данных в виде цифр. Будь то количество товаров в корзине, все количество страниц в пагинации и тд. Спецификация, скринридер вроде не ругаются, но такого я нигде не видел. Только у себя в петах. Всё чтобы разбавить див-суп, так сказать)
  2. section & aria-labelledby
    В одной из переведенных статей(https://medium.com/web-standards/a-todo-list-40a324436b3e), автор пишет: "Чтобы максимально эффективно использовать
    , вы должны подписать их. То есть, связать их заголовки с элементами
    , используя aria-labelledby". С того момента, как прочитал эту статью первый раз, когда её только перевели, я всегда это делаю. Вот прям серьезно всегда. На всех проектах. И иногда, даже "бычу" на людей кто так не делает(мне кажется, что в этом есть что-то не здоровое). Вообще имеет смысл это делать прям всегда?

@CTaHuCJIaB
Copy link

CTaHuCJIaB commented Feb 2, 2020

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

Вопрос: не совсем понял. Как можно сделать фильтры (именно фильтры, а не сортировку) с помощью кнопок или ссылок без формы, если там самое главное - это текстовые поля для ввода краев ценового диапазона, они ведь (инпут-тексты) обязательно должны быть внутри формы, как и чекбоксы, как и радио-баттоны, которые тоже используются в фильтрах? (я про фильтры каталога Техномарта)

@CTaHuCJIaB
Copy link

На странице со статьей (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."

@CTaHuCJIaB
Copy link

Стоит ли по аналогии с авторизацией в барбершопе менять кнопку на ссылку для всех остальных попапов (в "Техномарте", например)?

@yulms
Copy link

yulms commented Feb 4, 2020

В учебном проекте Барбершоп ссылка с мини-карточки товара в каталоге на страницу товара выглядит так:

<a href="catalog-item.html">
  <h3>
    <span>Набор для путешествий</span>
    <span>«Baxter of California»</span>
  </h3>
  <p><img src="img/cat-product-1.jpg" width="220" height="165" alt="Набор для путешествий «Baxter of California»"></p>
</a>

В инспекторе доступности contents: "Набор для путешествий «Baxter of California» Набор для путешествий «Baxter of California»".
При этом в скринкасте читалка произносит текст почему то как надо - один раз - как это можно объяснить?
Является ли такое написание alt ошибкой?

@prkhmnk
Copy link

prkhmnk commented Feb 4, 2020

Для разметки раздела контактов хочу попробовать микроформат hCard. Отталкиваюсь от https://yandex.ru/support/webmaster/hcard/general.html. Можете объяснить от чего зависит механика работы? От классов, разметки, или всего вместе? В своей вёрстке нужно один в один такую разметку делать или достаточно только классы подставить? Подскажите пожалуйста!

@CTaHuCJIaB
Copy link

CTaHuCJIaB commented Feb 5, 2020

На одном из попапов "Техномарта" значение плейсхолдера поля "Ваше имя:" дублирует скрытый label к нему со с текстом "Имя и фамилия". Это потому, что в соответствии с макетом в плейсхолдере лежит значение "Имя Фамилия". В задании сказано, что для каждого поля формы описание должно быть задано с помощью лэйбла. Лектор говорил, что в плейсхолдерах нужно указывать примеры заполнения, а не описание полей. То есть в моем случае в плэйсхолдере должно лежать "Иван Иванов". Как мне быть? Отойти от макета и последовать рекомендации лектора или в точности соблюсти макет, но закрыть глаза на то, что скринридер будет дважды повторять фразу "Имя и фамилия", или же соблюсти в точности макет, но удалить лейбл с описанием для этого поля, и тем самым пойти в разрез с заданием?

@CTaHuCJIaB
Copy link

Читают ли скрин-ридеры текст, не относящийся к интерактивным элементам, например простой параграф на главной "Техномарта": "Интернет-магазин строительных материалов и инструментов для ремонта"?

@frontlake
Copy link

frontlake commented Feb 5, 2020

Здравствуйте) В заданиях к макетам указано, что ссылки без href должны в коде разметки выглядеть как href="". Наставник говорит, что надо обязательно что-то указывать, то есть если адреса пока нет, то ставить href="#". Как правильно?
Аналогичный вопрос по атрибуту action у форм. Указывать его с какой-то заглушкой, как в случае с ссылкой? Если да, то какой символ использовать? Или вообще этот атрибут просто не писать в коде разметки, если нам неизвестен адрес?

@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