Chapter 7 Accessibility

•\ Operable: Making sure that you provide the user with the ability to use the application. This can be by providing keyboard navigation, making sure they have enough time to read and use the content, and much more.

•\ Understandable: Making sure that you provide a user interface that is understandable to the user. This can be making sure that the content is readable, predictable (appear and behave as expected), and helps the user avoid making mistakes.

•\ Robust: Making sure the content is robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. This can be by providing suitable support for assistive technologies.

To read more on these guidelines, I thoroughly recommend checking out the Quick Reference Guide at www.w3.org/WAI/WCAG21/quickref/.

How to Make Your Application Accessible

There are several things to consider when building an application that is inclusive. This section will not provide a complete set of tools for building applications inclusive for all. However, it will provide some insights to what

.NET MAUI offers and some other concepts to consider to set you off on a journey of discovery to building much more accessible applications.

Screen Reader Support

.NET MAUI provides great tools to provide explicit support for the screen readers on each of the supported platforms. I feel it is worth highlighting that point again: .NET MAUI utilizes the screen readers on each platform. This means that they will need to be enabled by the user for the

201

Chapter 7 Accessibility

settings to take effect. You will dive into each concept and how it enables you to expose information to those screen readers so you can provide a much more informative experience for your users.

As a starting exercise, pick up your phone and turn on your screen reader assistant. Try navigating around to get an understanding of what the experience is like and, most importantly, try an application you built. Does it provide a good experience?

Let’s see how you can make the WidgetBoard application more accessible with the screen readers available. Thankfully you haven’t built too much UI already, so you are in a good position to start. I urge you to consider applying concepts like this as early on in the development phase as possible.

SemanticProperties

The SemanticProperties class offers a set of attached properties that can be applied to any visual element. .NET MAUI applies these property values on the platform-specific APIs that provide accessibility.

Let’s look through each of the properties and apply them to your

BoardDetailsPage.

SemanticProperties.Description

The SemanticProperties.Description property allows you to define a short string that will be used by the screen reader to announce the element to the user when it gains focus.

As I type this chapter, I am testing the application. The first Entry added on the BoardDetailsPage currently results in the macOS VoiceOver assistant announcing “edit text, is editing, blank.”

You can change the Entry to the following:

<Entry

202

Chapter 7 Accessibility

Text="{Binding BoardName}" SemanticProperties.Description="Enter the board name"/>

This now results in “Enter the board name, is editing, blank” being announced, which is much more useful to the user.

You can take this a step further. You have a label above that just has the Text of “Name.” If you change this to use your new descriptive text, then you can set the SemanticProperties.Description value to its text. Let’s do that now; the changes are highlighted in bold:

<Label

Text="Enter the board name" x:Name="EnterBoardNameLabel"

FontAttributes="Bold" />

<Entry

Text="{Binding BoardName}"

SemanticProperties.Description="{Binding Text, Source={x:Reference EnterBoardNameLabel}}" />

The resulting code may look less appealing but it provides a number of benefits:

The macOS screen reader does provide a second announcement following the announcement you have been improving. This follow-up is

“You are currently on a text field. To enter text in this field, type.” This isn’t the most informative, so let’s provide a better hint to the user.

203

Chapter 7 Accessibility

The act of setting the SemanticProperties.Description property will automatically make a visual element be announced by the screen reader. By default, an Image control is not announced but by setting this property, the text will be announced when the control gains semantic focus.

SemanticProperties.Hint

The SemanticProperties.Hint property allows you to provide a string that the screen reader will announce to the user so that they have a better understanding of the purpose of the control.

Let’s add a hint to Entry with the addition in bold:

<Entry

Text="{Binding BoardName}" SemanticProperties.Description="{Binding Text, Source={x:Reference EnterBoardNameLabel}}"

SemanticProperties.Hint="Provides a name that will be used to identify your widget board. This is a required field." />

This change results in “Provides a name that will be used to identify your widget board. This is a required field. You are currently on a text field. To enter text in this field, type” being announced. I think you can agree that this adds yet more context to the user and this is a good thing.

SemanticProperties.HeadingLevel

The SemanticProperties.HeadingLevel property allows you to mark an element as a heading to help organize the UI and make it easier for users to navigate. Some screen readers enable users to quickly jump between

204