Design 7th - Sep - 2018

Designing for Accessibility

by RICHA SHARMA



Accessibility involves making it easier for the users with disabilities to access electronic information. As designers, one of our responsibilities include making sure that our product design is accessible to everyone. Users of all abilities must have a great experience while using the product.

According to statistics, 1 in every 5 person, has some kind of disability. This shows how important it is to make accessibility a major factor to consider while designing. Studies have presented that accessible website rank better in search engines, are more SEO friendly and encourage better designing and development practices.

Do not use color as a distinguishing factor in your design

It’s a common practice with designers to use colors as a distinguishing factor in their designs. But, not many know that people with lower vision or color blindness have a hard time understanding the message. When you are showing an Success message do not rely on just green colored text to convey that its a success message. Adding an icon to the message will add the necessary impact to the message.

Very commonly we will observe that very softly distinguishable colors are used in pie charts or graphs to convey some statistics. One practice to fix this is to make the graph in monochrome and see if it still has the same impact.

Use labels along with form fields

Nowadays it’s a common practice to give form labels within the fields. It may be tempting to go with the latest trends but this is certainly one of the biggest mistakes one can make when designing for accessibility. The reason why this trend picked up is because we feel that the web real estate will be saved this way. Upon clicking on the field the label disappears and the user may forget what they are actually writing. It is important to ensure that users do not lose context while filling up a form.

Use self explanatory icons and illustrations with contextual text

Using contextual text along with the icons and illustrations is actually a good practice to follow and people with low visibility will thank you for it. There are many visually impaired people who have to hear the website or the application in order to browse. You may also add the text within the “alt” tag. This will also serve a similar purpose.

Use correct styling for content

It is important to ascertain a hierarchy in the content shown to the users. The heading must look and feel like a start of a new section. Web reader navigate through the website according to the heading tags provided in the content. It is important to use proper HTML structural elements while developing the website

Add proper color contrast

While it’s tempting to use same color families in the designs but this one of the most overlooked practices in accessibility. The distinction between the text and background should be extremely prominent so it’s easier for all users to read. There are many apps available now to help you check the color contrast of your design.

 

Be Responsible. Keep Designing. Cheers!

Realted posts

Design 7th - Sep - 2018

Halloween Celebration at the Design Studio

Accessibility involves making it easier for the users with disabilities to access electronic information. As designers, one of our responsibilities include making sure that our pro

Design 7th - Sep - 2018

Future of Data-driven UX

Accessibility involves making it easier for the users with disabilities to access electronic information. As designers, one of our responsibilities include making sure that our pro

Design 7th - Sep - 2018

Interaction Design Talk & Workshop - A Let’s Design Event

Accessibility involves making it easier for the users with disabilities to access electronic information. As designers, one of our responsibilities include making sure that our pro

LETS START A DREAM PROJECT

SUCCESS IS JUST A STEP AHEAD LET’S START AND CONTINUE TOGETHER WE CAN MAKE A DIFFERENCE

designstudio@terralogic.com

#15, 4th C Cross, Industrial Layout, 5th Block,Koramangala, Bangalore, India 560034

ion-ios-arrow-thin-up - Ionicons Copy 4 Created with Sketch.