<marquee>-elementer er forældede og må ikke bruges

Rullende tekst i <marquee> bevæger sig hele tiden og kan ikke sættes på pause, så kunder med læsevanskeligheder, opmærksomhedsforstyrrelser eller nedsat syn ikke kan læse det tilbud eller den leveringsbesked, den indeholder. Bevægelsen tager også opmærksomheden fra produkterne og kassen.

Bestil et gratis tjek

Regel-id: marquee
Kilde: axe-core 4.13.0
Alvorlighed: Alvorlig
Rettelsesniveau: AUTO; på Shopify, Shopware, WooCommerce og Magento
Status: køres

Hvad kontrollen gør

Sørg for, at <marquee>-elementer ikke bruges

Reglen udvælger hvert <marquee>-element på siden, også skjulte, og hvert element, der er synligt på skærmen, fejler. Den læser hverken elementets attributter eller dets tekst, så hastighed, retning og om teksten faktisk bevæger sig, spiller ingen rolle.

Et <marquee> består kun, når axe-core finder det skjult for øjet, for eksempel når det selv eller et overordnet element har display: none eller opacity: 0, når det har visibility: hidden, når clip-path: inset(50%) eller et clip med størrelsen nul skjuler det, eller når det er placeret over sidens overkant. Står det længere nede på en lang side, regnes det stadig som synligt.

Validiscans scanner indlæser som standard hver side i 1440 × 900 pixels (desktop) og 390 × 844 (mobil), så et <marquee>, som temaet skjuler i den ene størrelse, kun rapporteres for den anden. Bevægelig tekst lavet med CSS-animation eller JavaScript er ikke omfattet af denne regel.

Sådan retter du det

Fjern <marquee>-elementet, og vis teksten som statisk indhold. Hvis der ønskes en bevægelig meddelelsesbjælke, så byg den med CSS, der respekterer prefers-reduced-motion, og giv den en synlig pauseknap.

WCAG-succeskriterier

2.2.2 Pause, Stop, Hide, niveau A

Afsnit i EN 301 549

Afsnittet i EN 301 549 for hvert kriterium, fordelt på versioner af standarden
WCAG-kriterium	Version 3.2.1	Version 4.1.1
2.2.2	9.2.2.2	9.2.2.2

Hvor en opskrift retter det

Shopify: opskrift remove-blink-marquee

Vis før og efter (1)

Før og efter Eksempeldata

sections/announcement-bar.liquid Ændringer i sections/announcement-bar.liquid: 2 tilføjet, 2 fjernet

Ændringer i sections/announcement-bar.liquid: 2 tilføjet, 2 fjernet
Linje før	Linje efter	Ændring	Kode
3	3		-%}
4	4		<div class="announcement-bar color-accent"{% if bar_lang != '' %} lang="{{ bar_lang }}"{% endif %}>
5	5		<div class="page-width">
6		Fjernet	<marquee class="announcement-bar__message" behavior="scroll" direction="left" scrollamount="4">{{ section.settings.text \| escape }}</marquee>
7		Fjernet	<p class="announcement-bar__note"><blink class="announcement-bar__flag">New</blink> winter collection</p>
	6	Tilføjet	<div class="announcement-bar__message">{{ section.settings.text \| escape }}</div>
	7	Tilføjet	<p class="announcement-bar__note"><span class="announcement-bar__flag">New</span> winter collection</p>
8	8		</div>
9	9		</div>
10	10

Shopware: opskrift remove-blink-marquee

Vis før og efter (1)

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

Resources/views/storefront/layout/header/top-bar.html.twig Ændringer i Resources/views/storefront/layout/header/top-bar.html.twig: 2 tilføjet, 2 fjernet

Ændringer i Resources/views/storefront/layout/header/top-bar.html.twig: 2 tilføjet, 2 fjernet
Linje før	Linje efter	Ændring	Kode
4	4		{% block layout_header_top_bar_usp %}
5	5		<p class="top-bar-usp">
6	6		{% sw_icon 'checkmark' style { size: 'xs' } %}
7		Fjernet	<marquee class="top-bar-marquee" behavior="scroll" scrollamount="4"><span>{{ 'header.topBarUsp'\|trans }}</span></marquee>
	7	Tilføjet	<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		Fjernet	<blink class="top-bar-blink">{{ 'header.topBarHelp'\|trans }}</blink>
	16	Tilføjet	<span class="top-bar-blink">{{ 'header.topBarHelp'\|trans }}</span>
17	17		</a>
18	18		</li>
19	19		</ul>

WooCommerce: opskrift remove-blink-marquee

Vis før og efter (2)

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

footer.php Ændringer i footer.php: 1 tilføjet, 1 fjernet

Ændringer i footer.php: 1 tilføjet, 1 fjernet
Linje før	Linje efter	Ændring	Kode
31	31		<?php endfor; ?>
32	32		</div>
33	33
34		Fjernet	<marquee class="kb-ticker" behavior="scroll" scrollamount="3"><?php esc_html_e( 'Free returns within 30 days', 'kestrel-birch' ); ?></marquee>
	34	Tilføjet	<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 Ændringer i functions.php: 1 tilføjet, 1 fjernet

Ændringer i functions.php: 1 tilføjet, 1 fjernet
Linje før	Linje efter	Ændring	Kode
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		Fjernet	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	Tilføjet	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 Eksempeldata

functions.php Ændringer i functions.php: 1 tilføjet, 1 fjernet

Ændringer i functions.php: 1 tilføjet, 1 fjernet
Linje før	Linje efter	Ændring	Kode
11	11		add_action( 'after_setup_theme', 'minimal_setup' );
12	12
13	13		function minimal_sale() {
14		Fjernet	echo '<p><blink class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</blink></p>';
	14	Tilføjet	echo '<p><span class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</span></p>';
15	15		}

template-parts/notice.php Ændringer i template-parts/notice.php: 3 tilføjet, 3 fjernet

Ændringer i template-parts/notice.php: 3 tilføjet, 3 fjernet
Linje før	Linje efter	Ændring	Kode
1	1		<div class="notice">
2		Fjernet	<marquee class="notice__ticker" behavior="scroll" direction="left" scrollamount="4">
	2	Tilføjet	<div class="notice__ticker">
3	3		<?php esc_html_e( 'Free shipping this week', 'minimal' ); ?>
4		Fjernet	</marquee>
5		Fjernet	<blink><?php esc_html_e( 'New!', 'minimal' ); ?></blink>
	4	Tilføjet	</div>
	5	Tilføjet	<span><?php esc_html_e( 'New!', 'minimal' ); ?></span>
6	6		</div>

Magento: opskrift remove-blink-marquee

Vis før og efter (1)

makes an added ticker static and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 2 tilføjet, 2 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 2 tilføjet, 2 fjernet
Linje før	Linje efter	Ændring	Kode
1		Fjernet	<marquee class="news-ticker" behavior="scroll" direction="left" scrollamount="4">
	1	Tilføjet	<div class="news-ticker">
2	2		<p>Autumn sale: 20% off all jackets</p>
3		Fjernet	</marquee>
	3	Tilføjet	</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 Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml: 1 tilføjet, 1 fjernet
Linje før	Linje efter	Ændring	Kode
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		Fjernet	<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	Tilføjet	<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>

Begynd med et gratis tjek af din webshop.

Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.

Bestil et gratis tjek

Eller skriv til info@validiscan.com.

Hvad det gratis tjek omfatter, og hvad det udelader

Du sender: din webshops adresse
Sider, der scannes: op til 15
Du får: hver fejl, scanningen kan påvise, med siden og koden
På din webshop: kun offentlige sider; intet login, intet købt, ingen formularer sendt
Hvad det ikke er: et fuldt audit