<blink>-elementer er forældede og må ikke bruges
Blinkende tekst er forstyrrende og svær at læse for kunder med koncentrations-, læse- eller synsvanskeligheder, og de har ingen mulighed for at stoppe den. Vigtigt indhold som en besked om udsalg kan helt blive overset.
- Regel-id
- blink
- 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 <blink>-elementer ikke bruges
Udvælgelsen sker alene efter tagnavn. Reglen tager hvert <blink>-element i dokumentet med, uanset hvilken tekst eller hvilke attributter det har, og sorterer ikke skjulte elementer fra først. Hvert element får derefter én test, axe-cores kontrol is-on-screen brugt omvendt: Elementet fejler, når det er synligt på skærmen, og består, når det ikke er det.
Elementet er for eksempel ude af syne ved display: none eller opacity: 0 på elementet eller et overordnet element, ved visibility: hidden på selve elementet, ved et clip med størrelsen nul eller clip-path: circle(0) eller ved en placering helt over sidens overkant. Testen svarer kun ja eller nej, så reglen giver aldrig resultatet »kræver gennemgang«.
Validiscans scanner grupperer fejl efter et fingeraftryk, der ser bort fra genererede id’er og positionsindeks. Et <blink> i en header, som alle sider deler, bliver derfor til ét fund med antallet af sider, det står på. Blink, der er lavet med CSS eller et script, fanges ikke af selektoren. <marquee> har sin egen regel, og karruseller, der skifter af sig selv, hører under kontrollen vs-carousel.
Sådan retter du det
Fjern alle <blink>-elementer, og behold deres tekst som almindeligt indhold. Hvis der er brug for fremhævning, så brug statisk formatering som fed tekst eller en mærkat; enhver animation skal stoppe inden for fem sekunder eller have en pauseknap.
WCAG-succeskriterier
- 2.2.2 Pause, Stop, Hide, niveau A
Afsnit i EN 301 549
| 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)
sections/announcement-bar.liquid Æ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)
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
| 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)
footer.php Æ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
| 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 |
functions.php Æ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
| 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)
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
| 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
| 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 tjekEller 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