Rendre des info-bulles accessibles

Rendre des info-bulles accessibles

[ 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 ]

Nous décrivons ici le balisage et le code requis pour s’assurer que les info-bulles sont accessibles dans une application Windows Runtime.

Info-bulles HTML standard

Vous créez une info-bulle HTML standard en définissant l’attribut title sur un élément. Le système utilise une info-bulle HTML standard en tant que nom et description accessibles. Si vous voulez utiliser l’attribut title pour créer une info-bulle mais non un nom accessible, utilisez l’attribut aria-labelledby ou aria-label. Ces attributs sont prioritaires sur l’attribut title lorsque le système récupère le nom accessible.


<!-- Narrator reads: "Inner text" -->
<button>Inner text</button>
<!-- Narrator reads: "Title attribute" -->
<button title="Title attribute">Inner text</button>
<!-- Narrator reads: "ARIA label" -->
<button title="Title attribute" aria-label="ARIA label" >Inner text</button>

Info-bulles pour les applications Windows Runtime utilisant JavaScript

Une info-bulle figurant dans une application Windows Runtime utilisant JavaScript n’affecte pas le nom ou la description accessibles. Un lecteur d’écran présente une info-bulle quand elle s’affiche, mais si vous voulez utiliser le même texte pour une info-bulle et pour un nom ou une description accessibles, vous devez le faire de manière explicite.


<!-- The P element holds the text to use for the tooltip and description. -->
<p id="backTooltipText">Use this button to navigate back</p>
<button id="back" aria-describedby="backTooltipText">Back</button>
<script>
    var back = document.getElementById('back');
    var backTooltipText = document.getElementById('backTooltipText');

    var myTooltip = Win.UI.Tooltip(back);
    myTooltip.innerHTML = backTooltipText.innerHTML;
</script>

Remarque  Si le texte ne doit pas être affiché, vous pouvez utiliser des feuilles de style CSS pour rendre l’élément p invisible.
 

Info-bulles pour XAML

Le système d’interface utilisateur XAML pour les info-bulles peut soit utiliser des éléments ToolTip explicites, soit définir une info-bulle ne contenant que du texte en utilisant un attribut ToolTipService.ToolTip sur un UIElement. Le texte de l’info-bulle est promu en tant que propriété HelpText pour Microsoft UI Automation sur l’élément où l’info-bulle est attachée. En outre, ce texte correspond également à la valeur Name de l’élément ToolTip, mais l’info-bulle proprement dite ne fait généralement pas partie de l’affichage du contenu de l’arborescence UI Automation. Le service d’info-bulle XAML déclenche les événements UI Automation permettant aux lecteurs d’écran de détecter l’ouverture d’une info-bulle bénéficiant du focus. Le lecteur d’écran peut ensuite obtenir le texte à lire à partir de la valeur HelpText. Pour plus d’informations sur l’utilisation des info-bulles dans une interface utilisateur XAML, voir Comment ajouter une info-bulle. Pour en savoir plus sur la façon dont UI Automation traite les info-bulles, voir ToolTip Control Type.

Rubriques associées

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

 

 

Afficher:
© 2017 Microsoft