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

El texto que se desplaza con <marquee> no deja de moverse y no se puede pausar, así que los clientes con dificultades de lectura, trastornos de atención o baja visión no pueden leer la oferta o el aviso de envío que contiene. El movimiento también distrae de los productos y del proceso de pago.

Solicitar revisión gratuita

ID de la regla: marquee
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 <marquee>

La regla selecciona cada elemento <marquee> de la página, incluidos los ocultos, y da por fallido cada uno que sea visible en pantalla. No lee los atributos del elemento ni su texto, así que la velocidad, la dirección y si el texto se mueve realmente no intervienen.

Un <marquee> supera la prueba solo cuando axe-core lo encuentra oculto a la vista, por ejemplo cuando él o un ancestro tiene display: none u opacity: 0, cuando tiene visibility: hidden, cuando lo oculta clip-path: inset(50%) o un clip de tamaño cero, o cuando está posicionado por encima del borde superior de la página. Uno situado más abajo en una página larga sigue contando como visible.

De forma predeterminada, el escáner de Validiscan carga cada página a 1440 × 900 píxeles (escritorio) y a 390 × 844 (móvil), así que un <marquee> que el tema oculta en uno de los tamaños se comunica solo para el otro. El texto en movimiento creado con animaciones CSS o con JavaScript queda fuera de esta regla.

Cómo corregirlo

Elimine el elemento <marquee> y muestre su texto como contenido estático. Si se quiere una barra de anuncios en movimiento, créela con CSS que respete prefers-reduced-motion y añada un control visible para pausarla.

Criterios de conformidad de las WCAG

2.2.2 Pause, Stop, Hide, nivel A

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

Shopify: receta remove-blink-marquee

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

Shopware: receta remove-blink-marquee

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>

WooCommerce: receta remove-blink-marquee

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>

Magento: receta remove-blink-marquee

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