User-friendly Forms with Pseudo Classes | CSS-Tricks

Creating a Simple Contact Form with HTML and CSS: A Focus on Accessibility

Hey all you amazing developers out there! Today, I want to show you how to build a simple yet accessible contact form using semantic HTML and a fantastic CSS pseudo-class called :focus-within. This pseudo-class provides control over focus, making it clear to users where they are in the experience. But before we dive into the technical details, let’s explore the essence of web accessibility.

Form Accessibility

Accessibility, often referred to as “a11y”, encompasses various strategies to ensure inclusivity in the physical and digital realms. From wheelchair ramps to color contrast in websites, the goal is to make technology usable for everyone, including those with disabilities. In this tutorial, we will focus on web accessibility, guided by the Web Content Accessibility Guidelines (WCAG).

The :focus-within pseudo-class is a powerful tool for indicating user interaction within a form. By leveraging CSS, we can enhance the accessibility of our forms and improve the overall user experience.

Understanding Focus

Focus is a key aspect of accessibility, signaling to users which elements they are interacting with on a webpage. With CSS, we can style the focus indicator to match the design language of our site.

It’s important to ensure that focus styles have adequate color contrast to remain accessible to all users. Avoid removing focus indicators entirely, as this can hinder keyboard and screen reader users. Instead, style focus indicators thoughtfully to maintain accessibility.

:focus {
  /* Add your styles here */
}

Never completely remove focus styles using outline: 0 or outline: none, as this can create barriers for users with disabilities. Instead, customize focus styles to enhance usability without compromising accessibility.

Exploring :focus-within

The :focus-within pseudo-class is a hidden gem in CSS that allows us to style a parent element when any of its children receive focus. By utilizing semantic markup and CSS, we can enhance accessibility and user experience without compromising design.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="https://css-tricks.com/">Home</a></li>
      <li><a href="https://css-tricks.com/about">About</a></li>
    </ul>
  </nav>
</header>

Semantic elements like header, nav, and footer provide intrinsic accessibility benefits. When custom components are necessary, supplement them with ARIA attributes to ensure full accessibility. The :focus-within pseudo-class opens up a world of possibilities for inclusive design.

:focus-within in Action!

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

The above CSS code will style the form with an orange background, black text, and additional padding when it is in focus. This visual feedback enhances user interaction and accessibility.

For more detailed guidelines on using :focus-within and its impact on accessibility, check out our comprehensive guide here.

Conclusion

Building accessible web experiences is essential for fostering inclusivity and improving user engagement. By harnessing the power of semantic HTML and CSS features like :focus-within, we can create a more welcoming and usable online environment for all users. Let’s continue to prioritize accessibility in our development practices to make the web a better place for everyone!