Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

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

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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:

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.

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:

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:

Custom checkbox styles with 2px border
El estilo de las casillas de verificación con un borde de 2px.

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

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.

Custom check styles with 4px border bottom and right When rotating this 45 degrees it looks like a check
Pseudo elemento con un borde de 4px por abajo y a la izquierda. Cuando lo rotamos 45 grados adquiere el aspecto de una marca en la casilla.

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.

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:

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)

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".

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.

Focus styles for checkbox yellow border around checkbox
Estilos focus para las casillas de verificación: borde amarillo

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:

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

Transparent outline shows as border in Windows High Contrast Mode
El contorno transparente aparece como un borde extra en Windows High Contrast Mode

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:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.