<blink>-Elemente sind veraltet und dürfen nicht verwendet werden
Blinkender Text lenkt ab und ist für Kundinnen und Kunden mit Aufmerksamkeits-, Lese- oder Sehschwierigkeiten schwer zu lesen, und sie haben keine Möglichkeit, ihn anzuhalten. Wichtige Inhalte wie ein Hinweis auf einen Sale können dabei völlig untergehen.
- Regel-ID
- blink
- 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 <blink>-Elemente verwendet werden
Ausgewählt wird allein nach dem Tag-Namen. Die Regel erfasst jedes <blink>-Element im Dokument, gleich welchen Text oder welche Attribute es trägt, und sortiert verborgene Elemente vorher nicht aus. Jedes Element durchläuft dann genau einen Test, die Prüfung is-on-screen von axe-core mit umgekehrtem Ergebnis: Ist das Element auf dem Bildschirm sichtbar, gilt es als Verstoß, ist es nicht sichtbar, besteht es.
Nicht sichtbar ist ein Element zum Beispiel mit display: none oder opacity: 0 am Element selbst oder an einem übergeordneten Element, mit visibility: hidden am Element selbst, mit einem clip der Größe null oder clip-path: circle(0) oder wenn es vollständig oberhalb der Seite positioniert ist. Der Test kennt nur Ja oder Nein, deshalb liefert die Regel nie das Ergebnis „zu prüfen“.
Der Scanner von Validiscan fasst Verstöße über einen Fingerabdruck zusammen, der generierte IDs und Positionsindizes nicht berücksichtigt. Ein <blink> in einem Header, den alle Seiten gemeinsam nutzen, ergibt deshalb einen einzigen Befund mit der Anzahl der betroffenen Seiten. Blinken, das mit CSS oder einem Skript erzeugt wird, erfasst der Selektor nicht. Für <marquee> gibt es eine eigene Regel, und automatisch wechselnde Karussells behandelt die Prüfung vs-carousel.
So wird es behoben
Entfernen Sie jedes <blink>-Element und behalten Sie seinen Text als normalen Inhalt. Wenn eine Hervorhebung nötig ist, verwenden Sie statische Gestaltung wie fetten Text oder ein Badge; jede Animation muss innerhalb von fünf Sekunden enden oder eine Pause-Funktion bieten.
WCAG-Erfolgskriterien
- 2.2.2 Pause, Stop, Hide, Stufe A
Abschnitte der EN 301 549
| 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)
sections/announcement-bar.liquid Ä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)
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
| 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)
footer.php Ä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
| 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 |
functions.php Ä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
| 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)
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
| 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
| 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 anfordernOder 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