Exigences de texte accessibleAccessible text requirements

Cette rubrique décrit les meilleures pratiques relatives à l’accessibilité du texte dans une application, en garantissant que les couleurs et de l’arrière-plan respectent le coefficient de contraste nécessaire.This topic describes best practices for accessibility of text in an app, by assuring that colors and backgrounds satisfy the necessary contrast ratio. Elle traite également des rôles Microsoft UI Automation que peuvent avoir les éléments de texte dans une application UWP et des meilleures pratiques relatives au texte des graphiques.This topic also discusses the Microsoft UI Automation roles that text elements in a Universal Windows Platform (UWP) app can have, and best practices for text in graphics.

Coefficients de contrasteContrast ratios

Bien que les utilisateurs aient toujours la possibilité de basculer en mode de contraste élevé, la conception de votre application en ce qui concerne le texte doit considérer cette option comme un dernier recours.Although users always have the option to switch to a high-contrast mode, your app design for text should regard that option as a last resort. L’idéal consiste à s’assurer que le texte de votre application remplit certains critères établis quant au niveau de contraste entre le texte et son arrière-plan.A much better practice is to make sure that your app text meets certain established guidelines for the level of contrast between text and its background. L’évaluation du niveau de contraste est basée sur des techniques déterministes qui ne prennent pas en compte la teinte.Evaluation of the level of contrast is based on deterministic techniques that do not consider color hue. Par exemple, si vous avez du texte rouge sur fond vert, ce texte risque de ne pas être lisible pour quelqu’un souffrant de daltonisme.For example, if you have red text on a green background, that text might not be readable to someone with a color blindness impairment. La vérification et la correction du coefficient de contraste peuvent éliminer ce genre de problème d’accessibilité.Checking and correcting the contrast ratio can prevent these types of accessibility issues.

Les recommandations en matière de contraste du texte documentées ici sont basées sur une norme d’accessibilité Web intitulée G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.The recommendations for text contrast documented here are based on a web accessibility standard, G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. Ces conseils se trouvent dans la spécification Techniques W3C pour WCAG 2.0 .This guidance exists in the W3C Techniques for WCAG 2.0 specification.

Pour être considéré comme accessible, le texte visible doit présenter un coefficient de contraste de luminosité minimal de 4,5 pour 1 par rapport à l’arrière-plan.To be considered accessible, visible text must have a minimum luminosity contrast ratio of 4.5:1 against the background. Les exceptions comprennent les logos et le texte accessoire tel que le texte qui fait partie d’un composant d’interface utilisateur inactif.Exceptions include logos and incidental text, such as text that is part of an inactive UI component.

Le texte décoratif et qui ne véhicule aucune information est exclu.Text that is decorative and conveys no information is excluded. Par exemple, si des mots aléatoires sont utilisés pour créer un arrière-plan, et que ces mots peuvent être réorganisés ou remplacés sans changer le sens, ils sont considérés comme étant décoratifs et n’ont pas besoin de répondre à ce critère.For example, if random words are used to create a background, and the words can be rearranged or substituted without changing meaning, the words are considered to be decorative and do not need to meet this criterion.

Utilisez des outils de contraste des couleurs pour vérifier que le coefficient de contraste du texte visible est acceptable.Use color contrast tools to verify that the visible text contrast ratio is acceptable. Pour connaître les outils permettant de tester les coefficients de contraste, voir la spécification Techniques for WCAG 2.0 G18 (section Resources).See Techniques for WCAG 2.0 G18 (Resources section) for tools that can test contrast ratios.

Notes

Certains outils répertoriés par la spécification Techniques for WCAG 2.0 G18 ne peuvent pas être utilisés de manière interactive avec une application UWP.Some of the tools listed by Techniques for WCAG 2.0 G18 can't be used interactively with a UWP app. Vous pouvez être amené à saisir manuellement des valeurs de couleur de premier plan et d’arrière-plan dans l’outil, ou à effectuer des captures d’écran de l’interface utilisateur de l’application, puis à exécuter l’outil de coefficient de contraste sur l’image de capture d’écran.You may need to enter foreground and background color values manually in the tool, or make screen captures of app UI and then run the contrast ratio tool over the screen capture image.

Rôles d’éléments de texteText element roles

Une application UWP peut utiliser les éléments par défaut suivants (couramment appelés éléments de texte ou contrôles d’édition de texte ) :A UWP app can use these default elements (commonly called text elements or textedit controls ):

Lorsqu’un contrôle signale un rôle de modification, les technologies d’assistance supposent qu’il existe des moyens permettant aux utilisateurs de modifier les valeurs.When a control reports that is has a role of Edit, assistive technologies assume that there are ways for users to change the values. Par conséquent, si vous placez du texte statique dans une zonede texte, vous signalez le rôle et, par conséquent, le rapport de la structure de votre application à l’utilisateur d’accessibilité.So if you put static text in a TextBox, you are misreporting the role and thus misreporting the structure of your app to the accessibility user.

Dans les modèles de texte pour XAML, deux éléments sont principalement utilisés pour le texte statique : TextBlock et RichTextBlock.In the text models for XAML, there are two elements that are primarily used for static text, TextBlock and RichTextBlock. Aucun de ces éléments n’est une sous-classe de contrôle et, par conséquent, aucune d’entre elles n’est axée sur le clavier ou peut apparaître dans l’ordre de tabulation.Neither of these are a Control subclass, and as such neither of them are keyboard-focusable or can appear in the tab order. Toutefois, cela ne signifie pas que les technologies d’assistance ne peuvent pas ou ne veulent pas les lire.But that does not mean that assistive technologies can't or won't read them. Les lecteurs d’écran sont généralement conçus pour prendre en charge plusieurs modes de lecture du contenu dans une application, notamment un mode de lecture dédié ou des modèles de navigation qui vont au-delà du focus et de l’ordre de tabulation, comme un « curseur virtuel ».Screen readers are typically designed to support multiple modes of reading the content in an app, including a dedicated reading mode or navigation patterns that go beyond focus and the tab order, like a "virtual cursor". Par conséquent, ne placez pas votre texte statique dans des conteneurs pouvant être actifs simplement pour que l’ordre de tabulation y amène l’utilisateur.So don't put your static text into focusable containers just so that tab order gets the user there. Les utilisateurs des technologies d’assistance s’attendent à ce que tous les éléments inclus dans l’ordre de tabulation soient interactifs. Par conséquent, le fait d’y rencontrer du texte statique peut s’avérer plus déroutant qu’utile.Assistive technology users expect that anything in the tab order is interactive, and if they encounter static text there, that is more confusing than helpful. Nous vous recommandons de tester cette fonction vous-même, via le Narrateur, afin de vous faire une idée de l’expérience utilisateur liée à votre application lorsque vous utilisez le lecteur d’écran pour examiner le texte statique de cette dernière.You should test this out yourself with Narrator to get a sense of the user experience with your app when using a screen reader to examine your app's static text.

Accessibilité de suggestion automatiqueAuto-suggest accessibility

Lorsqu’un utilisateur effectue une saisie dans un champ d’entrée et qu’une liste de suggestions potentielles apparaît, il s’agit d’une suggestion automatique.When a user types into an entry field and a list of potential suggestions appears, this type of scenario is called auto-suggest. Ce scénario est courant dans le champ À : d’un message, dans la zone de recherche Cortana de Windows, dans le champ d’entrée d’URL de Microsoft Edge, dans le champ d’entrée de situation géographique de l’application Météo, etc.This is common in the To: line of a mail field, the Cortana search box in Windows, the URL entry field in Microsoft Edge, the location entry field in the Weather app, and so on. Si vous utilisez la fonction XAML AutosuggestBox ou les commandes intrinsèques HTML, cette expérience est d’ores et déjà raccordée par défaut.If you are using a XAML AutosuggestBox or the HTML intrinsic controls, then this experience is already hooked up for you by default. Pour la rendre accessible, le champ d’entrée et la liste doivent être associés.To make this experience accessible the entry field and the list must be associated. Cette procédure est expliquée dans la section Implémentation de la suggestion automatique.This is explained in the Implementing auto-suggest section.

La Narrateur a été mis à jour pour rendre cette expérience accessible avec un mode spécial de suggestions.Narrator has been updated to make this type of experience accessible with a special suggestions mode. À un niveau élevé, quand le champ d’entrée et la liste sont associés de manière appropriée, l’utilisateur final :At a high level, when the edit field and list are connected properly the end user will:

  • Aura connaissance de la liste et du moment de clôture de cette dernièreKnow the list is present and when the list closes
  • Aura connaissance du nombre de suggestions disponiblesKnow how many suggestions are available
  • Aura connaissance de l’élément sélectionné, le cas échéantKnow the selected item, if any
  • Sera en mesure de déplacer le focus du Narrateur de la listeBe able to move Narrator focus to the list
  • Sera en mesure de parcourir une suggestion avec l’ensemble des autres modes de lectureBe able to navigate through a suggestion with all other reading modes

Liste de suggestionsSuggestion list
Exemple de liste de suggestionsExample of a suggestion list

Implémentation de la suggestion automatiqueImplementing auto-suggest

Pour rendre cette expérience accessible, le champ d’entrée et la liste doivent être associés dans l’arborescence UIA.To make this experience accessible the entry field and the list must be associated in the UIA tree. Cette association est effectuée avec la propriété UIA_ControllerForPropertyId des applications de bureau ou la propriété ControlledPeers des applications UWP.This association is done with the UIA_ControllerForPropertyId property in desktop apps or the ControlledPeers property in UWP apps.

