Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

L'élément <canvas> lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.

Moyen de repli

Le contenu à l'intérieur d'un tag <canvas> ... </canvas> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur html5accessibility.com demontre comment cela peut être fait.

<canvas> 
  <h2>Shapes</h2> 
  <p>A rectangle with a black border. 
   In the background is a pink circle. 
   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. 
   Partially overlaying the circle is a green 
   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> 
   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
   both of which are semi-opaque, so the full circle can be seen underneath.</p> 
</canvas> 

Jetez un oeil à la video comment NVDA lit cet exemple par Steve Faulkner (en anglais).

Les règles ARIA

Accessible Rich Internet Applications (ARIA) (≈ Les applications Internet Accessibles Riches) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicape. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir ARIA et les techniques ARIA pour plus d'informations.

<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>

Zones cibles (hit Region)

Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).

CanvasRenderingContext2D.addHitRegion()
Ajoute une "hit region" au canvas..
CanvasRenderingContext2D.removeHitRegion()
Supprime la "hit region" avec l'id spécifiée venant du canvas.
CanvasRenderingContext2D.clearHitRegions()
Retire toutes les "hit regions" du cnavas.

Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété MouseEvent.region pour tester si votre souris entre dans votre région, par exemple.

<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: 'circle'});

canvas.addEventListener('mousemove', function(event) {
  if (event.region) {
    alert('hit region: ' + event.region);
  }
});
</script>

La méthode addHitRegion() accepte aussi une option de control pour envoyer des événement vers un élément (c'est un enfant des canvas):

ctx.addHitRegion({control: element});

Cela peut être utile pour le routage d'éléments <input>, par exemple. Regardez aussi codepen demo.

Focus rings

Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété drawFocusIfNeeded peut être utilisée.

CanvasRenderingContext2D.drawFocusIfNeeded()
Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.

De plus, la méthode scrollPathIntoView() peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.

CanvasRenderingContext2D.scrollPathIntoView()
Affiche le chemin courant ou le chemin donné.

See also

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Syberam
 Dernière mise à jour par : Syberam,