Partager via

Procédure pas à pas : création d’une application Windows accessible

La création d’une application accessible a des implications importantes pour l’entreprise. De nombreux gouvernements ont des réglementations d’accessibilité pour l’achat de logiciels. Le logo Certifié pour Windows inclut les exigences d’accessibilité. Environ 30 millions de résidents des États-Unis seuls, dont beaucoup de clients potentiels, sont affectés par l’accessibilité des logiciels.

Cette procédure pas à pas répond aux cinq exigences d’accessibilité pour le logo Certifié pour Windows. En fonction de ces exigences, une application accessible :

  • Prise en charge des paramètres de taille, de couleur, de police et d’entrée du Panneau de configuration. La barre de menus, la barre de titre, les bordures et la barre d’état se redimensionnent toutes lorsque l’utilisateur modifie les paramètres du panneau de configuration. Aucune modification supplémentaire des contrôles ou du code n’est requise dans cette application.

  • Activer le mode Contraste élevé.

  • Offrir un accès documenté au clavier à toutes les fonctionnalités.

  • Exposer l’emplacement du focus clavier visuellement et par programmation.

  • Évitez de transmettre des informations importantes par son seul.

Pour plus d’informations, consultez Ressources pour la conception d’applications accessibles.

Pour plus d’informations sur la prise en charge de différentes dispositions de clavier, consultez les meilleures pratiques pour le développement d’applications prêtes pour le monde.

Création du projet

Cette procédure pas à pas crée l’interface utilisateur d’une application qui prend des commandes de pizza. Il se compose d’un TextBox nom pour le client, d’un RadioButton groupe pour sélectionner la taille de pizza, un CheckedListBox pour sélectionner les garnitures, deux contrôles Bouton étiquetés Commande et Annuler, et un menu avec une commande de sortie.

L’utilisateur entre le nom du client, la taille de la pizza et les garnitures souhaitées. Lorsque l’utilisateur clique sur le bouton Commande, un résumé de la commande et son coût s’affichent dans une boîte de message, et les contrôles sont ensuite effacés et prêts pour la commande suivante. Lorsque l’utilisateur clique sur le bouton Annuler, les contrôles sont effacés et prêts pour la commande suivante. Lorsque l’utilisateur clique sur l’élément de menu Quitter, le programme se ferme.

L’accent mis sur cette procédure pas à pas n’est pas le code d’un système de commandes commerciales, mais l’accessibilité de l’interface utilisateur. La procédure pas à pas illustre les fonctionnalités d’accessibilité de plusieurs contrôles fréquemment utilisés, notamment les boutons, les cases d’option, les zones de texte et les étiquettes.

Pour commencer à créer l’application

Ajout des contrôles au formulaire

Lorsque vous ajoutez les contrôles à un formulaire, gardez à l’esprit les instructions suivantes pour rendre une application accessible :

  • Définissez les propriétés AccessibleDescription et AccessibleName. Dans cet exemple, le paramètre AccessibleRole par défaut est suffisant. Pour plus d’informations sur les propriétés d’accessibilité, consultez Fournir des informations d’accessibilité pour les contrôles sur un Windows Form.

  • Définissez la taille de police sur 10 points ou plus.

    Remarque

    Si vous définissez la taille de police du formulaire sur 10 lorsque vous démarrez, tous les contrôles ajoutés par la suite au formulaire auront une taille de police de 10.

  • Assurez-vous que tout contrôle Label qui décrit un contrôle TextBox précède immédiatement le contrôle TextBox dans l’ordre de tabulation.

  • Ajoutez une clé d’accès, à l’aide du caractère « & », à la Text propriété d’un contrôle auquel l’utilisateur peut accéder.

  • Ajoutez une clé d’accès, en utilisant le caractère « & », à la Text propriété de l’étiquette qui précède un contrôle auquel l’utilisateur peut vouloir accéder. Définissez la propriété UseMnemonic des étiquettes à true, afin que le focus soit placé sur le contrôle suivant dans l’ordre de tabulation lorsque l'utilisateur presse la touche d'accès.

  • Ajoutez des touches d’accès à tous les éléments de menu.

