SemanticOrderView

SemanticOrderViewは、スクリーン リーダーの VisualElements の順序を制御し、アプリケーションのアクセシビリティを向上させる機能を提供します。 これは、ユーザーとスクリーン リーダーがユーザーインターフェイスをナビゲートする順序とは異なる順序でユーザー インターフェイスを構築する場合に特に便利です。

SemanticOrderView の使用

次の例は、SemanticOrderView によって、スクリーン リーダーが要素をユーザー インターフェイスに追加される順序とは異なる順序で読み上げられるようになるしくみを示しています。 次の XAML は、説明をレンダリングするTitleLabelの後にタイトルをレンダリングするDescriptionLabelを示しています。これは、タイトルの前に説明が視覚的に表示されることを意味します。 それは誰かがそれを見ているときに理にかなっているかもしれませんが、視覚に障碍があり、(完全に)画面を見ない人にとっては必ずしも意味がありません。

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

それを解決するには、コードビハインド ファイルで、デバイスのスクリーン リーダーが使用する順序を次のように変更できます。

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

これにより、スクリーン リーダー ソフトウェアを使用してアクセスする場合、これらのコントロールの "適切な" 順序は、最初にSemanticOrderViewに焦点を当ててからTitleLabelすることがDescriptionLabelに示されます。

例示

この機能の例は、.NET MAUI Community Toolkit サンプル アプリケーションで動作しています。

API

SemanticOrderView のソース コードは、.NET MAUI Community Toolkit GitHub リポジトリで確認できます。