7 simple tips to make your web application accessible

Vidushi Singh
Sep 4, 2018 · 4 min read
www.mantralabsglobal.com

Accessibility is a crucial step that you need to consider when doing design & development for your application. If you are wondering that why it is essential to make your app accessible then let us tell you that 15% of the population suffers from some sort of impediment or disability. Development companies need to create applications that are universally accessible to everyone, so that all the individuals irrespective of their abilities can make use of the technology.

Here are the seven ways on how you can make your application more accessible:

1.Captions and alternative texts:

Adding captions to videos is a great way to improve the accessibility of your application. It is helpful for people with hearing impairments and also makes your app usable in loud environments. Alternative texts for images and videos should also be considered to help users who are dependent on text-to-speech voice technology. Also, adding text to images let people know what a specific image implies if it is not visually understandable.

P.S: Images that carry instructions also called as the infographics are more liable for captions and alternative texts.

2. Descriptive links:

The links in your application should tell the user what they are for and where they are redirected. It is a great advantage for visually impaired individuals who can use their screen readers to scan for links and check it out in case it is useful. As in typical cases, the screen reader users do not analyze the links the same way as the rest of the page content. If your link reads “click here” then it doesn’t convey any information and looks rather drab and ineffective. You can make it more accurate by using the unique content at the start of the link description.

3. Form design with care:

Each time when you design your website form pages, all the form fields should be labeled appropriately. The screen reader users do not have the same intuitive ability as the normal-sighted users have so you should mark all the fields in your forms properly. For example, if there is a field for the name then it should explicitly say “Full name,” and if there are two fields, then each should mention the first name, last name for a more clear idea. If field grouping is possible, then it is even better as it helps to determine the flow of the form.

4. Use CSS in place of tables:

You should use tables in your layout only if it is essential. Screen readers do not comprehend the table content quickly, they tell the total number of rows and columns and then the table content. The data may or may not match with the order in which it is placed making the user confused. If using tables is inevitable then try to label all the cells, so the links between rows and columns can be established easily.

5. Dynamic content accessible:

Web development incorporates static as well as dynamic content. The dynamic content is the content that appears on the screen without refresh such as light-boxes, screen overlays, and popups. The screen readers may not be aware of it, and keyboard-only users may get stuck in page overlays. All these functions are taken care of with the use of ARIA roles and alerts. There are also front-end development frameworks that support accessibility.

The images in slideshows (if any) of your application should have alt text and should allow navigation through your keyboard.

6. Color chemistry:

Color blindness affects 8% of the total population with the most common being the red-green color deficiency. In mobile development, it is essential that these color combinations are avoided to make it accessible for color blind people. On the contrary, color is also crucial for people with learning disabilities. Developers should take care of both the groups and find a color scheme that doesn’t cause any conflicts and is usable for everyone.

7. Use appropriate headings:

Headings play a significant role in organizing the content and make it easy to navigate. Application developers should use the heading tags <h1><h2> carefully to enhance the accessibility and make it easier for the screen readers to understand. For example, Using <h1> only for the main heading and use the other heading tags to organize the content strategically.

The points mentioned above are essential to web development for making the application accessible to everyone. Technology is a boon to each of us, and everyone has the right to reap its benefits without any hassle.

Vidushi Singh

Written by

Blogger and DMM @Mantra_Labs, interested in #InsureTech, FinTech, #AI

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade