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 cuando la creación de interfaces de usuario en pedidos difiere del orden en el que los usuarios y lectores de pantalla los navegarán.

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 representación TitleLabel del título después de que DescriptionLabel represente 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 que 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, indicamos a SemanticOrderView que el orden "adecuado" para estos controles, cuando se accede a través del software de lector de pantalla, es centrarse primero en TitleLabel y, luego, en DescriptionLabel.

Ejemplos

Puede encontrar un ejemplo de esta característica en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de SemanticOrderView en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.