Accessibility Made Accessible - Gathering data using MediaQuery

Rommel Manuela Sakura
3 min readApr 19, 2024

--

Accessibility Made Accessible is a series of short articles that will discuss accessibility improvements you can make today for your Flutter apps.

Accessibility made accessible is a series of short articles that will talk about accessibility improvements you can make today for your Flutter apps.

Everyone in the business world is talking about data. It gives us clues what users might find interesting, tells us how our business is doing and is generally a good way of making decisions.

A decision within a company can be, how much time should be allocated for a specific topic to be worked on. One topic is accessibility and today I want to give you tools to gather some accessibility related data in your Flutter apps, to improve the user experience of everyone.

A way of getting useful device data is MediaQuery with its various properties.
This data, paired with a good analytics tool, gives you great data points to see where your app might be lacking accessibility features or it may help you prioritise what to work on first.

Screen Reader Navigation

MediaQuery.of(context).accessibleNavigation

With accessibleNavigation, you can find out if a user is using a screen reader or not. This code will give you a boolean which you can utilise.
While it can help in customising your user experience for users that use screen readers, it also gives you valuable information about your app.

If a lot of users drop off at a certain screen using accessibleNavigation, this may be because there is an issue with your accessibility implementation and you can start to investigate further.

While it is always the best idea to have real user tests, sometimes when working with a limited budget, it might make sense to utilize tools you already have included in your app.

Text Scaling

MediaQuery.of(context).textscalefactor

One of the most used accessibility features is text scaling. With this property you can check to which factor your user is scaling fonts and optimises on that factor.
This doesn’t mean you should not care about users scaling higher than that, you still have to handle those cases, but may have to accept that the UI doesn’t look optimal anymore.

Light and dark mode

MediaQuery.of(context).platformBrightness

Another well used accessibility feature is dark mode. While some people use it, because it suits their personal taste better, others use it for better readability and contrast.

When determining if dark mode is something you want to work on, you can check with MediaQuery.platformBrightness how many users use dark mode on their phones and send an analytics event to gather some data to check how you want to prioritise this feature.

Even little, short lines of code, can help you gather arguments to improve the accessibility of your app! This is a really low effort way of making one of the first steps in improving your app’s accessibility.

--

--