Chapter 7 Accessibility

private static double GetRelativeComponent(float component)

{

if (component <= 0.03928)

{

return component / 12.92;

}

return Math.Pow(((component + 0.055) / 1.055), 2.4);

}

If you take a look at the colors you are using for your text controls and the background colors, you can work out whether you need to improve on the contrast ratio. You can see by checking in your Styles.xaml file that your Label control uses Gray900 for the text color. Checking in the Colors. xaml file, you can see that this Gray900 color has a value of #212121. Therefore, you can use your methods to calculate the contrast ratio with

GetContrastRatio(Colors.White, Color.FromArgb("#212121");

This gives you a contrast ratio of 16.10:1, which means this is providing a very good contrast ratio. The best possible contrast is black on white, which gives a contrast ratio of 21:1. Therefore, you do not need to make any changes to your color scheme, which shows that .NET MAUI ships with default color options that are suitable for building accessible applications.

Dynamic Text Sizing

WCAG states in guideline 1.4.4 Resize text – Level AA that except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

210

Chapter 7 Accessibility

This guideline mainly focuses on highlighting the fact that there is still a large percentage of users that do not rely on accessibility features such as screen readers or screen magnification when they could benefit from them. The guideline further states that, as a developer, you should provide the ability to scale the text in your application up to 200% without relying on the operating system to perform the scaling.

In this section, I am not going to focus on adding that specific feature; however, I will be discussing some approaches that will aid this feature as well as using the assistive technology options.

Avoiding Fixed Sizes

Wherever possible you want to avoid setting the WidthRequest and HeightRequest properties for any control that can contain text.

Imagine you set WidthRequest="200" and HeightRequest="30" on the Label controls in your BoardDetailsPage.xaml file. What you would initially see is that the text fits nicely using the standard font scaling options. Figure 7-1 shows your application with fixed size controls and a small font size.

211

Chapter 7 Accessibility

Figure 7-1.  Your application with fixed sizing and a small font size

However, if you up the scaling to 200%, you will see a rather unpleasant screen. Figure 7-2 shows your application with fixed size controls and a large font size, highlighting that the text becomes clipped and unreadable.

212

Chapter 7 Accessibility

Figure 7-2.  Your application with fixed sizing and a large font size

It actually appears that your initial changes without the WidthRequest and HeightRequest values on the Label controls gives the best experience. Figure 7-3 shows your application responding to font size changes when control sizes are not fixed.

213