SemanticOrderView

SemanticOrderView proporciona la capacidad de controlar el orden de VisualElements para los lectores de pantalla y mejorar la accesibilidad de una aplicación. Esto puede ser especialmente útil al crear interfaces de usuario en un orden distinto de aquel en el que los usuarios y los lectores de pantalla navegarán por ellas.

Uso de SemanticOrderView

En el ejemplo siguiente se muestra cómo SemanticOrderView puede cambiar el orden en el que el lector de pantalla anuncia elementos fuera del orden en el que se agregan a la interfaz de usuario. El código XAML siguiente muestra la TitleLabel representación del título después de que DescriptionLabel representa la descripción, lo que significa que visualmente veremos la descripción antes del título. Aunque eso puede tener sentido cuando alguien lo mira, no tiene sentido necesariamente para alguien con discapacidad visual y no ve la pantalla (completamente).

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

Para ello, en el archivo de código subyacente podemos cambiar el orden que usará el lector de pantalla del dispositivo de la siguiente manera:

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 };
    }
}

Con esto, le indicamos al SemanticOrderView que el orden "adecuado" de estos controles, al acceder mediante un lector de pantalla, es poner primero el foco en TitleLabel y luego en DescriptionLabel.

Ejemplos

Puede encontrar un ejemplo de esta característica en acción en la aplicación de ejemplo .NET MAUI Community Toolkit.

API

Puede encontrar el código fuente de SemanticOrderView en el repositorio .NET MAUI Community Toolkit GitHub.