Les éléments <blink> sont obsolètes et ne doivent pas être utilisés
Un texte clignotant est gênant et difficile à lire pour les clients ayant des troubles de l’attention, de la lecture ou de la vue, et ils n’ont aucun moyen de l’arrêter. Un contenu important, comme l’annonce d’une promotion, peut passer totalement inaperçu.
- Identifiant de la règle
- blink
- Source
- axe-core 4.13.0
- Impact
- Grave
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Vérifier que les éléments <blink> ne sont pas utilisés
La sélection se fait uniquement par le nom de balise. La règle retient chaque élément <blink> du document, quels que soient son texte et ses attributs, sans écarter d’abord les éléments masqués. Chaque élément subit ensuite un seul test, le contrôle is-on-screen d’axe-core appliqué à l’inverse : l’élément échoue s’il est visible à l’écran et réussit s’il ne l’est pas.
Un élément est hors de vue, par exemple, avec display: none ou opacity: 0 sur lui-même ou sur un ancêtre, avec visibility: hidden sur l’élément lui-même, avec un clip de taille nulle ou clip-path: circle(0), ou lorsqu’il est placé entièrement au-dessus de la page. Le test ne répond que par oui ou par non ; la règle ne produit donc aucun résultat « à examiner ».
Le scanner de Validiscan regroupe les échecs selon une empreinte qui ignore les identifiants générés et les index de position ; un <blink> placé dans un en-tête commun à toutes les pages devient donc un seul constat, avec le nombre de pages concernées. Un clignotement produit par CSS ou par un script échappe au sélecteur. <marquee> a sa propre règle, et les carrousels à défilement automatique relèvent du contrôle vs-carousel.
Comment corriger
Supprimez chaque élément <blink> et conservez son texte comme contenu normal. Si une mise en avant est nécessaire, utilisez un style statique comme du texte en gras ou un badge ; toute animation doit s’arrêter en moins de cinq secondes ou proposer un bouton de pause.
Critères de succès WCAG
- 2.2.2 Pause, Stop, Hide, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.2.2 | 9.2.2.2 | 9.2.2.2 |
Où une recette corrige le problème
Shopify : recette remove-blink-marquee
Afficher l’avant et l’après (1)
sections/announcement-bar.liquid Modifications apportées à sections/announcement-bar.liquid (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <marquee class="announcement-bar__message" behavior="scroll" direction="left" scrollamount="4">{{ section.settings.text | escape }}</marquee> | |
| 7 | Supprimée | <p class="announcement-bar__note"><blink class="announcement-bar__flag">New</blink> winter collection</p> | |
| 6 | Ajoutée | <div class="announcement-bar__message">{{ section.settings.text | escape }}</div> | |
| 7 | Ajoutée | <p class="announcement-bar__note"><span class="announcement-bar__flag">New</span> winter collection</p> | |
| 8 | 8 | </div> | |
| 9 | 9 | </div> | |
| 10 | 10 |
Shopware : recette remove-blink-marquee
Afficher l’avant et l’après (1)
Resources/views/storefront/layout/header/top-bar.html.twig Modifications apportées à Resources/views/storefront/layout/header/top-bar.html.twig (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <marquee class="top-bar-marquee" behavior="scroll" scrollamount="4"><span>{{ 'header.topBarUsp'|trans }}</span></marquee> | |
| 7 | Ajoutée | <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 | Supprimée | <blink class="top-bar-blink">{{ 'header.topBarHelp'|trans }}</blink> | |
| 16 | Ajoutée | <span class="top-bar-blink">{{ 'header.topBarHelp'|trans }}</span> | |
| 17 | 17 | </a> | |
| 18 | 18 | </li> | |
| 19 | 19 | </ul> |
WooCommerce : recette remove-blink-marquee
Afficher l’avant et l’après (2)
footer.php Modifications apportées à footer.php (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 31 | 31 | <?php endfor; ?> | |
| 32 | 32 | </div> | |
| 33 | 33 | ||
| 34 | Supprimée | <marquee class="kb-ticker" behavior="scroll" scrollamount="3"><?php esc_html_e( 'Free returns within 30 days', 'kestrel-birch' ); ?></marquee> | |
| 34 | Ajoutée | <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 Modifications apportées à functions.php (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | 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 | Ajoutée | 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 Modifications apportées à functions.php (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 11 | 11 | add_action( 'after_setup_theme', 'minimal_setup' ); | |
| 12 | 12 | ||
| 13 | 13 | function minimal_sale() { | |
| 14 | Supprimée | echo '<p><blink class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</blink></p>'; | |
| 14 | Ajoutée | echo '<p><span class="sale">' . esc_html__( 'Sale', 'minimal' ) . '</span></p>'; | |
| 15 | 15 | } |
template-parts/notice.php Modifications apportées à template-parts/notice.php (lignes ajoutées : 3, lignes supprimées : 3)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1 | 1 | <div class="notice"> | |
| 2 | Supprimée | <marquee class="notice__ticker" behavior="scroll" direction="left" scrollamount="4"> | |
| 2 | Ajoutée | <div class="notice__ticker"> | |
| 3 | 3 | <?php esc_html_e( 'Free shipping this week', 'minimal' ); ?> | |
| 4 | Supprimée | </marquee> | |
| 5 | Supprimée | <blink><?php esc_html_e( 'New!', 'minimal' ); ?></blink> | |
| 4 | Ajoutée | </div> | |
| 5 | Ajoutée | <span><?php esc_html_e( 'New!', 'minimal' ); ?></span> | |
| 6 | 6 | </div> |
Magento : recette remove-blink-marquee
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1 | Supprimée | <marquee class="news-ticker" behavior="scroll" direction="left" scrollamount="4"> | |
| 1 | Ajoutée | <div class="news-ticker"> | |
| 2 | 2 | <p>Autumn sale: 20% off all jackets</p> | |
| 3 | Supprimée | </marquee> | |
| 3 | Ajoutée | </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 Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/top-promo.phtml (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <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 | Ajoutée | <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> |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet