Les cartes d'image côté serveur ne doivent pas être utilisées

ID de règle: server-side-image-map
Ensemble de règles: axe-core 4.12
Impact sur l’utilisateur: Faible
Lignes directrices: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Tests d'accessibilité pour les équipes de développement - Aucune expérience requise

Trouvez et corrigez jusqu'à 80 % des problèmes d'accessibilité avec axe DevTools Pro. Commencez votre essai gratuit dès aujourd'hui. Aucune carte de crédit nécessaire.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Aveugle
  • Surdicécité
  • Mobilité

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549
  • RGAA

Critères de réussite WCAG [WCAG 2.1 (A)]

  • 2.1.1: Keyboard

Critères de réussite WCAG [WCAG 2.0 (A)]

  • 2.1.1: Keyboard

Critères de réussite WCAG [WCAG 2.2 (A)]

  • 2.1.1: Keyboard

Directives de la section 508

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (f): Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Directives pour les testeurs de confiance

  • 4.A: All functionality can be accessed and executed using only the keyboard.

    RGAA

    • 1.1.4: Server-side image map regions provide a device-independent way to reach the same destination.

    Comment résoudre le problème

    Changez toutes les images réactives côté serveur en images réactives côté client.

    Mauvais exemple

    N'utilisez pas de cartes d'images côté serveur.

    <a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>

    Bon exemple

    Une carte d'image côté client est contenue dans un <img> élément. Ils ont un attribut usemap contenant le nom de la carte d'image (c'est-à-dire <img usemap="myImageMap" src="..." >). Après l' <img> élément, un ensemble d' <map> éléments entoure l'espace où les points d'accès cliquables sont définis sur la carte comme suit : 

    <img src="images/solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#Map"/>
<map name="Map">
    <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury">
    <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
    Remaining hotspots in image map...
</map>

    Pourquoi c'est important

    Les cartes d'images côté serveur ne sont pas accessibles au clavier ; des clics de souris sont nécessaires pour accéder aux liens contenus dans l'image, rendant l'image inaccessible aux personnes qui n'utilisent que le clavier pour leur navigation.

    Les cartes d'image côté serveur transmettent les coordonnées du clic de la souris au script côté serveur utilisé pour traiter la carte d'image. Parce qu'ils reposent sur des clics de souris, ils ne sont pas accessibles au clavier, alors que les cartes d'images côté client sont accessibles au clavier. De plus, il n'est pas possible de fournir des alternatives textuelles aux zones cliquables d'une carte d'image côté serveur comme vous pouvez le faire avec les area zones d'une carte d'image côté client.

    Description de la règle

    Le document contient une carte d'image qui est côté serveur plutôt que côté client.

    L'algorithme (en termes simples)

    Garantit que les cartes d'images côté serveur ne sont jamais utilisées.

    Ressources

    Pages de cours de l'Université Deque (abonnement requis)

    Contribuer à axe-core sur GitHub

    Autres ressources

    Vous pouvez également consulter ces autres ressources.

    Reportez-vous à la liste complète des règles d'axe 4.12 .

    Ces informations vous ont-elles été utiles ?

    Vous avez déjà donné votre avis, merci..

    Votre réponse a été la suivante :

    Ces informations vous ont-elles été utiles ?
    Date/heure de soumission des commentaires :