SemanticOrderView

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

SemanticOrderView の使用

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

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

これにより、スクリーン リーダー ソフトウェアを使用してアクセスした場合のこれらのコントロールの "適切な" 順序は、最初に TitleLabel にフォーカスし、次に DescriptionLabel であることを SemanticOrderView に指示します。

例

この機能の動作状態の例は、.「NET MAUI Community Toolkit サンプル アプリケーション」でご覧になれます。

API

SemanticOrderView のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。