{"id":2061,"date":"2019-12-30T15:34:36","date_gmt":"2019-12-30T14:34:36","guid":{"rendered":"https:\/\/mobivery.com\/accessibility-app-20-tips-for-an-accessible-app\/"},"modified":"2025-02-26T13:40:04","modified_gmt":"2025-02-26T12:40:04","slug":"accessibility-app-20-tips-for-an-accessible-app","status":"publish","type":"post","link":"https:\/\/mobivery.com\/en\/accessibility-app-20-tips-for-an-accessible-app\/","title":{"rendered":"Accessibility App: 20 Tips For An Accessible App"},"content":{"rendered":"

The importance of accessibility<\/h2>\n

UX designers have the responsibility to design in order to users have a good experience while using our product. It means that we should analyze and consider their tastes, their needs, the context they will use the application, and also if there is something that can limit the access to our app, for instance their physical, visual, cognitive conditions. For this reason, today we are going to talk about accessibility a<\/strong>ccessibility app.<\/p>\n

Did you know that 8 % of men and 0.5 % of women are colorblind? This is almost a 10 % of colorblind users. If we add other types of disabilities such as vision, hearing or mobility related problems, we get a total of 25 % of the population. That is a high percentage! In addition, it is not only limited to these users, it extends to any person who experience any temporary or situational disability, for example, having an injured arm (temporary) or holding a baby (situational). In these cases, user can complete tasks with one single hand.<\/p>\n

So, as a designer we should keep this in mind so our product would be accepted by more users, but also as a human it is important to generate empathy and design for them too so these people can perform the same tasks with their conditions.<\/p>\n

This post is focuses on specific guidelines for designers that help to build an accessibility app.<\/p>\n

What is accessibility?<\/strong><\/h2>\n

Accessibility is the design of products for people with disabilities, \u201cquality of being easily accessible\u201d. In the context of mobile app it means that it can be used by users with different disabilities. To get an accessible app, it must be consider that it is a team effort. Each partner has a role to play to incorporate the best accessibility practices in their process.<\/p>\n

Let\u2019s see 20 tips to keep in mind while designing an accessible app.<\/strong><\/p>\n

All these points have been collected and selected from the Web Content Accessibility Guidelines (WCAG<\/a>):<\/p>\n

1. Contrast between background and text<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

The WCAG recommends that background and text should have a minimum contrast of 3.5 to 1. In this way, we help people with visual disabilities, including color blindness and cognitive disabilities to see the content of our application. In addition, we make it more visible on older devices (poor color support) and in poorly lit environments.<\/p>\n

Regardless of the color palette we use, if we apply this contrast rule, we make sure that, for example, a colorblind can read the text even if it is used one of its conflicting colors. Let\u2019s look at the following example to get an idea of \u200b\u200bhow colors would look with little contrast between them:<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

With this free tool online<\/a> you can check the contrast of the colors of your design.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

2. Readable texts<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

To facilitate the reading to users with sight or dyslexia problems, it is essential that copy fulfills the following requirements:<\/p>\n

\u2013 Typography with large sizes, between 14 and 18.<\/p>\n

\u2013 Line spacing should be at least 1.5 times the text size.<\/p>\n

\u2013 Space between letters (tracking) at least 0.12 times the font size.<\/p>\n

\u2013 Word spacing at least 0.16 times the text size.<\/p>\n

\u2013 Use of simple fonts, without ornaments. It is recommended to use the native system fonts (Roboto for Android and San Francisco for iOS). They are specifically adapted for good readability in devices.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

3. Indicate important copy with other graphic resources besides color<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

Like people with color blindness or other visual impairments cannot perceive certain colors, if important information such as hyperlinks or buttons are not indicated with any other visual resource than with color, they could not perceive that this text is clickable. Therefore it is recommended to add other indicators, for example:<\/p>\n

\u2013 Clickable texts with icons.<\/p>\n

\u2013 Links with underlined text.<\/p>\n

\u2013 Buttons with boxes.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

4. Text fields always labeled<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

All fields on a form must show their labels, whether empty or complete. Many times we see fields with their label as placeholder and, once the information is entered, it disappears. Labels help all users to understand what is requested and are essential for those who cannot easily determine this by looking at the form or the surrounding content.<\/p>\n

\n
\n
\"accessibility\"<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

5. Placeholders to clarify information<\/strong><\/h2>\n

If a text field is not very clear, use placeholders to provide additional information or show examples.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

6. Help texts for a better understanding<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

It helps all users to get instructions on how achieve the tasks. You should include these helpers in those fields that are complicated. This happens very often when we ask user to create a password fulfilling some specific requirements to be validated correctly.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

7. Buttons large enough to be clearly visible and easy to tap<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

These requirements are really useful for those users with motor disorders and visual problems:<\/p>\n

\u2013 The buttons must at least 44 pixels high and wide.<\/p>\n

\u2013 They must have an inactive area around them to avoid accidental selection.<\/p>\n

\u2013 Actions should be carried out only when the finger is lifted off the screen.<\/p>\n

\u2013 Differentiate well the actionable content of the static.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

8. Double confirmation when the user wants to achieve an important task<\/strong><\/h2>\n

When user performs an important task with high impact (for example, buying an item or deleting the profile) we will confirm with an alert if he\/she is sure to do it. Thus, if user has accidentally pressed the button, he has the chance to undo the action.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

9. Consistency in layout<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

Consistency between screens helps users to manage their expectations while interacting with the application. It makes easier to predict where they can find things on each page. Actually, this point benefits everyone, especially when people perform multiple tasks, are distracted or simply tired at the end of the day.<\/p>\n

Components with the same functionality should always work and be identified in the same to not create confusion. Also make sure that all the colors chosen are homogeneous and the typography too. The complex multilevel interface can be a big problem for people with disabilities, especially for those with vision disorders, cognitive and intellectual limitations. That is why it is important to keep a simple and consistent design.<\/p>\n

For example, if we have a toolbar, we will ensure that it always appears in the same area of \u200b\u200bthe screen.<\/p>\n

10. Present the most relevant information first<\/strong><\/h2>\n

It is essential to show the important information first (at first sight without scrolling). It allows user to access to the priority content with minimal interaction.<\/p>\n

An important tip, not just for accessibility, but also for usability, is that user has to achieve the task with minimum steps possible. Otherwise, user may feel disoriented and slowed in their tasks.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

11. Simple and clear copy<\/strong><\/h2>\n

Source WCAG<\/a><\/p>\n

To prevent users from feeling confused or do not understand our app, it is recommended to use a simple language. This is applicable in any copy that appears like buttons, notifications, error messages, instructions, etc. It is important to not use jargon or technicalities.In this previous post you can see some more info about how to define an effective copy for our app<\/a>.It is also recommended that the entire application be conveniently located to show user its specific language.<\/p>\n

\n
\n
\"accessibility<\/div>\n
<\/div>\n<\/figure>\n<\/div>\n

12. Use of headlines to organize the content<\/strong><\/h2>\n

Source WCAG<\/a>, SOURCE WCAG<\/a><\/p>\n

Not only to make the application accessible, but also to improve the experience of all users, presenting the content with headers or titles helps to understand the structure of the information and locate user where he\/she is at that precise moment.<\/p>\n

\n
\n
\n

This block contains unexpected or invalid content.<\/p>\n

\n