Noticias de la plataforma: uso de :focus-visible, el nuevo tipo de letra de la BBC, DOM de sombra declarativos, A11Y y marcadores de posición

Hay mucha accesibilidad en las noticias de esta semana, desde los matices de uso :focus-visibley los marcadores de posición de entrada, hasta tipos de letras accesibles y un error de Safari con :display: contents. Además, un fragmento de un componente web básico que admite la encapsulación de estilos.

Ahora puede ser un buen momento para empezar a utilizar :focus-visible

La :focus-visiblepseudoclase CSS reemplaza :focuscomo la nueva forma de crear indicadores de enfoque personalizados para usuarios de teclado. Chrome cambió recientemente de :focusa :focus-visibleen la hoja de estilo del agente de usuario y, como resultado de ese cambio, el anillo de enfoque predeterminado ya no se muestra cuando el usuario hace clic o tocar un botón.

Al cambiar de :focusa :focus-visible, considere la compatibilidad con versiones anteriores. Los indicadores de enfoque del teclado deben ser claramente visibles en todos los navegadores, no solo en los que lo admiten :focus-visible. Si solo aplica estilo :focus-visible, los navegadores no compatibles mostrarán el anillo de enfoque predeterminado que, según su diseño, “puede no ser lo suficientemente claro o visible en absoluto”.

button {  background: white;}button:focus-visible {  outline: none;  background: #ffdd00; /* gold */}

Una buena forma de empezar a utilizarlo :focus-visiblehoy es definir los estilos de enfoque en una :focusregla y luego deshacer inmediatamente esos mismos estilos en una :focus:not(:focus-visible)regla. Es cierto que este no es el patrón más elegante e intuitivo, pero funciona bien en todos los navegadores:

• Los navegadores que no lo permiten :focus-visibleutilizan los estilos de enfoque definidos en la :focusregla e ignoran por completo la segunda regla de estilo (porque :focus-visiblela desconocen).
• En los navegadores que sí lo admiten :focus-visible, la segunda regla de estilo revierte los estilos de enfoque definidos en la :focusregla si el :focus-visibleestado tampoco está activo. En otras palabras, los estilos de enfoque definidos en la :focusregla sólo tienen efecto cuando :focus-visibletambién está activo.

button:focus {  outline: none;  background: #ffdd00; /* gold */}button:focus:not(:focus-visible) {  background: white; /* undo gold */}

La BBC creó una tipografía más accesible

La BBC creó su propio tipo de letra personalizado llamado Reith (que lleva el nombre del fundador de la BBC, Sir John Reith). Su objetivo era crear una fuente que admitiera varios idiomas y fuera más fácil de leer, especialmente en dispositivos pequeños. La fuente se probó con grupos de usuarios con capacidades mixtas (dislexia y discapacidad visual) y en diferentes tamaños de pantalla.

Nosotros [la BBC] usábamos Helvetica o Arial. También teníamos Gill Sans como tipo de letra corporativa. Estos tipos de letras fueron diseñados hace cien años para la página impresa [y] no funcionan bien en las pantallas digitales modernas de hoy.

Nota: Si desea inspeccionar Reith Sans y Reith Serif en Wakamai Fondue, puede acceder rápidamente a la URL de los archivos WOFF2 en la sección “Todas las fuentes en la página” del panel Fuentes en el inspector DOM de Firefox en el sitio web de la BBC.

display: contentstodavía no es accesible en Safari

El display: contentsvalor CSS ha sido compatible con los navegadores desde 2018. Un elemento con este valor “no genera ningún cuadro” y es efectivamente reemplazado por sus hijos. Esto es especialmente útil en diseños flexibles y de cuadrícula, donde el contentsvalor se puede usar para “promover” elementos anidados más profundamente a elementos flexibles/de cuadrícula mientras se conserva una estructura de documento semántica.

Desafortunadamente, esta característica se envió originalmente con un error de implementación que eliminó el elemento del árbol de accesibilidad del navegador. Por ejemplo, al aplicar la aplicación display: contentsa un ulelemento, los lectores de pantalla ya no lo mencionan. Desde entonces, este error se ha solucionado en Firefox y Chrome (en la última versión).

En Chrome y Firefox, el lector de pantalla informa al usuario que “Principal, navegación” contiene una “lista, 2 elementos”. En Safari, falta la última parte porque los elementos uly lino están presentes en el árbol de accesibilidad. Hasta que Apple solucione este error en Safari, tenga cuidado al utilizar el contentsvalor en elementos semánticos y pruebe en lectores de pantalla para confirmar que sus páginas también sean accesibles en Safari.

Establecer opacityal anular el color del texto del marcador de posición

Los expertos en accesibilidad recomiendan evitar los marcadores de posición si es posible porque pueden confundirse con texto precargado y desaparecer cuando el usuario comienza a ingresar un valor. Sin embargo, muchos sitios web (incluidos Wikipedia y GOV.UK) utilizan marcadores de posición en formularios web simples que contienen solo un campo de entrada, como un campo de búsqueda.

A los marcadores de posición se les puede aplicar estilo mediante el ::placeholderpseudoelemento ampliamente admitido. Si su diseño requiere un color personalizado para el texto del marcador de posición, asegúrese de especificar ambos colory opacity. Este último es necesario para Firefox, que se aplica opacity: 0.54de ::placeholderforma predeterminada. Si no anula este valor, es posible que el texto del marcador de posición tenga un contraste insuficiente en Firefox.

.search-field::placeholder {  color: #727272;  opacity: 1; /* needed for Firefox */}

El DOM de sombra declarativo podría ayudar a popularizar la encapsulación de estilos

Una de las características clave de Shadow DOM es la encapsulación de estilos, donde las reglas de estilo de la página exterior no coinciden con los elementos dentro del árbol de sombra, y viceversa. Para utilizar esta función, debe adjuntar un árbol DOM oculto a un elemento (generalmente un elemento personalizado, como my-element) y copiar la plantilla del elemento (generalmente de un templateelemento en el DOM) al DOM oculto recién creado del elemento.

Estos pasos solo se pueden realizar en JavaScript. Si solo está interesado en la encapsulación de estilos y no necesita ninguna funcionalidad dinámica para su elemento, aquí está la cantidad mínima de JavaScript requerida para crear un elemento personalizado con un DOM oculto:

customElements.define(  "my-element",  class extends HTMLElement {    constructor() {      super();      // find template in the DOM      let template = document.getElementById("my-template");      // make a copy of the template contents…      let content = template.content.cloneNode(true);      // …and inject it into my-element’s shadow DOM      this.attachShadow({ mode: "open" }).appendChild(content);    }  });

Para ver un ejemplo de encapsulación de estilo, consulte el elemento de Miriam Suzanne media-objecten CodePen. Los estilos de ámbito se encuentran en el templateelemento del panel HTML. Observe cómo este código CSS puede usar selectores simples, como article, que solo coinciden con elementos dentro media-objectdel DOM oculto de .

Es posible que pronto ya no sea necesario JavaScript para crear este tipo de encapsulación de estilo en los navegadores modernos. A principios de esta semana, Chrome se convirtió en el primer navegador en ofrecer la propuesta Declarative Shadow DOM de Google. Si se convierte en un estándar, esta característica también permitirá utilizar Shadow DOM en combinación con la renderización del lado del servidor.