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 <img>, assurez-vous d'ajouter l'attribut <img> à 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 <img src="xxx.svg"> 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 <svg> 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 <svg>, 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 <svg> contient <use>, 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 car certains lecteurs d'écran ne liront pas correctement l'attribut aria-label si <svg> n'est pas utilisé dans un élément focalisable.

6. Prise en charge du navigateur IE8

Dans le navigateur IE8, la balise <svg> dans <desc> 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!