Cómo Crear Casillas de Verificación y Botones de Radio Accesibles Personalizados

Los elementos de formulario como las casillas de verificación y los botones de radio tienen un aspecto distinto dependiendo del navegador del usuario y de su sistema operativo. Por este motivo, los diseñadores y los desarrolladores han estado aplicando durante mucho tiempo estilo a sus propias casillas de verificación y botones de radio, con el objetivo de alcanzar la consistencia con independencia del navegador y del sistema operativo.

Eso es perfectamente válido, pero al mismo tiempo necesitamos asegurarnos de que nuestras casillas de verificación y nuestros botones de radio sigan siendo accesibles a las tecnologías asistivas (AT) y a los usuarios que navegan mediante su teclado. En este tutorial te explicaré qué significa esto y cómo podemos hacer las cosas de forma correcta con algunos métodos distintos.

Estilos Predeterminados del Navegador

Empecemos observando cómo nuestro navegador renderiza por defecto las casillas de verificación. Tal y como hemos mencionado, lo que veas dependerá de tu navegador y de tu sistema operativo.

Comprobarás que puedes usar tu ratón para marcar y desmarcar las casillas, además puedes usar tu teclado (salta de una a otra con el tabulador y cambia su estado pulsando la barra espaciadora, aunque esto puede variar dependiendo de tu configuración).

1. Aplicar Estilo a las Casillas de Verificación Personalizadas

Es el momento de que creer la tuya propia. Vamos a "ocultar" visualmente la casilla predeterminada, colocando nuestras versiones personalizadas en la parte superior. Lo primero que necesitaremos examinar es el código.

El Código HTML

El código para una única casilla de verificación tiene el siguiente aspecto:

1

<div class="wrapper">

2

  <input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues">

3

  <label for="a11y-issue-1">There are no issues</label>

4

</div>

Usamos un contenedor <div> para ayudarnos con los estilos personalizados, pero a excepción de esto, el resto del HTML es código semántico estándar. La magia se dá cuando visualmente ocultamos nuestro <input type="checkbox"> usando la regla CSS opacity: 0.

1

.wrapper {

2

  position: relative;

3

}

4

5

.wrapper input {

6

	height: 40px;

7

	left: 0;

8

	opacity: 0;

9

	position: absolute;

10

	top: 0;

11

	width: 40px;

12

}

Esto esconderá la casilla de verificación, permitiéndonos avanzar y crear la nuestra propia. Es importante que no la ocultemos usando display: none porque esto ocultaría la casilla tanto para el navegador como para las tecnologías asistivas (AT) de los usuarios, y también perderíamos las interacciones con el teclado.   

Habrás observado que, aunque la estamos ocultando, le asignamos una altura y anchura de 40px. Esto nos dará un área de contacto clara y funcional para colocar la casilla que hemos creado.

El <div> contenedor tiene una regla CSS position: relative. Esto nos ayudará a posicionar la casilla de verificación y etiquetar los pseudoelementos ::before y ::after usando position: absolute.

Añade una Casilla de Verificación Visual Usando Pseudo Elementos

Todavía no podemos reconocer la casilla. Para resolverlo, primero añadimos un elemento label::before para añadir un borde:

1

.wrapper input + label::before {

2

	border: 2px solid;

3

	content: "";

4

	height: 40px;

5

	left: 0;

6

	position: absolute;

7

	top: 0;

8

	width: 40px;

9

}

He usado un borde sólido de 2px y un color heredado, pero puedes usar un color distinto para el borde si quieres. Observa como la posición y el tamaño es el mismo que para nuestra casilla transparente.

Con algunos márgenes extra en las etiquetas para proporcionarnos algo de espacio, este será el aspecto de nuestras casillas en este momento:

El siguiente paso consiste en usar el pseudo elemento label::after para aplicar estilo a la "casilla": 

1

.wrapper input + label::after {

2

	content: "";

3

	border: 4px solid;

4

	border-left: 0;

5

	border-top: 0;

6

	height: 20px;

7

	left: 14px;

8

	opacity: 0;

9

	position: absolute;

10

	top: 6px;

11

	transform: rotate(45deg);

12

	transition: opacity 0.2s ease-in-out;

13

	width: 12px;

14

}

Creamos la casilla usando un elemento al que damos un borde de cuatro píxeles por abajo y a la derecha. Después lo rotamos 45 grados: ¡bingo! Una marca de casilla personalizada. También podrías usar colores de borde diferentes para adecuarlas a tu actual diseño.

En este momento no serás capaz de ver nada; todavía estamos ocultando visualmente la marca usando opacity: 0. ¡Solucionémoslo!

Revela la Casilla de Verificación Personalizada Usando el Pseudo Selector :checked

El pseudo selector :checked apunta a una casilla de verificación cuando ésta tiene el estado "on". Podemos usar esto para cambiar la opacidad de nuestra marca personalizada.

1

.wrapper input:checked + label::after {

2

	opacity: 1;

3

}

Hecho esto, lo que tenemos ahora es lo siguiente:

Nota: hay otra cosa que debemos incluir en esto, se trata de los "estilos focus". Los veremos en la próxima demo.

2. Casillas de Verificación Personalizadas Usando SVG en Línea

Llevemos las cosas a un nivel superior. En lugar de un pseudo elemento podríamos usar un icono SVG personalizado para nuestra marca. Para lograrlo, colocaremos el SVG dentro de la etiqueta:

1

<div class="wrapper">

2

	<input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-focus-styles">

3

	<label for="a11y-issue-1">

4

		Focus styles are not present

5

		<svg aria-hidden="true" focusable="false">

6

			// Code for SVG

7

		</svg>

8

	</label>

9

</div>

En la mayoría de los casos es simplemente decorativo, así que aria-hidden="true" lo oculta a los dispositivos AT.

Añadir Estilo SVG

Necesitamos aplicar un par de estilos al elemento SVG de manera que se posicione y adquiera el tamaño adecuado. También podemos usar la propiedad fill para cambiar su color (blue en este caso)

1

.wrapper input + label svg {

2

    border: 0;

3

    fill: blue;

4

    height: 20px;

5

    width: 20px;

6

    opacity: 0;

7

    position: absolute;

8

    left: 10px;

9

    top: 10px;

10

    transition: opacity 0.2s ease-in-out;

11

}

Recuerda los Estilos para los Estado Focus

La inspiración para los estilos de mis ejemplos de casillas de verificación los tomé de el sistema de diseño para los elementos de formulario de GOV.UK (un recurso brillante, búscalo y echa un vistazo). Los estilos focus son tan importantes como en cualquier otro elemento sobre el que se pueda hacer "focus".

1

.wrapper input:focus + label::before {

2

	box-shadow: 0 0 0 3px #ffbf47;

3

}

Nosotros usamos box-shadow para los estilos focus porque éste respetará las esquinas redondeadas, que también usaremos para los botones de radio más adelante.

Añade Estilos Focus para Windows "High Contrast Mode"

Windows High Contrast Mode elimina las reglas box-shadow, esta es la razón por la que también necesitamos añadir estilos de contorno transparente:

1

.wrapper input:focus + label::before {

2

	box-shadow: 0 0 0 3px #ffbf47;

3

	outline: 3px solid transparent; /* For Windows high contrast mode. */

4

}

Este contorno transparente aparece como un borde extra en el modo de alto contraste.

3. SVG como Pseudo Elemento de Fondo

Además de usar código SVG en línea, podríamos recrear también una versión de la primera casilla de verificación que creamos, usando SVG como fondo para el pseudo elemento en lugar de construir nuestra marca "check" con bordes. Hemos cubierto todas las técnicas que necesitas conocer para esto, así que aquí tienes la demo para que la disecciones:

4. Estilos Personalizado para los Botones de Radio

Prácticamente todos los estilo que hemos usado hasta ahora para nuestras casillas de verificación son válidos para los botones de radio. Echa un vistazo a la muestra y obsérvalo por ti mismo (para navegar con el teclado, usa las teclas de Flecha).

La única diferencia aparente es que estamos usando border-radius y aplicando un estilo al estado :checked un poco distinto. Podrías ciertamente usar un icono SVG en este caso también–¡te dejaré esto como deberes!

5. Comprobar la Accesibilidad

Las comprobaciones son una parte importante del proceso cuando trabajamos con elementos HTML nativos. Mis pruebas están lejos de ser perfectas pero así es como lo hice para este tutorial:

• Comprobaciones del teclado en todos los navegadores modernos, y en IE11.
• Voiceover usando Safari.
• NVDA Screenreader usando Firefox.
• Talkback usando un dispositivo Android.
• Condiciones de ceguera al color usando el software Sim Daltonism.
• High Contrast Mode en Windows.

Podría decirse que en esta lista falta un software de reconocimiento de voz como Dragon, o dispositivos de conmutación. Pero en todas mis pruebas los botones de radio y casillas de verificación personalizados se comportaban de la misma manera que los elementos nativos.

Conclusiones y Referencia

Espero que este tutorial te haya proporcionado una comprensión sobre cómo crear estilos personalizados para las casillas de verificación y los botones de radio, teniendo en cuenta la accesibilidad.

Te recomiendo que aprendas más sobre elementos personalizados para formularios consultando estos recursos:

• The Accessibility of Styled Form Controls de Scott O'Hara: Contiene muchos ejemplos extra como las calificaciones mediante estrellas, las selecciones, y los conmutadores.
• Elementos de formulario de GOV.UK.
• Casillas de verificación personalizadas y botones de radio por Adrian Roselli.