Ayudantes de visualización y visibilidad

Atajos específicos de POM:

La sintaxis responsive de display de Bootstrap incluida es:

d-{value}
d-{breakpoint}-{value}

Entre los valores habituales se incluyen none, inline, inline-block, block, table, table-cell, flex y inline-flex; los infijos de breakpoint son sm, md, lg, xl.

<div class="d-none d-md-block">Visible from md upward</div>
<div class="d-block d-md-none">Visible below md</div>

Usa la clase sin prefijo para el área de visualización más pequeña y añade variantes de breakpoint solo donde cambie el modo de visualización. Por ejemplo, d-none d-md-flex oculta el elemento por debajo de md y usa el diseño flex desde md en adelante.

hidden y din son alias incondicionales de POM. Prefiere la sintaxis responsive d-* cuando el componente deba volver a mostrarse en otro breakpoint. web-full-height establece una altura mínima y permite que el contenido crezca; web-viewport fija la altura y, por lo tanto, puede recortar el contenido desbordado a menos que el componente lo gestione deliberadamente.

Texto accesible visualmente oculto

Usa screen-reader-text para el texto complementario que deba seguir estando disponible para los lectores de pantalla sin ocupar espacio en el diseño visual. POM incluye esta utilidad en la hoja de estilos general compilada, incluso en sitios sin WooCommerce.

<label class="screen-reader-text" for="catalog-search">Search the catalog</label>
<input id="catalog-search" type="search" name="s">

Mantén visibles las instrucciones esenciales. No combines screen-reader-text con hidden, d-none, visibility: hidden o aria-hidden="true" cuando el texto deba seguir estando disponible para las tecnologías de asistencia.

Los elementos enfocables con screen-reader-text, como los enlaces de salto, se vuelven visibles cuando reciben el foco del teclado. Comprueba que el elemento enfocado sea legible y que no quede recortado por un contenedor circundante.

Después de que una actualización del tema cambie estos estilos, ejecuta Settings → POM Theme → Tools → Compile assets → Compile CSS y borra la caché de página en cada sitio afectado. Consulta estilos y scripts generados.

Las reglas pertenecen a Visibility and display utilities en Settings → POM Theme → Advanced → Custom CSS → Component CSS. Si reemplazas ese componente, compara tu CSS guardado con el CSS actual del tema y conserva tanto las reglas de ocultación como las de foco de teclado. Una página que reemplace la hoja de estilos general debe incluir reglas equivalentes en su propio CSS. Si el CSS crítico retrasa la hoja de estilos general, incluye también las reglas en el CSS crítico para evitar que el texto accesible aparezca antes de que se carguen los estilos completos.

Después de aplicar un ayudante de visibilidad, comprueba los anchos pequeño, mediano y grande, así como el orden de foco del teclado. Un elemento interactivo fuera de pantalla u oculto no debe atrapar el foco.

No ocultes contenido esencial de un área de visualización sin proporcionar una vía accesible equivalente. Las utilidades de display de CSS son presentación, no autorización: el marcado confidencial oculto se sigue entregando al navegador.