Pour rendre votre application Windows accessible

  • Ajoutez les contrôles au formulaire et définissez les propriétés comme décrit ci-dessous. Consultez l’image à la fin du tableau pour obtenir un modèle permettant d’organiser les contrôles sur le formulaire.

    Objet Propriété Valeur
    Form1 AccessibleDescription Bon de commande
    AccessibleName Bon de commande
    Taille de police 10
    Texto Formulaire de commande pizza
    PictureBox Nom logo
    AccessibleDescription Une tranche de pizza
    AccessibleName Logo de société
    Image N’importe quelle icône ou bitmap
    Étiquette Nom étiquetteEntreprise
    Texto Bonne pizza
    TabIndex 1
    AccessibleDescription Nom de la société
    AccessibleName Nom de la société
    Couleur de fond Bleu
    ForeColor Jaune
    Taille de police 18
    Étiquette Nom customerLabel
    Texto &Nom
    TabIndex 2
    AccessibleDescription Étiquette du nom du client
    AccessibleName Étiquette du nom du client
    UseMnemonic Vrai
    Zone de texte Nom clientNom
    Texto (aucun)
    TabIndex 3
    AccessibleDescription Nom du client
    AccessibleName Nom du client
    GroupBox Nom options de taille
    AccessibleDescription Options de taille de pizza
    AccessibleName Options de taille de pizza
    Texto Taille de la pizza
    TabIndex 4
    RadioButton Nom smallPizza
    Texto &Petit 6,00 $
    Vérifié Vrai
    TabIndex 0
    AccessibleDescription Petite pizza
    AccessibleName Petite pizza
    RadioButton Nom largePizza
    Texto &Large $10.00
    TabIndex 1
    AccessibleDescription Grande pizza
    AccessibleName Grande pizza
    Étiquette Nom Étiquette des garnitures
    Texto &Toppings (0,75 $ chacun)
    TabIndex 5
    AccessibleDescription Étiquette des garnitures
    AccessibleName Étiquette des garnitures
    UseMnemonic Vrai
    CheckedListBox Nom Garnitures
    TabIndex 6
    AccessibleDescription Garnitures disponibles
    AccessibleName Garnitures disponibles
    Objets Pepperoni, Saucisse, Champignons
    Bouton Nom commande
    Texto &Commande
    TabIndex 7
    AccessibleDescription Total de la commande
    AccessibleName Ordre total
    Bouton Nom Annuler
    Texto &Annuler
    TabIndex 8
    AccessibleDescription Annuler la commande
    AccessibleName Annuler la commande
    Menu Principal Nom leMenuPrincipal
    Élément de menu Nom fileCommands
    Texto &Fichier
    Élément de menu Nom Fermer l'application
    Texto Sortie

    Votre formulaire ressemble à l’image suivante :

    Formulaire de commande de pizza avec une zone de texte de nom, la taille et la sélection des garnitures.

Prise en charge du mode contraste élevé

Le mode Contraste élevé est un paramètre système Windows qui améliore la lisibilité en utilisant des couleurs et des tailles de police contrastées qui sont bénéfiques pour les utilisateurs malvoyants. La HighContrast propriété est fournie pour déterminer si le mode Contraste élevé est défini.

Si SystemInformation.HighContrast est true, l’application doit :

  • Afficher tous les éléments de l’interface utilisateur à l’aide du jeu de couleurs système

  • Transmettre par des signaux visuels ou sonner toutes les informations qui sont transmises par la couleur. Par exemple, si des éléments de liste particuliers sont mis en surbrillance à l’aide d’une police rouge, vous pouvez également ajouter du gras à la police, afin que l’utilisateur ait un indicateur de couleur non coloré que les éléments sont mis en surbrillance.

  • Omettre les images ou les modèles derrière le texte

L'application doit vérifier le paramètre HighContrast au démarrage de l'application et répondre à l'événement UserPreferenceChanged système. L’événement UserPreferenceChanged est déclenché chaque fois que la valeur de HighContrast change.

Dans notre application, le seul élément qui n’utilise pas les paramètres système pour la couleur est lblCompanyName. La SystemColors classe est utilisée pour modifier les paramètres de couleur de l’étiquette en couleurs système sélectionnées par l’utilisateur.

Pour activer le mode Contraste élevé de manière efficace

  1. Créez une méthode pour définir les couleurs de l’étiquette sur les couleurs système.

    Private Sub SetColorScheme()
    If SystemInformation.HighContrast Then
        companyLabel.BackColor = SystemColors.Window
        companyLabel.ForeColor = SystemColors.WindowText
    Else
        companyLabel.BackColor = Color.Blue
        companyLabel.ForeColor = Color.Yellow
    End If