À un niveau élevé, il existe 2 types d’expériences de suggestion automatique.At a high level there are 2 types of auto-suggest experiences.

Sélection par défautDefault selection
Si une sélection par défaut est effectuée dans la liste, le narrateur recherche un événement UIA_SelectionItem_ElementSelectedEventId dans une application de bureau ou l’événement AutomationEvents. SelectionItemPatternOnElementSelected à déclencher dans une application UWP.If a default selection is made in the list, Narrator looks for a UIA_SelectionItem_ElementSelectedEventId event in a desktop app, or the AutomationEvents.SelectionItemPatternOnElementSelected event to be fired in a UWP app. Chaque fois que la sélection est modifiée, quand un utilisateur saisit une autre lettre et que les suggestions ont été mises à jour et quand un utilisateur parcourt la liste, l’événement ElementSelected doit être déclenché.Every time the selection changes, when the user types another letter and the suggestions have been updated or when a user navigates through the list, the ElementSelected event should be fired.

Liste avec une sélection par défautList with a default selection
Exemple avec une sélection par défautExample where there is a default selection

Aucune sélection par défautNo default selection
S’il n’existe aucune sélection par défaut, par exemple dans la zone emplacement de l’application météo, le narrateur recherche l’événement de UIA_LayoutInvalidatedEventId de bureau ou l’événement LayoutInvalidated UWP à déclencher sur la liste chaque fois que la liste est mise à jour.If there is no default selection, such as in the Weather app’s location box, then Narrator looks for the desktop UIA_LayoutInvalidatedEventId event or the UWP LayoutInvalidated event to be fired on the list every time the list is updated.

Liste sans sélection par défautList with no default selection
Exemple sans sélection par défautExample where there is no default selection

Implémentation XAMLXAML implementation

Si vous utilisez la fonction XAML par défaut AutosuggestBox, l’ensemble des connexions sont déjà effectuées.If you are using the default XAML AutosuggestBox, then everything is already hooked up for you. Si vous développez votre propre expérience de suggestion automatique à l’aide d’un élément TextBox et d’une liste, vous devrez définir la liste en tant que AutomationProperties.ControlledPeers sur l’élément TextBox .If you are making your own auto-suggest experience using a TextBox and a list then you will need to set the list as AutomationProperties.ControlledPeers on the TextBox . Vous devez déclencher l’événement AutomationPropertyChanged de la propriété ControlledPeers chaque fois que vous ajoutez ou supprimez cette propriété, mais également déclencher vos propres événements SelectionItemPatternOnElementSelected ou LayoutInvalidated en fonction de votre type de scénario, tel qu’expliqué plus haut dans cet article.You must fire the AutomationPropertyChanged event for the ControlledPeers property every time you add or remove this property and also fire your own SelectionItemPatternOnElementSelected events or LayoutInvalidated events depending on your type of scenario, which was explained previously in this article.

Implémentation HTMLHTML implementation

Si vous utilisez les contrôles intrinsèques du format HTML, l’implémentation UIA a d’ores et déjà été mappée.If you are using the intrinsic controls in HTML, then the UIA implementation has already been mapped for you. Vous trouverez ci-dessous un exemple d’une implémentation déjà connectée :Below is an example of an implementation that is already hooked up for you:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Si vous créez vos propres contrôles, vous devez définir vos propres contrôles ARIA, décrits dans les normes W3C.If you are creating your own controls, you must set up your own ARIA controls, which are explained in the W3C standards.

Texte dans les graphiquesText in graphics

Dans la mesure du possible, évitez d’inclure du texte dans un graphique.Whenever possible, avoid including text in a graphic. Par exemple, tout texte que vous placez dans le fichier source d’image et qui est affiché dans l’application en tant qu’élément Image n’est pas automatiquement accessible ou lisible par les technologies d’assistance.For example, any text that you include in the image source file that is displayed in the app as an Image element is not automatically accessible or readable by assistive technologies. Si vous devez utiliser du texte dans les graphiques, assurez-vous que la valeur AutomationProperties.Name que vous fournissez comme équivalent de « alt text » comprend ce texte ou un résumé de la signification du texte.If you must use text in graphics, make sure that the AutomationProperties.Name value that you provide as the equivalent of "alt text" includes that text or a summary of the text's meaning. Des considérations semblables s’appliquent si vous créez des caractères texte à partir de vecteurs dans le cadre d’un objet Path ou à l’aide de Glyphs.Similar considerations apply if you are creating text characters from vectors as part of a Path, or by using Glyphs.

Taille et échelle de police du texteText font size and scale

