Centrándose en los estilos de enfoque

No todo el mundo utiliza un ratón para navegar por Internet. Si estás leyendo esta publicación en un teléfono inteligente, ¡es obvio! Lo que también vale la pena señalar es que existen otras formas de información que la gente utiliza para hacer las cosas. Con estas formas de entrada surge la necesidad de estilos de enfoque.

Gente

La gente es complicada. No necesariamente realizamos los mismos comportamientos de manera consistente, ni siempre tomamos decisiones que tengan sentido desde la perspectiva de un extraño. A veces incluso hacemos algo sólo por… hacer algo. Nos aburrimos fácilmente: retocamos, hurgamos y pinchamos cosas para personalizarlas y adaptarlas mejor a nuestras necesidades, independientemente de su intención original.

Las personas también son mortales. Podemos enfermarnos y lesionarnos. A veces ambas cosas a la vez. A veces es por un tiempo, a veces es permanente. De todos modos, significa que a veces no podemos hacer las cosas que queremos o necesitamos hacer de la forma a la que estamos acostumbrados.

La gente también vive en el mundo. A veces nos encontramos en un entorno en el que factores externos conspiran para impedirnos hacer algo como estamos acostumbrados a hacerlo. ¿Alguna vez has estado atrapado en casa de tus padres durante las vacaciones y has tenido que usar su computadora de escritorio antigua pero aún útil? Es así.

Aporte

Tanto la entrada táctil como la del mouse proporcionan un indicador de interacción. Para el tacto, es obvio: tu dedo actúa como el puente que conecta tu mente con el elemento de la pantalla que desea activar. Para los ratones, un cursor sirve como sustituto de su dedo.

Sin embargo, estas no son las únicas formas de aportación disponibles para nosotros. Los teclados son omnipresentes y pueden hacer casi cualquier cosa que un mouse o una entrada táctil puedan lograr, siempre que conozca todas las teclas correctas para presionar en el orden correcto. ¡A veces es incluso más fácil y rápido que usar un mouse!

Piensa en la última vez que usaste las funciones Cortar, Copiar, Pegar y Guardar. ¿Quizás fue la última vez que trabajaste en una hoja de cálculo? ¿Estabas alternando entre la entrada del mouse y del teclado para hacer las cosas de la manera más eficiente posible? Probablemente no pensaste en esa conducta, pero es un gran ejemplo de cómo cambiar la entrada sobre la marcha para lograr un objetivo de la mejor manera. Diablos, tal vez incluso te tomaste un tiempo para ti durante esta ingrata tarea para presionar el botón Me gusta en Facebook en tu teléfono inteligente.

Si tiene problemas para usar las manos, hay otras opciones disponibles: varitas, palos, interruptores, dispositivos para sorber y soplar, reconocimiento de voz y tecnología de seguimiento ocular pueden crear información en un sistema digital. Estos dispositivos identificarán un área de contenido y la activarán . Esto es similar a cómo presionar la tecla Tab en un teclado y la siguiente celda en una hoja de cálculo se resaltará, lo que indica que se ha movido y está lista para editarse.

En este video, el editor de video y consultor de accesibilidad Christopher Hills demuestra las capacidades de Switch Control , software que ayuda a las personas que experimentan problemas de control motor a utilizar interruptores de hardware para operar sus dispositivos informáticos.

Vale la pena señalar que algún día podría confiar en esta tecnología, aunque sea solo por un tiempo. Tal vez te rompiste ambos brazos en un desafortunado accidente de bicicleta de montaña y quieres pedir algo de autocompasión para llevar mientras te recuperas. Tal vez estés conduciendo y quieras enviar mensajes de texto a tu familia de forma segura. O tal vez simplemente envejezcas . No es difícil pensar en otros ejemplos, simplemente no es un concepto en el que a la gente le guste insistir.

Si es interactivo, necesita un estilo de enfoque.

No siempre podemos saber quién visita nuestros sitios web y aplicaciones web, por qué los visita, qué hará cuando llegue allí, qué condiciones experimenta, qué emociones siente o qué información puede utilizar. Los análisis pueden brindar cierta información, pero no ofrecen un panorama completo. Sería absurdo dejar que la cola mueva al perro y optimizar toda la experiencia en función de esta instantánea de información limitada.

