<marquee>-Elemente sind veraltet und dürfen nicht verwendet werden

Laufschrift in <marquee> bewegt sich ständig und lässt sich nicht anhalten. Kundinnen und Kunden mit Leseschwierigkeiten, Aufmerksamkeitsstörungen oder Sehbehinderung können das Angebot oder den Versandhinweis darin nicht lesen. Die Bewegung lenkt außerdem von den Produkten und vom Checkout ab.

Kostenlosen Check anfordern

Regel-ID: marquee
Quelle: axe-core 4.13.0
Auswirkung: Schwerwiegend
Korrekturstufe: AUTO; auf Shopify, Shopware, WooCommerce und Magento
Status: wird ausgeführt

Was geprüft wird

Sicherstellen, dass keine <marquee>-Elemente verwendet werden

Die Regel wählt jedes <marquee>-Element der Seite aus, auch verborgene, und meldet jedes, das auf dem Bildschirm sichtbar ist, als Verstoß. Attribute und Text des Elements liest sie nicht. Geschwindigkeit, Richtung und die Frage, ob sich der Text überhaupt bewegt, spielen also keine Rolle.

Ein <marquee> besteht nur, wenn axe-core es als nicht sichtbar einstuft, zum Beispiel wenn es selbst oder ein übergeordnetes Element display: none oder opacity: 0 hat, wenn es visibility: hidden hat, wenn clip-path: inset(50%) oder ein clip der Größe null es verbirgt oder wenn es oberhalb des oberen Seitenrands positioniert ist. Steht es weiter unten auf einer langen Seite, gilt es trotzdem als sichtbar.

Der Scanner von Validiscan lädt jede Seite standardmäßig mit 1440 × 900 Pixeln (Desktop) und 390 × 844 (mobil). Ein <marquee>, das das Theme in einer der beiden Größen ausblendet, wird deshalb nur für die andere gemeldet. Laufschrift, die mit CSS-Animation oder JavaScript umgesetzt ist, fällt nicht unter diese Regel.

So wird es behoben

Entfernen Sie das <marquee>-Element und zeigen Sie seinen Text als statischen Inhalt. Soll sich eine Ankündigungsleiste bewegen, bauen Sie sie mit CSS, das prefers-reduced-motion berücksichtigt, und geben Sie ihr eine sichtbare Pause-Schaltfläche.

WCAG-Erfolgskriterien

2.2.2 Pause, Stop, Hide, Stufe A

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
WCAG-Kriterium	Version 3.2.1	Version 4.1.1
2.2.2	9.2.2.2	9.2.2.2

Wo ein Rezept es behebt

Shopify: Rezept remove-blink-marquee

Vorher und nachher anzeigen (1)

Vorher und nachher Beispieldaten

sections/announcement-bar.liquid Änderungen an sections/announcement-bar.liquid: 2 hinzugefügt, 2 entfernt

Änderungen an sections/announcement-bar.liquid: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
3	3		-%}
4	4		<div class="announcement-bar color-accent"{% if bar_lang != '' %} lang="{{ bar_lang }}"{% endif %}>
5	5		<div class="page-width">
6		Entfernt	<marquee class="announcement-bar__message" behavior="scroll" direction="left" scrollamount="4">{{ section.settings.text \| escape }}</marquee>
7		Entfernt	<p class="announcement-bar__note"><blink class="announcement-bar__flag">New</blink> winter collection</p>
	6	Hinzugefügt	<div class="announcement-bar__message">{{ section.settings.text \| escape }}</div>
	7	Hinzugefügt	<p class="announcement-bar__note"><span class="announcement-bar__flag">New</span> winter collection</p>
8	8		</div>
9	9		</div>
10	10

Shopware: Rezept remove-blink-marquee

Vorher und nachher anzeigen (1)

replaces a seeded marquee and blink in the top bar; axe no longer reports them Beispieldaten

Resources/views/storefront/layout/header/top-bar.html.twig Änderungen an Resources/views/storefront/layout/header/top-bar.html.twig: 2 hinzugefügt, 2 entfernt

Änderungen an Resources/views/storefront/layout/header/top-bar.html.twig: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
4	4		{% block layout_header_top_bar_usp %}
5	5		<p class="top-bar-usp">
6	6		{% sw_icon 'checkmark' style { size: 'xs' } %}
7		Entfernt	<marquee class="top-bar-marquee" behavior="scroll" scrollamount="4"><span>{{ 'header.topBarUsp'\|trans }}</span></marquee>
	7	Hinzugefügt	<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		Entfernt	<blink class="top-bar-blink">{{ 'header.topBarHelp'\|trans }}</blink>
	16	Hinzugefügt	<span class="top-bar-blink">{{ 'header.topBarHelp'\|trans }}</span>
17	17		</a>
18	18		</li>
19	19		</ul>

WooCommerce: Rezept remove-blink-marquee

Vorher und nachher anzeigen (2)

makes a marquee and a blink added to the fixture theme static Beispieldaten

footer.php Änderungen an footer.php: 1 hinzugefügt, 1 entfernt

Änderungen an footer.php: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
31	31		<?php endfor; ?>
32	32		</div>
33	33
34		Entfernt	<marquee class="kb-ticker" behavior="scroll" scrollamount="3"><?php esc_html_e( 'Free returns within 30 days', 'kestrel-birch' ); ?></marquee>
	34	Hinzugefügt	<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 Änderungen an functions.php: 1 hinzugefügt, 1 entfernt

Änderungen an functions.php: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	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	Hinzugefügt	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 Beispieldaten

functions.php Änderungen an functions.php: 1 hinzugefügt, 1 entfernt

Änderungen an functions.php: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
11	11		add_action( 'after_setup_theme', 'minimal_setup' );
12	12
13	13		function minimal_sale() {
14		Entfernt	echo '<p><blink class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</blink></p>';
	14	Hinzugefügt	echo '<p><span class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</span></p>';
15	15		}

template-parts/notice.php Änderungen an template-parts/notice.php: 3 hinzugefügt, 3 entfernt

Änderungen an template-parts/notice.php: 3 hinzugefügt, 3 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1	1		<div class="notice">
2		Entfernt	<marquee class="notice__ticker" behavior="scroll" direction="left" scrollamount="4">
	2	Hinzugefügt	<div class="notice__ticker">
3	3		<?php esc_html_e( 'Free shipping this week', 'minimal' ); ?>
4		Entfernt	</marquee>
5		Entfernt	<blink><?php esc_html_e( 'New!', 'minimal' ); ?></blink>
	4	Hinzugefügt	</div>
	5	Hinzugefügt	<span><?php esc_html_e( 'New!', 'minimal' ); ?></span>
6	6		</div>

Magento: Rezept remove-blink-marquee

Vorher und nachher anzeigen (1)

makes an added ticker static and validates Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 2 hinzugefügt, 2 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1		Entfernt	<marquee class="news-ticker" behavior="scroll" direction="left" scrollamount="4">
	1	Hinzugefügt	<div class="news-ticker">
2	2		<p>Autumn sale: 20% off all jackets</p>
3		Entfernt	</marquee>
	3	Hinzugefügt	</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 Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<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	Hinzugefügt	<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>

Beginnen Sie mit einem kostenlosen Check Ihres Shops.

Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.

Kostenlosen Check anfordern

Oder schreiben Sie an info@validiscan.com.

Was der kostenlose Check umfasst und was nicht

Sie senden: die Adresse Ihres Shops
Gescannte Seiten: bis zu 15
Sie erhalten: jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
In Ihrem Shop: nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
Was er nicht ist: ein vollständiges Audit