Share
Los elementos de formulario, como las casillas de verificación y los botones de radio, se ven diferentes según el navegador y el sistema operativo del usuario. Por esta razón, los diseñadores y desarrolladores llevan tiempo diseñando sus propias casillas de verificación y botones de radio, buscando la coherencia sin importar el navegador o el sistema operativo..
Esto está perfectamente bien, pero al mismo tiempo debemos asegurarnos de que nuestras casillas de verificación y botones de radio permanezcan accesibles para los usuarios de tecnología asistencial (AT) y teclado. En este tutorial, explicaré lo que esto significa y cómo podemos hacer las cosas correctamente de diferentes maneras..
Este tutorial es parte de Accesibilidad web: la Guía de aprendizaje completa, donde hemos recopilado una serie de tutoriales, artículos, cursos y libros electrónicos para ayudarlo a comprender la accesibilidad web desde el principio..
Comencemos por ver cómo su navegador presenta las casillas de verificación de forma predeterminada. Como se mencionó, lo que vea aquí dependerá de su navegador y sistema operativo.
Notará que puede usar su mouse para activar y desactivar las casillas de verificación, además de que puede usar su teclado (saltar a través de LENGÜETA y cambiar usando ESPACIO, aunque esto podría cambiar dependiendo de su configuración).
Es hora de construir el nuestro. Vamos a "ocultar" visualmente las casillas de verificación predeterminadas, colocando las versiones personalizadas en la parte superior. Lo primero que tendremos que mirar es el marcado..
El marcado para una única casilla de verificación se ve así:
Usamos un Esto oculta visualmente nuestra casilla de verificación, lo que nos permite seguir adelante y crear el nuestro. Es importante que no lo ocultemos usando. Notará que, aunque lo ocultemos, le damos a la casilla de verificación una altura y un ancho de 40px. Esto nos da un área objetivo clara y funcional para colocar debajo de nuestra casilla de verificación fabricada. La envoltura Todavía nos falta una casilla de verificación visual. Para resolver esto primero usamos un He utilizado un borde sólido de 2 píxeles y un color heredado, pero puede usar un color de borde diferente si lo desea. Tenga en cuenta que posicionamos y dimensionamos esto de la misma manera que nuestra casilla de verificación transparente. Con algunos márgenes adicionales para que las etiquetas nos den algo de espacio, este es el aspecto de nuestras casillas de verificación en este punto: El siguiente paso es usar el Creamos el cheque usando un elemento que le damos un borde de cuatro píxeles para la parte inferior y derecha. Luego lo giramos 45 grados: ¡bingo! Un cheque personalizado. También puede utilizar diferentes colores de borde para que coincida con su diseño. En esta etapa no podrás ver nada; Todavía estamos ocultando el cheque usando visualmente los Con eso hecho, esto es lo que tenemos: Nota: hay otra cosa que debemos incluir en esto, y eso es "estilos de enfoque". Los discutiremos en la próxima demo.. Vamos a llevar las cosas a un nivel. En lugar de un pseudo elemento, podríamos usar un icono SVG personalizado para nuestro cheque. Para ello, colocaríamos el SVG dentro de la etiqueta: En la mayoría de los casos, SVG es simplemente decorativo, por lo que Necesitamos aplicar un par de estilos al elemento SVG para que esté posicionado y dimensionado correctamente. También podemos utilizar el La inspiración para mis ejemplos de estilos de casillas de verificación se tomó de los que se encuentran en el sistema de diseño de GOV.UK para elementos de formulario (un recurso brillante, vaya y eche un vistazo). Los estilos de enfoque son tan importantes como en cualquier elemento enfocable: Usamos un El modo de alto contraste de Windows elimina las reglas de la sombra de la caja, por lo que, por este motivo, también debemos agregar estilos de contorno transparentes: Este contorno transparente aparece como un borde adicional en el modo de alto contraste. Además de usar el código SVG en línea, también podríamos recrear una versión de las primeras casillas de verificación personalizadas que hicimos, usando SVG como fondo para el pseudo elemento en lugar de crear nuestro propio "control" con bordes. Hemos cubierto todas las técnicas que necesita saber para esto, así que aquí está la demostración para que analice: Casi todos los estilos y la lógica que hemos usado para nuestras casillas de verificación hasta ahora son los mismos para los botones de radio. Eche un vistazo a la demostración y compruébelo usted mismo (para navegar con el teclado, use el Teclas de flecha): La única diferencia aparente es nuestro uso Las pruebas son una parte importante del proceso al manipular elementos HTML nativos. Mis pruebas están lejos de ser perfectas, pero así es como hice las cosas para este tutorial: Podría decirse que a esta lista le falta software de reconocimiento de voz como Dragon, o dispositivos de conmutación. Pero en todas mis pruebas, las casillas de verificación y los botones de radio personalizados se comportaron de la misma manera que los elementos nativos.. Esperamos que este tutorial le haya dado a entender cómo crear estilos personalizados para casillas de verificación y botones de radio, mientras se construye para accesibilidad. Recomiendo aprender más sobre los elementos de formulario personalizados de estos recursos: usando la regla CSS opacidad: 0..envoltura posición: relativa; entrada de la envoltura altura: 40px; izquierda: 0; opacidad: 0; posición: absoluta; arriba: 0; ancho: 40px;
pantalla: ninguna porque esto ocultaría la casilla de verificación de los usuarios del navegador y de la tecnología de asistencia (AT), y también perderíamos las interacciones con el teclado.posición: relativo Regla CSS Esto nos ayuda a posicionar la casilla y la etiqueta. ::antes de y ::después pseudo elementos utilizando posición: absoluta. Añadir casilla visual con pseudo elementos
etiqueta :: antes elemento para agregar un borde:.entrada de envoltorio + etiqueta :: antes borde: 2px sólido; contenido: ""; altura: 40px; izquierda: 0; posición: absoluta; arriba: 0; ancho: 40px;
Estilos de casilla de verificación personalizados con borde de 2px.etiqueta :: después Seudo elemento para estilizar el "cheque":.entrada de contenedor + etiqueta :: después de contenido: ""; borde: 4px sólido; borde izquierdo: 0; borde superior: 0; altura: 20px; izquierda: 14px; opacidad: 0; posición: absoluta; arriba: 6px; transformar: girar (45deg); transición: opacidad 0.2s facilidad de entrada; ancho: 12px;
Pseudoelemento estilizado con borde 4px inferior y derecho. Cuando se gira 45 grados parece un chequeopacidad: 0. Vamos a remediar eso! Revelar cheque personalizado usando
:comprobado Selector Pseudo:comprobado el pseudo selector se dirige a una casilla de verificación cuando se cambia al estado "activado". Podemos usar esto para cambiar la opacidad de nuestro cheque personalizado:.entrada de la envoltura: marcada + etiqueta :: después de opacidad: 1;
2. Casilla de verificación personalizada utilizando SVG en línea
aria-hidden = "true" lo oculta de los dispositivos AT.Añadir estilos SVG
llenar Propiedad para cambiar su color (azul en este caso):.entrada del envoltorio + etiqueta svg borde: 0; relleno: azul; altura: 20px; ancho: 20px; opacidad: 0; posición: absoluta; izquierda: 10px; superior: 10px; transición: opacidad 0.2s facilidad de entrada;
Recordar los estilos de estado de enfoque
.entrada de envoltura: foco + etiqueta :: antes caja-sombra: 0 0 0 3px # ffbf47;
sombra de la caja para estilos de enfoque porque respetará los bordes redondeados, que también utilizaremos para los botones de opción más adelante
Estilos de enfoque para la casilla de verificación: borde amarillo Añadir estilos de enfoque para Windows "Modo de alto contraste"
.entrada de envoltura: foco + etiqueta :: antes caja-sombra: 0 0 0 3px # ffbf47; esquema: 3px sólido transparente; / * Para el modo de alto contraste de Windows. * /
El contorno transparente aparece como un borde adicional en el modo de alto contraste de Windows 3. SVG como fondo de pseudo-elementos
4. Estilos de botones de radio personalizados
radio del borde y el estilo de :comprobado Estado un poco diferente. Ciertamente, también podría usar un icono de SVG en este caso. ¡Lo dejo como tarea para usted! Muéstrenos sus resultados en la sección de comentarios.. 5. Pruebas de accesibilidad
Conclusión y referencias
Accentsconagua