End Sub

    private void SetColorScheme()
{
    if (SystemInformation.HighContrast)
    {
        companyLabel.BackColor = SystemColors.Window;
        companyLabel.ForeColor = SystemColors.WindowText;
    }
    else
    {
        companyLabel.BackColor = Color.Blue;
        companyLabel.ForeColor = Color.Yellow;
    }
}

  2. Appelez la SetColorScheme procédure dans le constructeur de formulaire (Public Sub New() en Visual Basic et public Form1() en Visual C#). Pour accéder au constructeur en Visual Basic, vous devez développer la région intitulée Code généré par le concepteur de formulaires Windows.

    Public Sub New()
    MyBase.New()
    InitializeComponent()
    SetColorScheme()
End Sub

    public Form1()
{
    InitializeComponent();
    SetColorScheme();
}

  3. Créez une procédure événementielle, avec la signature appropriée, pour répondre à l’événement UserPreferenceChanged .

    Protected Sub UserPreferenceChanged(sender As Object, _
e As Microsoft.Win32.UserPreferenceChangedEventArgs)
    SetColorScheme()
End Sub

    public void UserPreferenceChanged(object sender,
Microsoft.Win32.UserPreferenceChangedEventArgs e)
{
    SetColorScheme();
}

  4. Ajoutez du code au constructeur de formulaire, après l’appel à InitializeComponents, pour raccorder la procédure événementielle à l’événement système. Cette méthode appelle la SetColorScheme procédure.

    Public Sub New()
    MyBase.New()
    InitializeComponent()
    SetColorScheme()
    AddHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
       AddressOf Me.UserPreferenceChanged
End Sub

    public Form1()
{
    InitializeComponent();
    SetColorScheme();
    Microsoft.Win32.SystemEvents.UserPreferenceChanged
       += new Microsoft.Win32.UserPreferenceChangedEventHandler(
       this.UserPreferenceChanged);
}

  5. Ajoutez du code à la méthode de formulaire Dispose , avant l’appel à la méthode de la Dispose classe de base, pour libérer l’événement lorsque l’application se ferme. Pour accéder à la méthode Dispose en Visual Basic, vous devez développer la région intitulée code généré par le Concepteur Windows Form.

    Remarque

    Le code d’événement système exécute un thread distinct de l’application principale. Si vous ne relâchez pas l’événement, le code que vous raccordez à l’événement s’exécutera même après la fermeture du programme.

    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
    If disposing AndAlso components IsNot Nothing Then
        components.Dispose()
    End If
    RemoveHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
       AddressOf Me.UserPreferenceChanged
    MyBase.Dispose(disposing)
End Sub

    protected override void Dispose(bool disposing)
{
    if(disposing && components != null)
    {
        components.Dispose();
    }
    Microsoft.Win32.SystemEvents.UserPreferenceChanged
       -= new Microsoft.Win32.UserPreferenceChangedEventHandler(
       this.UserPreferenceChanged);
    base.Dispose( disposing );
}

  6. Appuyez sur F5 pour exécuter l’application.

Transmission d’informations importantes par des moyens autres que sons

Dans cette application, aucune information n’est transmise par le son seul. Si vous utilisez le son dans votre application, vous devez également fournir les informations d’un autre moyen.

Pour fournir des informations d’un autre moyen que le son

  1. Faites flasher la barre de titre à l’aide de la fonction d’API Windows FlashWindow. Pour obtenir un exemple d’appel de fonctions d’API Windows, consultez procédure pas à pas : appel d’API Windows.

    Remarque

    L’utilisateur peut avoir activé le service Windows SoundSentry, ce qui entraîne également le flash de la fenêtre lorsque les sons système sont lus via le haut-parleur intégré de l’ordinateur.

  2. Affichez les informations importantes dans une fenêtre non modale afin que l’utilisateur puisse y répondre.

  3. Affichez une boîte de dialogue qui acquiert le focus du clavier. Évitez cette méthode lorsque l’utilisateur peut taper.

  4. Affichez un indicateur d’état dans la zone de notification d’état de la barre des tâches. Pour plus d’informations, consultez Ajout d’icônes d’application à la barre des tâches avec le composant NotifyIcon Windows Forms.

Test de l’application

Avant de déployer l’application, vous devez tester les fonctionnalités d’accessibilité que vous avez implémentées.

Pour tester les fonctionnalités d’accessibilité

  1. Pour tester l’accès au clavier, déconnectez la souris et accédez à l’interface utilisateur pour chaque fonctionnalité en utilisant uniquement le clavier. Vérifiez que toutes les tâches peuvent être effectuées à l’aide du clavier uniquement.

  2. Pour tester la prise en charge de Contraste élevé, choisissez l’icône Options d’accessibilité dans le Panneau de configuration. Cliquez sur l’onglet Affichage et activez la case à cocher Utiliser le contraste élevé. Parcourez tous les éléments d’interface utilisateur pour vous assurer que les modifications de couleur et de police sont reflétées. Vérifiez également que les images ou les modèles dessinés derrière le texte sont omis.

    Remarque

    Windows NT 4 n’a pas d’icône Options d’accessibilité dans le Panneau de configuration. Par conséquent, cette procédure pour modifier le paramètre SystemInformation.HighContrast ne fonctionne pas dans Windows NT 4.

  3. D’autres outils sont facilement disponibles pour tester l’accessibilité d’une application.

  4. Pour tester l’exposition du focus clavier, exécutez loupe. (Pour l’ouvrir, cliquez sur le menu Démarrer , pointez sur Programmes, pointez sur Accessoires, pointez sur Accessibilité, puis cliquez sur Loupe). Naviguez dans l’interface utilisateur en utilisant à la fois la navigation par tabulation au clavier et la souris. Vérifiez que toutes les navigations sont suivies correctement dans Magnifier.

  5. Pour tester l’exposition d’éléments d’écran, exécutez Inspect et utilisez la souris et la touche TAB pour atteindre chaque élément. Vérifiez que les informations présentées dans les champs Nom, État, Rôle, Emplacement et Valeur de la fenêtre Inspecter sont significatives pour l’utilisateur pour chaque objet de l’interface utilisateur.

  • Last updated on