Rendre le contenu d’une zone de dessin accessible

Rendre le contenu d’une zone de dessin accessible

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Étant donné que le langage HTML5 ne dispose d’aucun moyen d’exposer le contenu d’une zone de dessin à des fins d’accessibilité, vous devez utiliser l’élément CANVAS avec parcimonie dans une application accessible. Si vous utilisez l’élément CANVAS, nous vous conseillons d’utiliser les attributs ARIA pour décrire la nature, le comportement et les propriétés de la zone de dessin. Cas le plus direct : l’élément CANVAS correspond directement à un rôle ARIA unique.


<!-- Canvas exposed as an image element. -->
<canvas id="example" width="260" height="200" role="img" >Circles</canvas>

<!-- Canvas exposed as a button element -->
<canvas id="roundButton" width="50" height="50"
    tabindex="0" role="button" aria-label="Round"
    onmousedown="..." onmouseup="..." onclick="..." onkeydown="..." onkeyup="...">
</canvas>


En général, l’élément CANVAS est dynamique et vous devez effectuer des opérations supplémentaires pour rendre les scénarios d’application accessibles. Vous devez en particulier implémenter une représentation DOM (Document Object Model) parallèle, qui est liée de manière dynamique au contenu de la zone de dessin et qui reste synchronisée avec elle.

Dans l’exemple suivant, le rôle ARIA grid fournit une représentation différente d’une zone de dessin, qui dessine un échiquier. Les éléments de la grille doivent être maintenus en JavaScript à mesure que le contenu de la zone de dessin change.



<!-- A canvas that draws a chessboard has an alternate grid representation. -->
<canvas id="chessBoardCanvas" width="300" height="300" role="grid" 
      tabindex="0" aria-label="Chess board" aria-activedescendant="a8">
    <div id="r8" role="row" aria-label="Row 8">
        <div id="a8" role="gridcell" aria-label="a8">
            <div role="img">black rook</div>
        </div>
        <div id="b8" role="gridcell" aria-label="b8">
            <div role="img">black knight</div>
        </div>
        ...
    </div>
    <div id="r7" role="row" aria-label="Row 7">
        <div id="a7" role="gridcell" aria-label="a7">
            <div role="img">black pawn</div>
        </div>
        ...
    </div>
    <div id="r6" role="row" aria-label="Row 6">
        <div id="a6" role="gridcell" aria-label="a6"></div>
        <div id="b6" role="gridcell" aria-label="b6"></div>
        ...
    </div>
</canvas>

Quand vous concevez votre application, gardez à l’esprit que la solution d’accessibilité décrite ici présente certaines limites. Bien qu’elle garantisse une arborescence d’interface utilisateur correcte, la représentation DOM (Document Object Model) parallèle n’est pas accessible dans tous les scénarios. Par exemple, le fait de pointer sur la zone de dessin avec la souris ou de façon tactile retourne uniquement l’élément DIV du conteneur, et non les sous-éléments qui représentent le contenu de la zone de dessin.

Remarque  L’élément Canvas XAML est simplement un contrôle Panel doté d’un positionnement absolu. Il ne présente pas les problèmes décrits ici liés à l’élément Canvas HTML. Ses enfants peuvent être lus en tant qu’éléments et apparaîtront dans une vue Microsoft UI Automation s’ils sont pertinents par rapport à la structure logique de l’application (l’élément Canvas lui-même étant un élément visuel destiné uniquement à la disposition et qui ne comporte aucune information sur la structure de l’application, il n’apparaît généralement pas dans une vue UI Automation).
 

Rubriques associées

Implémentation de l’accessibilité pour des types de contenus particuliers

 

 

Afficher:
© 2017 Microsoft