Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (156).NET Core  (27).NET MAUI  (27)Angular  (64)ASP.NET  (48)ASP.NET Core  (71)ASP.NET MVC  (88)Azure  (30)Blazor  (128)DocIO  (22)Essential JS 2  (76)Essential Studio  (168)File Formats  (25)Flutter  (121)JavaScript  (165)Microsoft  (107)PDF  (64)React  (43)Succinctly series  (126)Syncfusion  (533)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (29)Windows Forms  (57)WinUI  (38)WPF  (131)Xamarin  (142)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (55)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (53)Development  (319)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (9)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (267)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (33)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (20)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (87)UI  (181)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (289)What's new  (176)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
5 Important Things to Make Your Cross-Platform (.NET MAUI) App Accessible

5 Important Things to Make Your Cross-Platform (.NET MAUI) App Accessible

A good mobile app should be accessible to everyone, including people with disabilities. The app UI should best fit the needs of the users using it. So, when we approach making accessible apps, they should meet the global standards provided in the Web Content Accessibility Guidelines (WCAG).

If you are a mobile app developer, then this blog post is for you! You should know the following 5 important points to make sure your .NET MAUI mobile app is easily accessible to all.

Five important things for accessibility

Accessibility is a big topic to discuss. I am going to cover the following five important things to consider in accessibility when building a .NET MAUI mobile app:

Screen reader assistance

The first thing to consider is that your app UI should work well with the operating system’s screen reader assistance features. Screen reader assistance is generally a built-in option that assists users with voice narration through Google TalkBack (Android), Apple’s VoiceOver (iOS), and Narrator (Windows).

We have to consider the following in screen reader assistance:

  • All necessary elements like buttons, text boxes, labels, tooltip should be focusable through the screen reader.
  • Make sure of proper focusing order when the screen reader is navigating from one element to another.
  • The screen reader should read the necessary information about the elements and their purposes. It is good to consider what is performed when we access an element.

For example, if you are developing a .NET MAUI app, the Semantic properties will help you with this.

SemanticProperties.Description

This is an API that describes what we would like to announce through the TalkBack VoiceOver/Narrator using the screen reader. For example, if we have a nontext view that doesn’t have any description, then the screen reader won’t read any information about it.

Refer to the following code example.

<Label Text="Hello"   SemanticProperties.Description="Its a Label"/>

SemanticProperties.Hint

The SemanticProperties.Hint is similar to the SemanticProperties.Description property. But it is used more to voice additional information than the description through the screen reader assistance.

Mostly, the SemanticProperties.Hint provides some guidance, like input type on a text view or the purpose of that view.

Refer to the following code example.

<Label Text="Hello" SemanticProperties.Hint="Hint text is something"/>

Colors and contrast

Colors in an app will enhance the mood and tone. They bring attention to critical information. We have to choose colors carefully to display fundamental information with an accessible design.

Choose primary, secondary, and accent colors for your apps that support usability. Ensure adequate color contrast between elements so that users with low vision can see and use your app. The contrast ratio between background and foreground ranges from 1-21 based on the intensity of light emitted (luminance).

The W3C recommends the following contrast ratios for images or text and their backgrounds.

Text typeColor contrast ratio
Large text (14 point bold or 18 point regular and above)3:1 against the background
Small text4.5:1 against the background

Note: Color Tool can help you choose colors with adequate contrast between elements so that all users can see and easily use your app.

Generally, in a .NET MAUI element, you can set colors using the Background and TextColor properties.

The following image is a reference for a .NET MAUI app with some colors and their contrast.

Color and Contrast Reference in a .NET MAUI Application
Color and Contrast Reference in a .NET MAUI Application

Size

When we develop an app, sizing an element is the main factor that determines the UI and its usability. Let’s look at touch targets, pointer targets, and font size.

Touch targets

Nowadays, most mobile devices are touch-based. So, we have to consider the touch target of elements to make using our apps easier. We can extend the touch targets beyond the visual bounds. Generally, the recommended touch target is 48×48 dp.

For example, an image may be 24 x 24 dp, but its touch target should be 48 x 48 dp.

Note: In iOS, 44 x 44 points is the recommended touch target.

Pointer targets

Like touch targets, we have to consider pointer targets in an app. Cross-platform app development like in .NET MAUI needs motion-tracking pointer devices such as a mouse or a stylus pen. The minimum recommended size for them is 44 x 44 dp.

Font size

Apps should not compromise readability, as it is one of the significant factors of accessibility. So, we have to develop mobile apps considering the features that allow users to adjust their font size system-wide.

Keyboard navigation

Users like to use keyboard shortcuts for fast interaction with an app. This is especially true when it comes to cross-platform apps used in a desktop platform like WinUI and Mac Catalyst.

Keyboard shortcuts are keys or combinations of keys. They provide an alternative way to perform an action that can also be done with a mouse or touch interaction.

Writing and icon representations

Providing the necessary details of an app and its UI elements is also important to accessibility.

In this case, using self-descriptive UI elements is a good way of developing an app. Icon representation is a common way of designing a UI. We have to combine the icons with action verbs. Action verbs describe the action of an element rather than its appearance.

Refer to the following image.

Writing and Icon Representation in .NET MAUI Application
Writing and Icon Representation in .NET MAUI Application

Conclusion

Thanks for reading! I hope you have enjoyed this blog. We at Syncfusion are working on our .NET MAUI controls by considering accessibility as one of the main factors. Try out the tips discussed in this blog post and enhance the accessibility of your .NET MAUI apps!

If you have any feedback, special requirements, or controls that you’d like to see in our .NET MAUI suite, please mention them in the comments section below.

You can also contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top