This content originally appeared on Telerik Blogs and was authored by Leomaris Reyes
SemanticOrderView, a .NET MAUI Community Toolkit API, lets us establish the order of visual elements on our screen so that adaptive technology can prioritize it correctly.
When developing an application, it’s important to cover as many scenarios and user needs as possible. One example is accessibility features. Imagine you have a registration form with different fields that visually make logical sense. But now, imagine a visually impaired person using it. This person will use a screen reader, but if it follows the visual order, it might not make sense to someone who is just listening.
Therefore, it’s ideal to establish the specific order in which each field should be read. This way, our application becomes much more accessible and easy to use. For this, we will use the SemanticOrderView from the .NET MAUI Community Toolkit.
What Is .NET MAUI Community Toolkit?
The .NET MAUI Community Toolkit is a curated collection of reusable components thoughtfully developed by the community. It encompasses a range of elements such as animations, converters and behaviors, all designed to accelerate app development. What’s more, it provides compatibility across iOS, Android, macOS and Windows, all thanks to the power of .NET MAUI.
What Is SemanticOrderView?
SemanticOrderView is an API of the .NET MAUI Community Toolkit. It allows us to set the order in which screen readers read the visual elements on our screen, so that it’s as understandable as possible for users who do not have the visual context. Screen readers identify and interpret what is shown on screen, improving accessibility in the new application.
Imagine the following example. You have a form in your app that requires the fields: email, full name, age and country. The default screen reader reads these fields in the exact order they appear on the screen. However, reading the email field first can be confusing for someone without the full visual context of the form, unlike someone who can see it.
Therefore, it would be ideal to reorder the fields so they can be read in a way that makes the most sense, regardless of their visual order.
Let’s look at the example visually:
Next, we will work on setting up this app!
Initial Setup
To correctly implement the SemanticOrderView, you’ll need the .NET MAUI Community Toolkit properly configured in your app. Setting it up is straightforward, as outlined in the steps below:
1. Installation: First, make sure to install the toolkit by adding the Community.Toolkit.Maui NuGet package.
2. Setup in MauiProgram.cs: After adding the NuGet package, navigate to MauiProgram.cs. Right below UseMauiApp<App>(), append:
.UseMauiCommunityToolkit()
3. Namespace Addition: Include the toolkit namespace in your page:
xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolki](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)t”
How to Implement SemanticOrderView?
Step 1: Let’s start by adding the SemanticOrderView component from the .NET MAUI Community Toolkit. To do this, add the tags indicated below with the SemanticOrderViewSample in the x:Name property. Within this tag, include the code specified in Step 2.
<toolkit:SemanticOrderView x:Name="SemanticOrderViewSample">
<!-- Add the code for Step 2 here. -->
</toolkit:SemanticOrderView>
Step 2: Now, we will add the fields that our example will contain:
<VerticalStackLayout Padding="30,0" Spacing="25">
<Entry x:Name="Email" Placeholder="Write your email"/>
<Entry x:Name="Fullname" Placeholder="Write your full name"/>
<Entry x:Name="Age" Placeholder="Write your age"/>
<Entry x:Name="Country" Placeholder="Write your country name"/>
</VerticalStackLayout>
⚠️ Note that all entries have the x:Name property with their respective names. This will help us complete the example in the next step.
Step 3: Finally, call the ViewOrder property of the SemanticOrderViewSample and add a View List with the order in which you want the visual elements to be read. Remember to use the names you assigned earlier in the x:Name property for each element.
public MainPage()
{
InitializeComponent();
this.SemanticOrderViewSample.ViewOrder = new List<View> { Fullname, Email, Country, Age};
}
Yay!
And that’s it! In this simple way, you’ve learned how to organize your visual elements more intuitively, making it easier for people with visual disabilities to use your app!
✍️ Highlight
This is particularly useful when creating user interfaces in a different order than how users and screen readers navigate through them.
References
This article was based on the official documentation:
This content originally appeared on Telerik Blogs and was authored by Leomaris Reyes
Leomaris Reyes | Sciencx (2024-10-03T14:17:50+00:00) Exploring SemanticOrderView in .NET MAUI Community Toolkit. Retrieved from https://www.scien.cx/2024/10/03/exploring-semanticorderview-in-net-maui-community-toolkit/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.