Étiquette Aria gridcell toujours vide à l'intérieur SVG rect

J'essaie de développer un diagramme à barres accessible. Comme il n'y a pas encore de rôle formel ARIA pour les graphismes, j'ai décidé d'ajouter role="grid" à mon SVG. La plupart des choses fonctionnent bien, mais la gridcell est toujours blank lorsque je teste mon graphique en utilisant Voice Over. Il s'agit du codepen qui illustre mon graphique. Et c'est un video de mes tests utilisant Voice Over.Étiquette Aria gridcell toujours vide à l'intérieur SVG rect

Voilà comment j'ai configuré le gridcell pour mon tag rect:

<g className={barClass} role="gridcell" aria-label={bar.count + ' ' + bar.fruit}> 
    <rect width={bar.count * 10} height="19" y={20 * index}/> 
</g>

Question: Ai-je fait quelque chose de mal? Pourquoi la voix off ne reconnaît pas l'étiquette aria?

MISE À JOUR 1: J'utilise Chrome et Safari et le problème est présent dans les deux navigateurs.

Source

2016-02-09 Alan Souza

Tout en utilisant [NVDA] (http://www.nvaccess.org/), les barres lisent leur étiquette correctement sur mouseover tant que je copie généré HTML et lancez-le en dehors d'un 'iframe'. Pouvez-vous réessayer en dehors de CodePen? Vous pouvez également faire en sorte que votre tabulation soit '' avec 'tabindex =" 0 "'. – zero298

Merci pour votre aide. J'ai fait un test en dehors du codepen et je suis confronté au même problème. En ce qui concerne tabindex, je ne veux pas que les éléments svg internes soient focalisables. J'utilise le descendant actif pour garder le focus dans le svg racine et tout en appuyant sur left, right, top, down, change l'élément actif en utilisant javascript. J'ai enlevé cela du code existant pour éviter toute confusion. –

N'ajoutez pas 'tabindex' à' '. Ça ne marche pas pour moi. En outre, quels navigateurs utilisez-vous, parce que j'obtiens des variances entre FireFox et Chrome. – zero298

Utilisez les <title> et <desc> éléments avec l'attribut aria-label et le rôle img comme solution de repli: pour un graphique SVG

<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" 
    "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd"> 
<svg width="6in" height="4.5in" viewBox="0 0 600 450"> 
    <title>Network</title> 
    <desc>An example of a computer network based on a hub</desc> 
<!-- add graphic content here, and so on for the other components--> 
    </g> 
    <g id="ComputerA" aria-label="computer A: A common desktop PC" role="img"> 
    <title>Computer A</title> 
    <desc>A common desktop PC</desc> 
    </g> 
    <g id="ComputerB"> 
    <title>Computer B</title> 
    <desc>A common desktop PC</desc> 
    </g> 
    <g id="CableA" aria-label="Cable A: 10BaseT twisted pair cables" role="img"> 
    <title>Cable A</title> 
    <desc>10BaseT twisted pair cable</desc> 
    </g> 
    <g id="CableB"> 
    <title>Cable B</title> 
    <desc>10BaseT twisted pair cable</desc> 
    </g> 
    <g id="CableN"> 
    <title>Cable N</title> 
    <desc>10BaseT twisted pair cable</desc> 
    </g> 
</svg>

La façon la plus simple de spécifier un texte équivalent est d'inclure les éléments suivants un conteneur SVG ou élément graphique:

 
title 
    Provides a human-readable title for the element that contains it. The title element may be rendered by a graphical user agent as a tooltip. It may be rendered as speech by a speech synthesizer. 
desc 
    Provides a longer more complete description of an element that contains it. Authors should provide descriptions for complex or other content that has functional meaning.

Références

Source

2016-09-06 15:04:59

Étiquette Aria gridcell toujours vide à l'intérieur SVG rect

Répondre

Questions connexes