Open this document in a markdown previewer and reveal its true form!
Greetings, explorer! You've entered an app where semantics and accessibility were overlooked.
Your task is to navigate through this digital landscape and concure critical issues.
You won't be alone on this quest, you have been teamed up with a fellow developer to tackle the challenges together!Don’t worry, the instruction below will guide you through every phase of the journey.
Good luck, and remember, every improvement you make brings the app closer to victory!
In your inventory you find two screen readers;
VoiceOver and TalkBack.
Choose the one that is available for your device as it will be needed throughout this workshop
When merging semantics, don’t panic! Stay cool, stay chill no need for dramatics.
With the screen reader, explore the home page with ease, Improve navigation — make browsing a breeze
We have detected areas where widgets should be merged into a single semantic node
You've been provided images to make the task at hand easier for you
Not all elements are critical for navigating. Some objects in this world bring no value to the mighty screen reader. They are but decorative relics, mere distractions in the grand quest for accessibility!
Let's go ahead and remove the images detected by screen readers from semantics
It is time to unlock the full power of your UI and grant your app the strength of clarity.
Use the properties well, for with great accessibility comes great user experience
Here is the widget that needs improvement
- See all, but see all what? Let's give our users a hint of what it revealed when clicking this button
- Let's go ahead and specify the action type
- Flutter guidelines recommend making interactive elements, such as buttons, at least 48x48.
Go ahead and apply this to this text button
- Lastly, You will give the entire balance card the explicit label 'Balance card'. But make sure that the children within are still detected by the screen readers
Brave explorer, the path ahead is tricky! Figure out a way to shield hidden widgets from screen readers
On the balance card, elements that are hidden on the screen are detected by the screen reader
Figure out how you can hinder semantics nodes from detection whilst they're hidden on the screen
You stand at the precipice of a great challenge: taming the semantic flow. The forces of accessibility and screen readers demand order, but your widgets are chaotic. To do so you must order the semantics nodes correctly. Now, go forth, Flutter warrior—bring order to the chaos
When arriving on the home page you will make sure that the title is being read my the screen reader focusing on the search bar
You have come a long way in your semantics journey and I salut you. However much semantics counts. We also have to take into consideration other factors such as color contracts, text scalors etc.
The app has been fortified with a powerful Accessibility tool, a tool designed to unveil hidden flaws lurking in the shadows.
Activate it in the main! No detail is too small. Inspect every corner, every button...
A hidden force lurks within every device — text scaling. It is controlled by the user’s sacred settings!
The challenge before you is clear: the app must be adaptive to honor these preferences
- Use the Accessibility tools package to increase the text scale factor to 2. If you find any overflow errors you should think of a way to correct them
-
Next you will go ahead and set the text scale range in the app to 0.8-1.9
You find a flutter news paper on the floor which contains an intersting article that might help you in this endevor https://medium.com/@pomis172/properly-handling-text-scaling-in-flutter-313fe717816c
Text fading into the background, buttons blending into oblivion! Many users, from those with visual impairments to those navigating in bright sunlight, struggle to see what lies before them
You must wield the power of strong color contrast to ensure that UI elements stand boldly against their backgrounds
We have covered a lot already but lastly let's make sure that our app is clearly readable
There are few tools that can check the contrast properly. There is the Accessibility scanner app for Android. So if you are in posession of one you are lucky !
We've made it easy for you... You should be able to detect the most important color contrast errors simply by using your eyes 👀
Run those tests, don not wait till it is late, Inclusive design makes your app first-rate!
We have already created a test file in the /test folder. Have a look at it, and find out what you can learn from running the test and fix it!
Explorer, you have journeyed far and wide, overcoming every accessibility challenge in your path.
You have mastered the tools, conquered the obstacles, and now, it is time to share your wisdom. Take what you have learned today and carry it forward, empower others and let's build inclusive experiences.