También es importante saber que no todos los que utilizan tecnología de asistencia quieren ser identificados como usuarios de tecnología de asistencia . Tampoco se les debería obligar a revelar esto. Los usuarios avanzados (personas que aprovechan atajos de teclado, software especializado y extensiones de navegador) pueden parecer que navegan como usuarios de tecnología de asistencia, pero es posible que no experimenten ninguna condición de discapacidad. Una vez más, ¡la gente es complicada!

Lo que podemos hacer es brindar de manera preventiva una experiencia que funcione para todos, independientemente de su capacidad o circunstancia.

Identificar y activar

:enfocar

Con estas formas alternativas de entrada, ¿cómo identificamos algo para mostrar que se puede activar? Afortunadamente, CSS soluciona este problema: utilizamos los selectores :focusy :active.

La gramática es sencilla. ¿Quiere resaltar un enlace en naranja cuando un usuario se centra en él? He aquí cómo describirlo:

a:focus {  outline: 3px solid orange;}

Este esquema aparecerá cuando alguien navegue hasta el enlace, ya sea haciendo clic o tocando, accediendo a él mediante la entrada del teclado o usando la entrada del interruptor para resaltarlo.

Un error común es pensar que el estilo de enfoque solo puede usar outlinepropiedades. Vale la pena señalar que :focuses un selector como cualquier otro, lo que significa que acepta toda la gama de propiedades CSS. Me gusta jugar con el color de fondo, el subrayado y otras técnicas que no ajustan el tamaño actual del componente, para no cambiar el diseño de la página cuando se activa el selector.

Luego digamos que queremos eliminar el subrayado del enlace cuando se activa para comunicar un cambio de estado . Recuerde: ¡los enlaces usan subrayados !

a:active {  text-decoration: none;}

Es importante asegurarse de que los cambios de estado, de reposo a enfocado y activado , sean distintos. Esto significa que cada transición debe ser única en comparación con los otros estados del componente, lo que permite al usuario comprender que se ha producido un cambio.

También queremos asegurarnos de que estos cambios de estado no dependan únicamente del color, para adaptarse mejor a las personas que sufren daltonismo y/o baja visión. Así es como un cambio de estado de solo color podría verse para una persona con deuteranopía, comúnmente conocida como daltonismo rojo-verde:

Eliminé deliberadamente el subrayado y el anillo de enfoque nativo del navegador del enlace del vídeo para ilustrar mejor la cuestión de la capacidad de descubrimiento. Al intentar desplazarse por la página para determinar qué es interactivo, no es inmediatamente obvio que haya un enlace presente. Si el daltonismo también es un factor, el cambio de estado cuando se coloca el cursor sobre él no será evidente; esto es aún más evidente con la adición de cataratas.

:enfoque-dentro

:focus-within(un selector de pseudoclase relacionado con el enfoque con un nombre que suena muy Zen) puede aplicar estilo a un elemento principal cuando uno de sus hijos recibe el enfoque. El evento de enfoque aparece hasta que encuentra una regla CSS que le pide que aplique sus instrucciones de estilo.

Un caso de uso común para este selector sería aplicar estilo a un formulario completo cuando uno de sus elementos de entrada recibe el foco. En el siguiente ejemplo, estoy ampliando ligeramente el tamaño de todo el formulario, a menos que el usuario haya expresado su deseo de una experiencia de animación reducida :

El selector todavía es relativamente nuevo , por lo que estoy seguro de que obtendremos aplicaciones más inteligentes a medida que pase el tiempo.

Política

La gente también tiene opiniones. Desafortunadamente, a veces estas opiniones están desinformadas. Fuera de la práctica de la accesibilidad, prevalece la noción de que los estilos de enfoque son “feos” y muchos diseñadores y desarrolladores los eliminan en aras de la estética percibida. A veces ni siquiera son conscientes de que están propagando la opinión de otra persona; muchos restablecimientos de CSS incluyen una eliminación general de los estilos de enfoque y se incorporan como una dependencia fundamental del proyecto sin hacer preguntas .

Esta decisión excluye a las personas. Los sitios web y las aplicaciones web no son trofeos recortados que se muestran sin contexto en un perfil de dribbble, ni capturas de pantalla estáticas en una elegante plataforma de ventas corporativa. Existen para ser leídos y aplicados, y existen reglas que ayudan a garantizar que la mayor cantidad posible de personas pueda hacer exactamente eso.

