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
- 2.2.2 Pause, Stop, Hide, nivel A
Apartados de la norma EN 301 549
| 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
Shopify: receta remove-blink-marquee
Mostrar el antes y el después (1)
sections/announcement-bar.liquid 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 |
Shopware: receta remove-blink-marquee
Mostrar el antes y el después (1)
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)
| 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> |
WooCommerce: receta remove-blink-marquee
Mostrar el antes y el después (2)
footer.php 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)
| 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 |
functions.php 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)
| 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> |
Magento: receta remove-blink-marquee
Mostrar el antes y el después (1)
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)
| 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)
| 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 gratuitaO 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