Explorer SemanticOrderView dans la boîte à outils de la communauté .NET MAUI

SemanticOrderView, une API .NET MAUI Community Toolkit, nous permet d’établir l’ordre des éléments visuels sur notre écran afin que la technologie adaptative puisse les hiérarchiser correctement.

Lors du développement d’une application, il est important de couvrir autant de scénarios et de besoins des utilisateurs que possible. Un exemple concerne les fonctionnalités d’accessibilité. Imaginez que vous ayez un formulaire d’inscription avec différents champs qui ont un sens visuel. Mais maintenant, imaginez une personne malvoyante qui l’utilise. Cette personne utilisera un lecteur d’écran, mais s’il suit l’ordre visuel, cela pourrait ne pas avoir de sens pour quelqu’un qui ne fait qu’écouter.

Il est donc idéal d’établir l’ordre spécifique dans lequel chaque champ doit être lu. De cette façon, notre application devient beaucoup plus accessible et facile à utiliser. Pour cela, nous utiliserons le SemanticOrderView de la boîte à outils communautaire .NET MAUI.

🧠 La boîte à outils communautaire .NET MAUI est une collection organisée de composants réutilisables soigneusement développés par la communauté. Il englobe une gamme d’éléments tels que des animations, des convertisseurs et des comportements, tous conçus pour accélérer le développement d’applications. De plus, il offre une compatibilité sur iOS, Android, macOS et Windows, tout cela grâce à la puissance de .NET MAUI.

Qu’est-ce que SemanticOrderView ?

SemanticOrderView est une API de la boîte à outils communautaire .NET MAUI. Il nous permet de définir l’ordre dans lequel les lecteurs d’écran lisent les éléments visuels sur notre écran, afin qu’il soit le plus compréhensible possible pour les utilisateurs qui ne disposent pas du contexte visuel. Les lecteurs d’écran identifient et interprètent ce qui est affiché à l’écran, améliorant ainsi l’accessibilité dans la nouvelle application.

Imaginez l’exemple suivant. Vous disposez d’un formulaire dans votre application qui nécessite les champs : email, nom complet, âge et pays. Le lecteur d’écran par défaut lit ces champs dans l’ordre exact dans lequel ils apparaissent à l’écran. Cependant, lire d’abord le champ de courrier électronique peut être déroutant pour quelqu’un qui ne dispose pas du contexte visuel complet du formulaire, contrairement à quelqu’un qui peut le voir.

Par conséquent, il serait idéal de réorganiser les champs afin qu’ils puissent être lus de la manière la plus logique, quel que soit leur ordre visuel.

Regardons l’exemple visuellement :

Ensuite, nous travaillerons sur la configuration de cette application !

Configuration initiale

Pour mettre en œuvre correctement le VueOrdre Sémantiquevous aurez besoin du kit d’outils communautaires .NET MAUI correctement configuré dans votre application. Sa configuration est simple, comme indiqué dans les étapes ci-dessous :

1.Installation : Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.Toolkit.Maui NuGet.

2. Configuration dans MauiProgram.cs : Après avoir ajouté le package NuGet, accédez à MauiProgram.cs. Juste en dessous UseMauiApp<App>()ajouter :

.UseMauiCommunityToolkit()

3. Ajout d’espace de noms : Incluez l’espace de noms du kit d’outils dans votre page :

xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolki](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)t”

Comment implémenter SemanticOrderView ?

Étape 1 : Commençons par ajouter le composant SemanticOrderView de la boîte à outils communautaire .NET MAUI. Pour ce faire, ajoutez les balises indiquées ci-dessous avec le SemanticOrderViewSample dans le x:Name propriété. Dans cette balise, incluez le code spécifié à l’étape 2.

<toolkit:SemanticOrderView x:Name="SemanticOrderViewSample">
    
  
    
</toolkit:SemanticOrderView>

Étape 2 : Maintenant, nous allons ajouter les champs que contiendra notre exemple :

<VerticalStackLayout Padding="30,0" Spacing="25">
    
  <Entry x:Name="Email" Placeholder="Write your email"/>
	    
  <Entry x:Name="Fullname" Placeholder="Write your full name"/>
	    
  <Entry x:Name="Age" Placeholder="Write your age"/>
	    
  <Entry x:Name="Country" Placeholder="Write your country name"/>
	    
</VerticalStackLayout>

⚠️ Notez que toutes les entrées portent le x:Name propriété avec leurs noms respectifs. Cela nous aidera à compléter l’exemple à l’étape suivante.

Étape 3 : Enfin, appelez le ViewOrder propriété de SemanticOrderViewSample et ajoutez une liste de vues avec l’ordre dans lequel vous souhaitez que les éléments visuels soient lus. N’oubliez pas d’utiliser les noms que vous avez attribués plus tôt dans le x:Name propriété pour chaque élément.

public MainPage() 
  { 
    InitializeComponent(); 
    this.SemanticOrderViewSample.ViewOrder = new List<View> { Fullname, Email, Country, Age}; 
  }

Ouais!

Et c’est tout ! De cette manière simple, vous avez appris à organiser vos éléments visuels de manière plus intuitive, permettant ainsi aux personnes ayant une déficience visuelle d’utiliser plus facilement votre application !💚💕

✍️ Mettre en évidence

Ceci est particulièrement utile lors de la création d’interfaces utilisateur dans un ordre différent de celui de la façon dont les utilisateurs et les lecteurs d’écran les parcourent.

Références

Cet article était basé sur la documentation officielle :