April 14th, 2021

The Journey to Accessible Apps

Rachel Kang (SHE/HER)
Product Manager

No matter what stage of the app development process you’re at, and no matter your level of familiarity with developing inclusive apps, it is always the right time to make your apps more inclusive. Get started on your journey to developing inclusive apps today.

Ensuring your apps are inclusive has wide implications. It involves making sure that your app appeals to audiences of all different identities – of age, gender, ethnicity, ability, education, and so much more. It involves making sure all your app’s users are granted an equitable user experience. It involves executing proper customer validation and working with a representative team.

With all these moving parts, it can be tough to know where to start – but fear not!

You can start here, with accessibility, today.

The Case for Accessibility

Did you know that over 1 billion people currently experience some form of disability? This might come to you as a surprise, but the truth is that disabilities are much more prevalent than you might expect. As captured by the persona spectrum mentioned in the Microsoft Inclusive 101 design toolkit, disabilities can be permanent, temporary, or situational, and many times, they are not even visible.

The Persona Spectrum. Diagram shows examples of permanent, temporary, and situational disabilities.

Designing for accessibility, however, is not limited to people experiencing disabilities. As Rob Whitaker says in his book, Developing Inclusive Mobile Apps: Building Accessible Apps for iOS and Android:

Great accessibility shouldn’t be an obscure feature that only a small number of people use. At its best, accessibility should be a first-class citizen of the product or service you are creating and should benefit everyone.

In fact, whether you realize it or not, you likely benefit on the daily from many features that were initially designed for accessibility. Closed captioning on videos, the raise hand feature on Microsoft Teams, dark mode on devices, and dropped curbs on sidewalks and driveways are just a few examples.

On the flip side, when we fall short of designing for accessibility, we not only neglect the experiences of over 15% of the global population, but also lose out on a huge business opportunity and risk facing legal consequences.

Needless to say, in this growing digital age, making your apps accessible is one of the most important ways in which you can work towards developing more inclusive apps.

Approaching Accessible Apps

So how do you know if your app is accessible? Although it may not always be easy to tell how accessible an app is, realizing how inaccessible an app is can be a good start — so let’s start by taking a quick look at this app.

Screenshot of an ugly, inaccessible app sample

This app is literally hard to look at. But why is that? Among others, here’s a few things that stand out:

  • Poor choice of colors
    • This app employs a poor choice of colors. Not only does the gaudy bright red color cause eye strain, but the green text on red background is inaccessible to users with red-green color blindness, and the gray text on black background is inaccessible to users with various visual impairments as well.
    • In order to improve an app’s color palette, app developers and designers should make sure their colors of choice are accessible to all users. Tools like this color contrast checker can be especially helpful.
  • Small font size
    • The smaller text on this screen is illegible and therefore inaccessible to many users.
    • All text should meet minimum font size requirements, as outlined in official guidelines.
  • Lack of emphasis on point of interaction
    • The single point of interaction, a hyperlink, does not stand out on the page.
    • Interactive elements, like hyperlinks, should be easily discoverable.

Now that we’ve analyzed a few of the key issues with this sample, let’s see what happens if we take these pointers into account!

Screenshot of an improved app sample that is much more accessible

As you can see, making your apps more accessible can start with some remarkably simple steps that you may have already even taken yourself. Learn more about inclusive design and check out our documentation on Accessibility in Xamarin Apps to uncover more things you can look out for in your apps.

Assistive technologies

The world of accessible apps, however, goes beyond what we can see. On both web and mobile, supporting the screen reader and keyboard experiences have become particularly crucial.

In the example above, we would want to make sure that screen readers read all the text on the screen and inform the user that they can access the hyperlink to go to the website. Enabling the content to be heard and not just seen, screen readers are especially helpful to individuals with visual impairments. Similarly, apps should be fully accessible and navigable for users who are using a physical, external keyboard. Touch gestures and mouse events should not be necessary to your app experience, as those are exclusive of individuals with motor impairments.

As fellow app developers, we highly encourage you to familiarize yourself with these technologies if you haven’t already. Next time you run your app, activate the screen reader for the respective platform — for example, VoiceOver on iOS, TalkBack on Android, Narrator on Windows — and connect a Bluetooth keyboard to your device. Building empathy by understanding the assistive technologies your users use is key to developing accessible apps.

Accessibility standards

The road to achieving greater accessibility in our apps is one that never ends. However, the Web Content Accessibility Guidelines (WCAG) are a great place to start. It addresses screen reader and keyboard accessibility, and goes much beyond it as well. In fact, WCAG has become the global accessibility standard and legal benchmark for both web and mobile. At their core, the guidelines lay out the various ways in which apps can be made to be more perceivable, operable, understandable, and robust, for all.

A brief overview of the WCAG principles: perceivable, operable, understandable, robust.

At Microsoft, we also have our own set of accessibility standards, that not only incorporate, but also go beyond WCAG.

All standards aside, it is crucial that we continue to empathize with all our users and customers, and push for the best app experience for all. We must all constantly question how we can work to achieve more for accessibility, and continue our learning path by doing our due diligence, constantly testing for accessibility, consulting accessibility professionals, and engaging with our customers and users. This is exactly what we’ve been doing on the Xamarin team, and we’re excited to continue our own accessibility journey with you on Xamarin and .NET MAUI!

Looking Forward to .NET MAUI

If you haven’t heard yet, .NET MAUI is the next big thing, and among all the reasons you should be excited for it, accessibility is one of them! But first, let’s chat a bit about how you can develop inclusive apps with Xamarin today.

With the current version of Xamarin.Forms, you can apply all the wonderful inclusive design principles you’re familiar with to improve the accessibility of your app. You can customize a wide array of colors, sizes, and behaviors from your cross-platform code, or you can create custom renderers and effects to refine usage of native accessibility APIs. You can even take advantage of some basic accessibility APIs in Xamarin.Forms to improve the screen reader experience, which you can learn more about through my talk and demo as well as through this learning module!

Cover slide from Rachel Kang's talk on developing inclusive mobile apps

We are actively evolving our accessibility APIs and looking forward to offering you even more soon. If you can’t wait to further the accessibility of your apps, be sure to check out:

  • .NET MAUI Preview 3! Just released, Preview 3 includes the first set of basic accessibility APIs which you can start experimenting with today!
    • Check out the spec and pull request for a first glimpse at the all-new Semantics class and its first properties of Description, Hint, and HeadingLevel.
    • See how the new semantic properties are used in the .NET 6 mobile samples!
  • Our current explorations with new accessibility APIs that you can experiment with right now!
    • We’re excited to pull some of these tools into .NET MAUI to help you develop accessible apps more easily, and look forward to hearing your thoughts and ideas.
  • Initial ideas for screen ordering
    • There’s still a lot of ideating to be done here, and we’d love to get a better understanding for what you’d like to see.

Stay tuned for the next blog posts in this accessibility series, and in the meantime, please reach out to join our monthly accessibility calls, and as always, share with us all your thoughts in the comments, the .NET MAUI repo, Discord, and Twitter (@therachelkang)!

Author

Rachel Kang (SHE/HER)
Product Manager

1 comment

Discussion is closed. Login to edit/delete existing comments.

  • angcon armstrong

    thankss