Une brève discussion sur plusieurs méthodes pour améliorer l'accessibilité des fichiers SVG sur les pages Web

(Tutoriel recommandé : tutoriel HTML)

SVG est un format de fichier image. Son nom anglais complet est Scalable Vector Graphics, ce qui signifie Scalable. graphiques vectoriels. Cet article vous présentera 7 solutions pour améliorer l'accessibilité des fichiers SVG sur les pages Web.

1. Fichiers SVG utilisés comme images

Si votre SVG est introduit comme le src de a1f02c36ba31691bcfe87b2722de723b, assurez-vous d'ajouter l'attribut a1f02c36ba31691bcfe87b2722de723b à role="img" :

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
     role="img" alt="Simply Accessible">

<a href="#">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
       role="img" alt="Simply Accessible">
</a>

Si role="img" n'est pas ajouté, certains lecteurs d'écran ne reconnaîtront pas 14f13b3155781d4b33a0a5a1b3842df4 comme une image et ne liront que la valeur alt.

2. SVG utilisé comme icône

Lorsque vous utilisez SVG comme icône, veuillez utiliser aria-hidden="true" pour masquer le périphérique d'accès et ajouter un )' visuellement caché. s élément frère comme description sémantique textuelle de l’icône.

<a href="#">
  <svg class="icon icon-close" viewBox="0 0 32 32" aria-hidden="true">
    <use xlink:href="#icon-close"></use>
  </svg>
  <span class="sr-only">Close</span>
</a>

<svg display="none" version="1.1" viewBox="0 0 32 32">
  <defs>
    <g id="icon-close">
      <path class="path1" d="M31.708 25.707v0l-9.708-9.708 9.708-9.708c0.104-0.104 
      0.18-0.227 0.229-0.356 0.134-0.355 
      0.058-0.771-0.229-1.058l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.131 
      0.049-0.254 0.125-0.357 0.229l-9.708 
      9.708-9.708-9.708c-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 
      0.229l-4.586 4.585c-0.286 0.286-0.361 0.702-0.231 1.058 0.051 0.13 0.125 
      0.252 0.23 0.356l9.709 9.708-9.708 9.708c-0.105 0.104-0.18 0.228-0.23 
      0.357-0.132 0.354-0.056 0.771 0.23 1.057l4.586 4.586c0.286 0.286 0.702 
      0.361 1.057 0.229 0.131-0.050 0.252-0.125 0.357-0.229l9.708-9.708 9.708 
      9.708c0.104 0.104 0.227 0.18 0.357 0.229 0.355 0.133 0.771 0.057 
      1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 
      0.229-1.057-0.049-0.129-0.126-0.253-0.229-0.357z">
      </path>
    </g>
  </defs>
</svg>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
</style>

Comme ci-dessus, ajout de aria-hidden="true" pour 486d7a50595533609bc98d44595dc670 afin de l'empêcher d'accéder aux appareils. Le .sr-only qui suit est ce qu'on appelle l'élément visuellement caché - il est simplement invisible à l'œil nu, mais sera lu par les lecteurs d'écran.

3. BUG IE

Si la page Web doit être compatible avec IE, alors lors de l'utilisation de 486d7a50595533609bc98d44595dc670, vous devez ajouter explicitement l'attribut focusable="false" .

<svg focusable="false">...</svg>

La raison est : un BUG à propos de SVG dans le navigateur IE. Comme nous le savons tous, SVG ne sera pas focalisé par défaut, mais dans IE, si le SVG est contenu dans des éléments focalisables tels que des liens et des boutons, il peut être focalisé à l'aide de Tab. Cela conduit à la situation où l'élément enfant est à nouveau focalisé après que l'élément parent ait été focalisé.

4. BUG dans Safari 10

Dans Safari 10, si 486d7a50595533609bc98d44595dc670 contient 2199a63ce40299beb55b2a8b469dfcd6, veillez à les séparer avec un espace entre eux.

<svg> <use>...</use> </svg>

Sinon, lorsque vous utilisez l'onglet du clavier pour accéder ici, vous ne pourrez pas y accéder. Ce problème a été corrigé dans les versions ultérieures. Si votre page Web doit prendre en charge Safari 10, vous devez y prêter attention.

5. SVG utilisé comme image

Parfois, vous devez utiliser le fichier SVG comme image séparée, puis, comme pour le deuxième élément, ajouter un élément visuel caché Utilisé comme description sémantique.

<a href="https://simplyaccessible.com">
  <svg role="img" focusable="false"> <use xlink:href="#sa_logo"></use> </svg>
  <span class="sr-only">Simply Accessible</span>
</a>

n'a pas choisi d'ajouter la description sous la forme de e1caa4744075712ec42c807aeb949a42 car certains lecteurs d'écran ne liront pas correctement l'attribut aria-label si 486d7a50595533609bc98d44595dc670 n'est pas utilisé dans un élément focalisable.

6. Prise en charge du navigateur IE8

Dans le navigateur IE8, la balise 486d7a50595533609bc98d44595dc670 dans c96025df8207a00f765545452911fa76 sera affichée, elle doit donc prendre en charge ces navigateurs comme ce besoin de les cacher.

<!-- 下面语句的作用范围从 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->

7. Contraste des couleurs

Lors de la conception d'icônes SVG, veillez à prendre en compte les utilisateurs déficients en couleurs ou ceux utilisés sous des thèmes de fond noir à contraste élevé (Élevé Thème de contraste) utilisateur. Par exemple, lors de la conception d’icônes, pensez à utiliser un arrière-plan uni avec une bordure de couleur vive.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!