Los elementos <blink> están obsoletos y no deben usarse

El texto parpadeante distrae y es difícil de leer para los clientes con dificultades de atención, de lectura o visuales, que no tienen forma de detenerlo. Contenidos importantes, como un mensaje de rebajas, pueden pasar totalmente desapercibidos.

ID de la regla
blink
Origen
axe-core 4.13.0
Impacto
Grave
Nivel de corrección
AUTO
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Comprueba que no se usan elementos <blink>

La selección se hace solo por el nombre de la etiqueta. La regla recoge cada elemento <blink> del documento, con independencia del texto o los atributos que lleve, y no descarta antes los ocultos. Cada elemento pasa después por una única prueba, la comprobación is-on-screen de axe-core con el resultado invertido: el elemento falla cuando es visible en pantalla y supera la prueba cuando no lo es.

Quedar fuera de la vista significa, por ejemplo, display: none u opacity: 0 en el elemento o en un ancestro, visibility: hidden en el propio elemento, un clip de tamaño cero o clip-path: circle(0), o una posición situada por completo por encima de la página. La prueba solo responde sí o no, así que la regla no produce ningún resultado «pendiente de revisión».

El escáner de Validiscan agrupa los fallos mediante una huella que ignora los identificadores generados y los índices de posición, de modo que un <blink> en una cabecera común a todas las páginas se convierte en un solo hallazgo con su número de páginas. El parpadeo creado con CSS o con un script queda fuera del selector. <marquee> tiene su propia regla, y los carruseles que avanzan solos son objeto de la comprobación vs-carousel.

Cómo corregirlo

Elimine todos los elementos <blink> y conserve su texto como contenido normal. Si hace falta resaltarlo, use un estilo estático, como texto en negrita o una etiqueta; cualquier animación debe detenerse en cinco segundos u ofrecer un control de pausa.

Criterios de conformidad de las WCAG

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
Criterio de las WCAG Versión 3.2.1 Versión 4.1.1
2.2.2 9.2.2.2 9.2.2.2

Dónde lo corrige una receta

Mostrar el antes y el después (1)
Antes y después Datos de ejemplo

sections/announcement-bar.liquid Cambios en sections/announcement-bar.liquid (líneas añadidas: 2; eliminadas: 2)

Cambios en sections/announcement-bar.liquid (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
3 3 -%}
4 4 <div class="announcement-bar color-accent"{% if bar_lang != '' %} lang="{{ bar_lang }}"{% endif %}>
5 5 <div class="page-width">
6 Eliminada <marquee class="announcement-bar__message" behavior="scroll" direction="left" scrollamount="4">{{ section.settings.text | escape }}</marquee>
7 Eliminada <p class="announcement-bar__note"><blink class="announcement-bar__flag">New</blink> winter collection</p>
6 Añadida <div class="announcement-bar__message">{{ section.settings.text | escape }}</div>
7 Añadida <p class="announcement-bar__note"><span class="announcement-bar__flag">New</span> winter collection</p>
8 8 </div>
9 9 </div>
10 10
Mostrar el antes y el después (1)
replaces a seeded marquee and blink in the top bar; axe no longer reports them Datos de ejemplo

Resources/views/storefront/layout/header/top-bar.html.twig Cambios en Resources/views/storefront/layout/header/top-bar.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/layout/header/top-bar.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
4 4 {% block layout_header_top_bar_usp %}
5 5 <p class="top-bar-usp">
6 6 {% sw_icon 'checkmark' style { size: 'xs' } %}
7 Eliminada <marquee class="top-bar-marquee" behavior="scroll" scrollamount="4"><span>{{ 'header.topBarUsp'|trans }}</span></marquee>
7 Añadida <span class="top-bar-marquee"><span>{{ 'header.topBarUsp'|trans }}</span></span>
8 8 </p>
9 9 {% endblock %}
10 10
13 13 <li class="top-bar-nav-item">
14 14 <a class="top-bar-nav-link top-bar-help" href="{{ url('/contact') }}">
15 15 {% sw_icon 'headset' style { size: 'xs' } %}
16 Eliminada <blink class="top-bar-blink">{{ 'header.topBarHelp'|trans }}</blink>
16 Añadida <span class="top-bar-blink">{{ 'header.topBarHelp'|trans }}</span>
17 17 </a>
18 18 </li>
19 19 </ul>
Mostrar el antes y el después (2)
makes a marquee and a blink added to the fixture theme static Datos de ejemplo

footer.php Cambios en footer.php (líneas añadidas: 1; eliminadas: 1)

Cambios en footer.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
31 31 <?php endfor; ?>
32 32 </div>
33 33
34 Eliminada <marquee class="kb-ticker" behavior="scroll" scrollamount="3"><?php esc_html_e( 'Free returns within 30 days', 'kestrel-birch' ); ?></marquee>
34 Añadida <div class="kb-ticker"><?php esc_html_e( 'Free returns within 30 days', 'kestrel-birch' ); ?></div>
35 35 <div class="site-info">
36 36 <?php // VALIDISCAN-SEED color-contrast: .site-info and the footer copy are #888 on #f4f1ec (3.1:1), see main.css. ?>
37 37 <p>

functions.php Cambios en functions.php (líneas añadidas: 1; eliminadas: 1)

Cambios en functions.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
223 223 */
224 224 function kb_single_product_usp() {
225 225 // VALIDISCAN-SEED vs-reflow: .kb-usp is white-space: nowrap in assets/css/woocommerce.css.
226 Eliminada echo '<p class="kb-usp"><blink class="kb-new">' . esc_html__( 'New', 'kestrel-birch' ) . '</blink> ' . esc_html__( 'Same-day dispatch · Free returns · Climate-neutral delivery', 'kestrel-birch' ) . '</p>';
226 Añadida echo '<p class="kb-usp"><span class="kb-new">' . esc_html__( 'New', 'kestrel-birch' ) . '</span> ' . esc_html__( 'Same-day dispatch · Free returns · Climate-neutral delivery', 'kestrel-birch' ) . '</p>';
227 227 }
228 228 add_action( 'woocommerce_single_product_summary', 'kb_single_product_usp', 31 );
229 229
turns blink and marquee into static elements in templates and PHP strings Datos de ejemplo

functions.php Cambios en functions.php (líneas añadidas: 1; eliminadas: 1)

Cambios en functions.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
11 11 add_action( 'after_setup_theme', 'minimal_setup' );
12 12
13 13 function minimal_sale() {
14 Eliminada echo '<p><blink class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</blink></p>';
14 Añadida echo '<p><span class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</span></p>';
15 15 }

template-parts/notice.php Cambios en template-parts/notice.php (líneas añadidas: 3; eliminadas: 3)

Cambios en template-parts/notice.php (líneas añadidas: 3; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
1 1 <div class="notice">
2 Eliminada <marquee class="notice__ticker" behavior="scroll" direction="left" scrollamount="4">
2 Añadida <div class="notice__ticker">
3 3 <?php esc_html_e( 'Free shipping this week', 'minimal' ); ?>
4 Eliminada </marquee>
5 Eliminada <blink><?php esc_html_e( 'New!', 'minimal' ); ?></blink>
4 Añadida </div>
5 Añadida <span><?php esc_html_e( 'New!', 'minimal' ); ?></span>
6 6 </div>
Mostrar el antes y el después (1)
makes an added ticker static and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 2; eliminadas: 2)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
1 Eliminada <marquee class="news-ticker" behavior="scroll" direction="left" scrollamount="4">
1 Añadida <div class="news-ticker">
2 2 <p>Autumn sale: 20% off all jackets</p>
3 Eliminada </marquee>
3 Añadida </div>
4 4 <!-- VALIDISCAN-SEEDED vs-carousel + vs-motion + aria-hidden-focus: Page Builder slider autoplays (data-autoplay and a CSS animation) with no pause control; hidden slides keep focusable links; dots have no names -->
5 5 <div
6 6 class="pagebuilder-slider slick-slider"

app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
5 5 // Fixed variant: moved into the header (header.container) and styled with line-height 1.5, no fixed height.
6 6 ?>
7 7 <!-- VALIDISCAN-SEEDED region + vs-text-spacing: the promo text sits outside every landmark in a fixed 26px-high box -->
8 Eliminada <div class="top-promo"><p class="top-promo-text"><blink><?= $block->escapeHtml(__('Free shipping on orders over €75')) ?></blink><br><?= $block->escapeHtml(__('Free 30-day returns on every jacket')) ?></p></div>
8 Añadida <div class="top-promo"><p class="top-promo-text"><span><?= $block->escapeHtml(__('Free shipping on orders over €75')) ?></span><br><?= $block->escapeHtml(__('Free 30-day returns on every jacket')) ?></p></div>

Empiece con una revisión gratuita de su tienda.

Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.

Solicitar revisión gratuita

O escriba a info@validiscan.com.

Qué cubre la revisión gratuita y qué deja fuera
Usted envía
la dirección de su tienda
Páginas escaneadas
hasta 15
Usted recibe
todos los fallos que el escaneo puede demostrar, con la página y el código
En su tienda
solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
Lo que no es
una auditoría completa

Escribir a Validiscan

Para una revisión gratuita, indique la dirección web de su tienda y su plataforma.

Validiscan utiliza lo que usted envía para responderle. Política de privacidad