Привет всем вам, замечательные разработчики! В этом посте я собираюсь познакомить вас с созданием простой контактной формы с использованием семантического HTML и замечательного псевдокласса CSS, известного как :focus-within, :focus-within class позволяет лучше контролировать фокус и дает пользователю понять, что именно здесь он находится. Прежде чем мы начнем, давайте разберемся в сути того, что такое веб-доступность.

Доступность формы?

Вы, скорее всего, повсюду слышали термин «доступность» или нумероним, a11y. Что это значит? Это отличный вопрос, на который так много ответов. Когда мы смотрим на физический мир, доступность означает такие вещи, как наличие контейнеров для острых предметов в ванных комнатах вашего бизнеса, наличие пандусов для людей, пользующихся колесами, а также наличие под рукой периферийных устройств, таких как клавиатуры с большим шрифтом, для всех, кто в них нуждается.

На этом спектр доступности не заканчивается: у нас есть цифровая доступность, о которой нам также необходимо знать, причем не только для внешних пользователей, но и для внутренних коллег. Цветовой контраст – это низко висящий фрукт что мы должны быть в состоянии пресечь это в зародыше. На наших рабочих местах мы следим за тем, чтобы, если кому-то из сотрудников понадобятся вспомогательные технологии, такие как программа чтения с экрана, мы установили и предоставили их. Есть много вещей, которые необходимо учитывать. В этой статье основное внимание будет уделено доступности Интернета путем сохранения WCAG (руководство по обеспечению доступности веб-контента) в виду.

Этот псевдокласс действительно удобен, когда вы хотите подчеркнуть, что пользователь на самом деле взаимодействует с элементом. Например, вы можете изменить цвет фона всей формы. Или, если фокус перемещается на ввод, вы можете сделать метку элемента ввода жирным и крупнее, когда фокус перемещается на этот ввод. То, что происходит ниже в фрагментах кода и примерах, делает форму доступной. :focus-within это всего лишь один из способов использовать CSS в своих интересах.

Как сфокусироваться

Фокус в отношении доступности и взаимодействия с Интернетом — это визуальный индикатор того, что с чем-то взаимодействуют на странице, в пользовательском интерфейсе или внутри компонента. CSS может определить, когда интерактивный элемент находится в фокусе.

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

Фокус написан так, и его можно стилизовать в соответствии с вашим брендом, если вы решите его стилизовать.

:focus {
  * / INSERT STYLES HERE /*
}

Что бы вы ни делали, никогда не устанавливайте план на 0 or none. Это приведет к удалению видимого индикатора фокусировки для всех на протяжении всего процесса. Если вам нужно удалить фокус, вы можете это сделать, но обязательно добавьте его позже. Когда вы удаляете фокус из CSS или устанавливаете контур на 0 or none, кольцо фокусировки будет удалено для всех ваших пользователей. Это часто наблюдается при использовании сброса CSS. Сброс CSS приведет к сбросу стилей на пустой холст. Таким образом, вы отвечаете за пустой холст и можете его стилизовать по своему желанию. Если вы хотите использовать сброс CSS, проверьте Перезагрузка Джоша Комо.

*НЕ ДЕЛАЙТЕ то, что описано ниже!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Загляни внутрь!

Эта статья посвящена одному из самых крутых способов стилизации фокуса с помощью CSS. Если вы еще не проверили :focus-within псевдокласс, обязательно посмотрите! Когда дело доходит до использования семантической разметки и CSS, есть много скрытых сокровищ, и это одна из них. Многие вещи, которые упускаются из виду, доступны по умолчанию, например, семантическая разметка доступна по умолчанию и должна всегда использоваться поверх элементов div.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/ru/">Home</a></li>
      <li><a href="/ru/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

Ассоциация header, nav, main, section, asideкачества footer все это семантические элементы. h1 и ul также семантичны и доступны.

Если нет необходимости создавать пользовательский компонент, то div можно использовать в сочетании с ARIA (Доступные многофункциональные интернет-приложения). Мы можем более глубоко погрузиться в ARIA в следующем посте. А пока давайте сосредоточимся… посмотрим, что я там сделал… на этом псевдоклассе CSS.

Ассоциация :focus-within псевдокласс позволяет вам выбрать элемент, когда любой элемент-потомок, который он содержит, имеет фокус.

:focus-within В бою!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

В приведенном выше примере кода будет добавлен оранжевый цвет фона, некоторые отступы и изменен цвет меток на черный.

Конечный продукт выглядит примерно так, как показано ниже. Конечно, возможности изменить стиль безграничны, но это должно помочь вам сделать Интернет более доступным для всех!

Еще один вариант использования :focus-within можно было бы сделать надписи жирным шрифтом, изменить цвет или увеличить их для пользователей со слабым зрением. Пример кода для этого будет выглядеть примерно так, как показано ниже.

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within также имеет отличную поддержку браузеров по всем направлениям, согласно Могу ли я использовать.

Заключение

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

Использование таких технологий, как семантическая разметка и CSS, для создания инклюзивных пространств является важной частью улучшения Интернета. Давайте продолжим двигаться вперед и менять жизни.

Посетите еще один замечательный ресурс здесь, на CSS-Tricks. используя :focus-inнутри.

• SEO-контент и PR-распределение. Получите усиление сегодня.
• PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
• ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
• ПлатонЭСГ. Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
• ПлатонЗдоровье. Биотехнологии и клинические исследования. Доступ здесь.
• Источник: https://css-tricks.com/accessible-forms-with-pseudo-classes/