Les utilisateurs peuvent avoir des difficultés à lire du texte dans une application lorsque les polices utilisées sont simplement trop petites. par conséquent, assurez-vous que le texte de votre application est de taille raisonnable.Users can have difficulty reading text in an app when the fonts uses are simply too small, so make sure any text in your application is a reasonable size in the first place.

Une fois que vous avez terminé, Windows comprend différents outils et paramètres d’accessibilité dont les utilisateurs peuvent tirer parti et s’adapter à leurs propres besoins et préférences pour lire du texte.Once you've done the obvious, Windows includes various accessibility tools and settings that users can take advantage of and adjust to their own needs and preferences for reading text. Elles incluent notamment :These include:

  • L’outil loupe, qui agrandit la zone sélectionnée de l’interface utilisateur.The Magnifier tool, which enlarges a selected area of the UI. Vous devez vous assurer que la disposition du texte dans votre application ne complique pas l’utilisation de la loupe pour la lecture.You should ensure the layout of text in your app doesn't make it difficult to use Magnifier for reading.
  • Les paramètres de mise à l’échelle et de résolution globaux dans paramètres->>système d’affichage->de l’échelle et de la disposition .Global scale and resolution settings in Settings->System->Display->Scale and layout . Les options de dimensionnement disponibles peuvent varier en fonction des capacités du périphérique d’affichage.Exactly which sizing options are available can vary as this depends on the capabilities of the display device.
  • Paramètres de taille du texte dans paramètres->facilité d’accès->affichage .Text size settings in Settings->Ease of access->Display . Ajustez le paramètre agrandir le texte pour spécifier uniquement la taille du texte dans les contrôles de prise en charge pour l’ensemble des applications et écrans (tous les contrôles de texte UWP prennent en charge l’expérience de mise à l’échelle du texte sans personnalisation ni création de modèles).Adjust the Make text bigger setting to specify only the size of text in supporting controls across all applications and screens (all UWP text controls support the text scaling experience without any customization or templating).

Notes

Le paramètre rendre tout le plus grand permet à un utilisateur de spécifier la taille préférée du texte et des applications en général sur leur écran principal uniquement.The Make everything bigger setting lets a user specify their preferred size for text and apps in general on their primary screen only.

Les différents contrôles et éléments de texte ont une propriété IsTextScaleFactorEnabled.Various text elements and controls have an IsTextScaleFactorEnabled property. La valeur par défaut de cette propriété est true .This property has the value true by default. Lorsque la valeur est true , la taille du texte de cet élément peut être mise à l’échelle.When true , the size of text in that element can be scaled. La mise à l’échelle affecte le texte dont les polices sont réduites à une valeur supérieure à celle d’un texte dont les polices sont volumineuses.The scaling affects text that has a small FontSize to a greater degree than it affects text that has a large FontSize . Vous pouvez désactiver le redimensionnement automatique en affectant à la propriété IsTextScaleFactorEnabled d’un élément la valeur false .You can disable automatic resizing by setting an element's IsTextScaleFactorEnabled property to false .

Pour plus d’informations, consultez mise à l’échelle du texte .See Text scaling for more details.

Ajoutez le balisage suivant à une application et exécutez-la.Add the following markup to an app and run it. Ajustez le paramètre de taille du texte et observez ce qui se passe à chaque TextBlock .Adjust the Text size setting, and see what happens to each TextBlock .

XAMLXAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

Nous vous déconseillons de désactiver la mise à l’échelle du texte, car la mise à l’échelle du texte de l’interface utilisateur de manière universelle sur toutes les applications est une expérience d’accessibilité importante pour les utilisateurs.We don't recommend that you disable text scaling as scaling UI text universally across all apps is an important accessibility experience for users.

Vous pouvez également utiliser l’événement TextScaleFactorChanged et la propriété TextScaleFactor pour évaluer les incidences sur le paramètre Taille du texte sur le téléphone.You can also use the TextScaleFactorChanged event and the TextScaleFactor property to find out about changes to the Text size setting on the phone. Voici comment procéder :Here’s how:

C#C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

La valeur de TextScaleFactor est un double dans la plage [ 1, 2,25 ] .The value of TextScaleFactor is a double in the range [1,2.25]. Le texte le plus petit subit un agrandissement de cette ampleur.The smallest text is scaled up by this amount. Vous pouvez par exemple utiliser la valeur pour adapter des éléments graphiques au texte.You might be able to use the value to, say, scale graphics to match the text. Gardez toutefois à l’esprit que tout le texte n’est pas mis à l’échelle selon le même facteur.But remember that not all text is scaled by the same factor. En règle générale, plus la taille du texte initial est élevée, moins le texte est affecté par la mise à l’échelle.Generally speaking, the larger text is to begin with, the less it’s affected by scaling.

Les types suivants possèdent une propriété IsTextScaleFactorEnabled :These types have an IsTextScaleFactorEnabled property: