SemanticOrderView
SemanticOrderView
permet de contrôler l’ordre des VisualElements pour les lecteurs d’écran et d’améliorer l’accessibilité d’une application. Cela peut être particulièrement utile lors de la création d’interfaces utilisateur dans des ordres différents de l’ordre dans lequel les utilisateurs et les lecteurs d’écran les parcourent.
Utilisation de SemanticOrderView
L’exemple suivant montre comment SemanticOrderView
peut modifier l’ordre dans lequel le lecteur d’écran annonce des éléments de manière à ce qu’il soit différent de l’ordre dans lequel ils sont ajoutés à l’interface utilisateur. Le code XAML ci-dessous montre comment TitleLabel
effectue le rendu du titre après que DescriptionLabel
effectue le rendu de la description, ce qui signifie que visuellement, nous verrons la description avant le titre. Bien que cela puisse avoir du sens lorsque quelqu’un regarde l’écran, cela n’en a pas nécessairement pour une personne malvoyante qui ne voit pas (entièrement) l’écran.
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="CommunityToolkit.Maui.Sample.Pages.Views.SemanticOrderViewPage"
Title="Semantic Order View">
<ContentPage.Content>
<toolkit:SemanticOrderView x:Name="SemanticOrderView">
<Grid RowDefinitions="2*,*">
<Label x:Name="DescriptionLabel" Text="{Binding Description}" />
<Label x:Name="TitleLabel" Text="{Binding Title}" FontSize="30" />
</Grid>
</toolkit:SemanticOrderView>
</ContentPage.Content>
</ContentPage>
Pour ce faire, dans le fichier code-behind, nous pouvons modifier comme suit l’ordre qui sera utilisé par le lecteur d’écran de l’appareil :
using System.Collections.Generic;
namespace CommunityToolkit.Maui.Sample.Pages.Views;
public partial class SemanticOrderViewPage : ContentPage
{
public SemanticOrderViewPage()
{
InitializeComponent();
this.SemanticOrderView.ViewOrder = new List<View> { TitleLabel, DescriptionLabel };
}
}
De cette manière, nous indiquons à SemanticOrderView
que l’ordre « approprié » pour ces contrôles, lorsqu’on y accède via le logiciel de lecteur d’écran, est de se concentrer d’abord sur le TitleLabel
, puis sur le DescriptionLabel
.
Exemples
Vous trouverez un exemple de cette fonctionnalité en action dans l’Exemple d’application du kit d’outils de la communauté .NET MAUI.
API
Vous pouvez trouver le code source deSemanticOrderView
sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.
.NET MAUI Community Toolkit