:enfoque-visible

El quid de la cuestión es que a veces las personas insisten en eliminar los estilos de enfoque y tienen suficiente influencia para obligar a sus cohortes a llevar a cabo su visión. Esto va en contra de las reglas que estipulan que los mecanismos de enfoque deben ser visibles para que los sitios web sean verdaderamente accesibles. Para solucionar esto, tenemos el :focus-visiblepseudo-selector .

:focus-visibleEl estilo del pseudoselector se activa cuando el navegador determina que se produjo un evento de enfoque y la heurística del agente de usuario le informa que se está utilizando una entrada que no es de puntero. Esa es una forma elegante de decir que muestra el estilo de enfoque cuando se activa mediante una entrada que no sea el cursor del mouse o el toque con el dedo.

El vídeo de este CodePen demuestra cómo se aplican diferentes estilos según el tipo de entrada que recibe el enlace. Cuando se pasa el cursor sobre un enlace y se hace clic en él mediante la entrada del mouse, su subrayado se elimina y se desplaza ligeramente hacia abajo. Cuando se accede mediante tabulación mediante la entrada del teclado, :focus-visible aplica un color de fondo claro al enlace.

Chromium ha anunciado recientemente su intención de implementar:focus-visible . Aunque el soporte del navegador es actualmente extremadamente limitado , hay disponible un polyfill . Ambos :focus-withinestán en el borrador del editor de Selectores Nivel 4 y, por lo tanto, es probable que tengan soporte nativo en los principales navegadores más temprano que tarde.

Quizás lo conozcas :focus-visiblepor su otro nombre, :-moz-focusring. Este pseudo-selector con prefijo de proveedor es la implementación de la idea por parte de Mozilla, y es anterior a la :focus-visiblepropuesta en siete años . A diferencia de CSS con prefijo de otros proveedores, ¡no tendremos que preocuparnos por la compatibilidad con el prefijo automático ! Firefox respeta una :focus-visibledeclaración y :-moz-focusringgarantiza que habrá paridad para los nombres de nuestros selectores entre los dos navegadores.

Un paso adelante, un paso atrás

La compatibilidad con navegadores es un poco problemática: la Web es más que Chrome y Firefox . Si bien el polyfill puede brindar soporte donde no lo hay de forma nativa, se trata de datos adicionales para descargar , complejidad adicional para mantener y fragilidad adicional agregada a su carga útil.

También está el hecho de que los dispositivos son mucho menos binarios en cuanto a sus tipos de entrada que antes. Surface, la computadora insignia de Microsoft, ofrece teclado, trackpad, lápiz óptico, cámara, voz y capacidad táctil listas para usar. La encuesta de lectores de pantalla de WebAIM de 2017 reveló que los dispositivos móviles pueden verse mejorados por la entrada del teclado más de lo que piensa. La heurística es buena, pero al igual que la analítica, es posible que no muestre una imagen completa.

Otro punto a considerar es que los estilos de enfoque pueden ser deseables para los usuarios del mouse. Su presencia es una indicación clara e inequívoca de interactividad, lo que supone una gran ventaja para las personas con problemas de visión deficiente, problemas cognitivos y personas con menos conocimientos tecnológicos. Las personas extraordinariamente adeptas a la tecnología, aquellas que asimilan que los lectores de pantalla y los atajos de teclado son esencialmente Vim para una GUI, querrán que el estado de enfoque sea evidente cuando usan el teclado para bailar por la pantalla.

Parte de la construcción de una web sólida y resiliente implica crear una experiencia central sólida que funcione en todos los navegadores . El :focusselector básico goza de un soporte amplio y profundo hasta el punto de que es una apuesta segura que incluso los navegadores exóticos lo respetarán.

El mundo está lleno de cosas que algunas personas pueden considerar feas, mientras que otras las encuentran hermosas. Personalmente, no veo los estilos de enfoque como una monstruosidad. Como diseñador, creo que es una parte fundamental de la creación de un sistema de diseño maduro. Como desarrollador, describir el estado es algo habitual. Como persona, disfruto ayudando a mantener la web abierta y accesible , como estaba previsto.

Si desea obtener más información sobre el tema, la diseñadora de UX Caitlin Geier tiene un excelente artículo sobre indicadores de enfoque .