¡Hola a todos, maravillosos desarrolladores! En esta publicación, lo guiaré en la creación de un formulario de contacto simple usando HTML semántico y una increíble pseudoclase CSS conocida como :focus-within. :focus-within La clase permite un gran control sobre el enfoque y le permite al usuario saber que aquí es exactamente donde se encuentra en la experiencia. Antes de comenzar, vayamos al núcleo de lo que es la accesibilidad web.

¿Accesibilidad del formulario?

Probablemente hayas escuchado en todas partes el término “accesibilidad” o el numerónimo, a11y. ¿Qué significa? Esa es una gran pregunta con tantas respuestas. Cuando miramos el mundo físico, la accesibilidad significa cosas como tener contenedores para objetos punzantes en los baños de su negocio, asegurarse de que haya rampas para personas con ruedas y tener periféricos como teclados con letras grandes a mano para cualquiera que los necesite.

La gama de accesibilidad no termina ahí: tenemos accesibilidad digital que también debemos conocer, no solo para los usuarios externos, sino también para los colegas internos. El contraste de color es una fruta madura que deberíamos poder cortar de raíz. En nuestros lugares de trabajo, asegurarnos de que si algún empleado necesita tecnología de asistencia, como un lector de pantalla, la tengamos instalada y disponible. Hay muchas cosas que deben tenerse en cuenta. Este artículo se centrará en la accesibilidad web manteniendo la WCAG (pautas de accesibilidad al contenido web) en mente.

Esta pseudoclase es realmente genial cuando quieres enfatizar que el usuario de hecho está interactuando con el elemento. Puedes cambiar el color de fondo de todo el formulario, por ejemplo. O, si el foco se mueve a una entrada, puede hacer que la etiqueta de un elemento de entrada esté en negrita y sea más grande cuando el foco se mueve a esa entrada. Lo que sucede a continuación en los fragmentos de código y ejemplos es lo que hace que el formulario sea accesible. :focus-within es solo una forma en que podemos usar CSS a nuestro favor.

Cómo enfocar

El enfoque, en lo que respecta a la accesibilidad y la experiencia web, es el indicador visual de que se está interactuando con algo en la página, en la interfaz de usuario o dentro de un componente. CSS puede saber cuándo un elemento interactivo está enfocado.

Asegúrese siempre de que el indicador de enfoque o el anillo alrededor de los elementos enfocables mantengan el contraste de color adecuado durante la experiencia.

Focus está escrito así y se puede diseñar para que coincida con su marca si decide diseñarlo.

:focus {
  * / INSERT STYLES HERE /*
}

Hagas lo que hagas, nunca establezcas tu esquema para 0 or none. Al hacerlo, se eliminará un indicador de enfoque visible para todos durante toda la experiencia. Si necesita eliminar el foco, puede hacerlo, pero asegúrese de volver a agregarlo más tarde. Cuando eliminas el foco de tu CSS o configuras el esquema en 0 or none, elimina el anillo de enfoque para todos sus usuarios. Esto se ve mucho cuando se usa un restablecimiento de CSS. Un reinicio de CSS restablecerá los estilos a un lienzo en blanco. De esta manera, usted está a cargo del lienzo vacío para diseñarlo como desee. Si desea utilizar un restablecimiento de CSS, consulte El reinicio de Josh Comeau.

*¡NO HAGAS lo que se muestra a continuación!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

¡Mira dentro!

Una de las mejores formas de darle estilo al enfoque usando CSS es de lo que trata este artículo. Si no has revisado el :focus-within pseudoclase, ¡definitivamente échale un vistazo! Hay muchas joyas ocultas cuando se trata de utilizar marcado semántico y CSS, y esta es una de ellas. Muchas cosas que se pasan por alto son accesibles de forma predeterminada; por ejemplo, el marcado semántico es accesible de forma predeterminada y debe usarse sobre div en todo momento.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/es/">Home</a></li>
      <li><a href="/es/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>

El header, nav, main, section, asidey footer Son todos elementos semánticos. El h1 y ul También son semánticos y accesibles.

A menos que sea necesario crear un componente personalizado, entonces un div está bien usarlo, combinado con ARIA (Aplicaciones enriquecidas de Internet accesibles). Podemos profundizar en ARIA en una publicación posterior. Por ahora centrémonos…veamos lo que hice allí…en esta pseudoclase CSS.

El :focus-within La pseudoclase le permite seleccionar un elemento cuando cualquier elemento descendiente que contiene tiene el foco.

:focus-within ¡en acción!

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>

CO

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

El código de ejemplo anterior agregará un color de fondo naranja, agregará algo de relleno y cambiará el color de las etiquetas a negro.

El producto final se parece a lo que se muestra a continuación. Por supuesto, las posibilidades para cambiar el estilo son infinitas, ¡pero esto debería encaminarte a hacer que la web sea más accesible para todos!

Otro caso de uso para usar :focus-within Sería poner las etiquetas en negrita, en un color diferente o ampliarlas para usuarios con baja visión. El código de ejemplo para eso sería similar al siguiente.

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>

CO

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

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

:focus-within también tiene un excelente soporte de navegador en todos los ámbitos según Puedo usar.

Conclusión

Crear una experiencia de usuario sorprendente y accesible siempre debe ser una prioridad máxima a la hora de distribuir software, no sólo externamente sino también internamente. Nosotros, como desarrolladores, hasta llegar a la alta dirección, debemos ser conscientes de los desafíos que enfrentan los demás y de cómo podemos ser embajadores de la plataforma web para convertirla en un lugar mejor.

Usar tecnologías como el marcado semántico y CSS para crear espacios inclusivos es una parte crucial para hacer de la web un lugar mejor, sigamos avanzando y cambiando vidas.

Consulte otro gran recurso aquí en CSS-Tricks en usando: foco-dentro.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
• PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
• PlatoESG. Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
• PlatoSalud. Inteligencia en Biotecnología y Ensayos Clínicos. Accede Aquí.
• Fuente: https://css-tricks.com/accessible-forms-with-pseudo-classes/