<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

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

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
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>
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>
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

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung