[vc_row padding_top=”0px” padding_bottom=”20px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][custom_headline type=”left” level=”h2″ looks_like=”h4″ id=”” class=”” style=””]Boost your mobile app to a wider user base! [/custom_headline][vc_empty_space][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][text_output]When we talk about accessibility, we are talking about people who cannot take full advantage of modern technology if the technology doesn’t make sense to them or if it is hard for them to use. They may be people with visual impairment, cognitive impairment, motor impairment, or just people who are naturally aging.[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][image src=”11768″ alt=”” href=”” title=”” info_content=”” lightbox_caption=”” id=”” class=”” style=””][/vc_column_inner][/vc_row_inner][text_output]According to a survey conducted in 2020, “smartphone adoption is 86 percent among Americans aged 50 to 59 and 81 percent for those 60 to 69. Meanwhile, 62 percent of those 70 and older use smartphones”. Population data (till July 1, 2020) shows that among US residents, there are 41.99 million people aged between 50 to 59, 38.67 million people aged between 60 to 69, and 37.77 million people aged above 70. You can tell how many potential mobile app users there are. This is just an example of people who naturally age, to illustrate how valuable it is to make a mobile app accessible for them to use.
The Americans with Disabilities Act (ADA) requires all mobile apps to be accessible to the disabled without any discrimination. It is important to note that there are different standards for apps with different nature (e.g., commercial business vs. government) – It is certainly necessary and worthy to devote effort to design an accessible mobile app.
Keeping the following check points in mind will help you when designing and developing a mobile app to ensure its accessibility.[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”20px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output]
[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Color Contrast and Color Choice
[/text_output][/vc_column_inner][/vc_row_inner][text_output]Check the color contrast ratio of the foreground and background. You can simply use an online tool (e.g. https://webaim.org/resources/contrastchecker/) to test it to make sure that the ratio is above 4.0. Low color contrast ratio harms the readability of the content.
See below. The first one is an example of bad readability due to the low color contrast ratio while the second one is an example of proper readability due to the proper color contrast ratio.[/text_output][vc_single_image image=”11756″ img_size=”full”][text_output]
Bad Readability
[/text_output][vc_single_image image=”11754″ img_size=”full”][text_output]
Good Readability
[/text_output][text_output]Additionally, when choosing the color, avoid color combinations like red and green, which might be difficult for color blind people.[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”20px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Typography Choice
[/text_output][/vc_column_inner][/vc_row_inner][text_output]Use Sans Serif fonts for your app. They are much easier to read compared to the serif fonts since there is no decorative element. The commonly used sans serif fonts are for example, Helvetica, Arial, Open Sans, etc.
Below are examples of some common Serif fonts and Sans Serif fonts. You can see that the Serif fonts look more decorative which slow down your reading speed.
[/text_output][vc_row_inner padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_single_image image=”11755″ img_size=”full” style=”vc_box_border” css=”.vc_custom_1652916323333{border-radius: 1px !important;}”][text_output]
Serif Fonts
[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_single_image image=”11757″ img_size=”full” style=”vc_box_border”][text_output]
Sans Serif Fonts
[/text_output][/vc_column_inner][/vc_row_inner][text_output]Also, limit the number of fonts to one or two. Effectively use different weights of a single font to build visual hierarchy.[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”20px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Size of Interactive Area
[/text_output][/vc_column_inner][/vc_row_inner][text_output]On mobile apps, in order to avoid mistouching, the smallest interactive zone should be no less than 9 x 9mm. Set proper interactive zones for the interactive elements.
See the pink highlights below which indicate the interactive areas. Instead of only setting the down arrow as the interactive item, I suggest to set the whole white card as interactive, which allows easier tapping.
[/text_output][vc_single_image image=”11759″ img_size=”full”][text_output]
Small interactive area which is hard to tap
[/text_output][vc_single_image image=”11758″ img_size=”full”][text_output]
Proper interactive area
[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”20px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Dark Mode
[/text_output][/vc_column_inner][/vc_row_inner][text_output]For people who have cataracts (which is normal during aging), design a dark mode to better accommodate them since they perceive dark mode better. A few tips on designing the dark mode;
- Don’t use pure black (#000000) and white (#ffffff). Instead, use dark grey as background and semi-transparent white as foreground.
- Be aware of color contrast ratio of the dark grey and your branding color. Re-test the color contrast ratio and adjust. It is possible that the color works well in light mode but doesn’t work in dark mode.
Below are the light mode and dark mode for Google Map. It is necessary to switch between different mode for different light conditions.[/text_output][vc_row_inner padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_single_image image=”11760″ img_size=”full” css=”.vc_custom_1652897166776{border-radius: 1px !important;}”][text_output]
Light Mode
[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_single_image image=”11765″ img_size=”full”][text_output]
Dark Mode
[/text_output][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Don’t convey message by color only
[/text_output][/vc_column_inner][/vc_row_inner][text_output]Messages should be able to be perceived in other ways as well. For example, if you use a bar chart, don’t only rely on color to represent different variants. Instead, add some texture to the legend. In other cases, you can also add instruction texts, graphics, etc.
Even though, you can set the design to a grey scale and test if you are able to perceive all the information easily.[/text_output][vc_empty_space height=”20px”][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Organized Task Flow and Information Architecture
[/text_output][/vc_column_inner][/vc_row_inner][text_output]Design the task flow in a reasonable and logical fashion. You can also divide large tasks into small steps or display short paragraphs instead of big chunks of paragraphs.
Organized information architecture is easy to navigate and save people’s energy and time to look for certain things.
[/text_output][vc_empty_space height=”20px”][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
Description and Trait for UI Elements
[/text_output][/vc_column_inner][/vc_row_inner][text_output]When writing the code, be careful of the trait and alt-text for each UI element. Make sure all of them have accurate descriptions because screen readers extract what you write as the traits and alt-texts, and read them to people with visual impairment. These users rely heavily on the descriptions to navigate the app.
You can close your eyes and walk through the app with voiceover/screen readers to determine whether it is friendly to the disabled to complete certain tasks.
[/text_output][vc_empty_space height=”20px”][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/6″][text_output][/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”5/6″][text_output]
A Few Tools to Check Accessibility
[/text_output][/vc_column_inner][/vc_row_inner][text_output]Run your app with the following tools. These tools will generate a report and point out where it needs to be improved. They basically check the color contrast ratio, interactive area size and alt-text.
- Accessibility Inspector for iOS app
- Android Studio has its internal tool for Android app
- Accessibility Scanner for mobile app
[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/1″][vc_empty_space][text_output]Accessibility has usually been overlooked. It is much more cost-efficient and effort-saving to allocate resources to build accessibility at the beginning, than fixing accessibility issues after the app has been completed. An app with good accessibility will be exposed to more population than the one with poor accessibility. In addition, it will also create a better user experience and therefore encourage more installations.
You can reach out to our experts at Logic Solutions to help you with excellent accessibility to boost your mobile app to a wider audience![/text_output][/vc_column][/vc_row]
