Centrándose en el enfoque -

PorChris DeMars es

¿Qué pasa mis todos los aliados? ¿Sabías que el control del mouse y el teclado se enfocan de manera diferente? Bueno, es verdad. Ambos los manejan de manera diferente, y dependiendo del navegador en el que estés también importante… y mucho en realidad.

El enfoque es un elemento crucial para el uso y la experiencia de la aplicación con la que interactuamos. También es el indicador visual del elemento de una aplicación en el que estamos centrados. Sin embargo, hay una advertencia sobre nuestra pseudoclase de enfoque: nuestra amiga outline.

Antes de comenzar, lea esto una y otra vez hasta que quede grabado en su espacio mental.

:enfoque {esquema: 0;}

Esto nos lleva a nuestro problema.

El problema

Hay ocasiones en las que un diseñador o director de arte podría acercarse a usted y decirle que el esquema que se muestra alrededor de ciertos elementos de la página, como enlaces o botones, no se ve… bien. No coincide con nuestra marca y, bueno, ¿podrías eliminarlo?

Y luego, como desarrollador, continúa con “seguro que puedo eliminarlo, pero ¿qué alternativa tienes para reemplazar el esquema?” Si te miran confundidos, entonces este es un buen momento para abrir la comunicación sobre la importancia del enfoque y lo que puedes hacer en colaboración para que la experiencia sea accesible.

Restablecer normalizar

Si ha utilizado el reinicio de Eric Meyer, él eliminará el contorno de enfoque, pero dice explícitamente que se definirán los estilos de enfoque después del reinicio. ¿Qué pasa con la normalización? Si revisa el archivo CSS normalizado y busca el foco, no lo encontrará. Sin embargo, encontrarás estilos para :-moz-focusring. Actualmente, :-moz-focusringno existe, por lo que es posible que los estilos que se aplican utilizando el prefijo moz no funcionen. Si va aMozilla Web Docs y busca, encontrará :-moz-focusringuna advertencia en la parte superior que indica tal cosa.

:focus-ringy :-moz-focusringambos parecen ser iguales, tampoco lo son los estándares… todavía. :focus-ringEstá actualmente en la especificación CSS 4 y hay un Polyfill que es el foco, sin juego de palabras, de esta publicación.

Importancia del enfoque

Es necesario que haya una manera para que los usuarios accesibles y no accesibles puedan ver dónde se encuentran durante las interacciones. Un gran ejemplo sobre el que leí son los ingresos de inicio de sesión y contraseña. El foco indica que se encuentra en un campo de contraseña después de ingresar su inicio de sesión. Sería una mierda si comenzaras a escribir tu contraseña pero no tuvieras una indicación visual de dónde estabas escribiendo tu contraseña.

¿Qué es el enfoque?

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

–Pautas de accesibilidad al contenido web

According to the Web Content Accessibility Guidelines 2.0, it states that any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. Now that being said, it doesn’t say a blue ring, this is afforded by the browser, but is has to have some type of visual distinction.

Browsers Focus

Browsers handle focus differently as far as visual presentation goes, as well as functionality. They also focus differently from mouse to keyboard. I gave a talk illustrating these differences that you can find here ==Focusing on Focus.

The Problem Continued

I touched briefly on :focus-ring earlier, it is currently in theCSS 4 spec, it landed on the 18th of May. It’s not in any browsers yet, but there is a polyfill out there, one of which I am going to show you.

When you remove the default focus by assigning it a value of zero or none, you remove that for everyone, both keyboard and mouse users. Even others who use some type of assistive technology if I had to bet on it.

Some mouse users, on the other hand, don’t like having a focus-ring around custom elements, like custom buttons. This polyfill removes the focus-ring from these elements for mouse users, but adds it back in for keyboard users.

The Resolution

Focus-ring polyfill to the rescue! Essentially it is only these three lines of CSS, and using an already complete JS file. Pretty cool huh?

:focus:not(.focus-ring) {    outline: none;}

Below is a snippet from the JS file. What it means is anything that is focused, that does not have a focus-ring, set the outline to none. This caters to the mouse users. It sets a focus-ring to all the things in the whitelist in the JS file for both mouse and keyboards, except buttons. It turns off the focus-ring for buttons on mouse clicks, but still allows the focus-ring for keyboard users.

The Support

Currently there is no support for :focus-ring at the moment, but I am pushing to get it implemented in all major browsers.

If you would also like to get it implemented, reach out to your favorite browser vendors and see what they say.

Awesome People!

A huge shoutout toAlice Boxhall,Rob Dodson, and all the fine people who havecontributed to the focus-ring polyfill and continue to make it great!

More Info!

If you would like more info on this sweet polyfill, check out the GitHub here,focus-ring, and Rob Dodson’s Ally Casts video here where he talks about it,Ally Casts.

About Chris DeMars

Chris DeMars is a ui developer for a wholesale mortgage company in Michigan. He is also an instructor and teacher assistant for the Ann Arbor and Detroit chapters of Girl Develop It. Chris loves coming up with solutions for enterprise applications, which include modular CSS architectures, performance, and promoting Web accessibility.

chrisdemars.com saltnburnem Publicaciones