Categories
Accessibility

Tips for Designing Website with Accessibility

View the original post

15 Easy Tips that Helps You in Designing for Accessibility.

Accessibility is one of the things that designers always keep in mind while designing the user interface either for the web or for apps. In this article, I'll teach you some of the tips that help you in designing for the web particularly.

Website is available widely, because of their wide availability the user prefer to use them on desktop, laptop, mobile even. Making website available for differently-abled people helps the world to be better.

This is not only about visually disabled people, this is also about us. One day we also grow old and our vision will be not as good as today and doing this just for the people like we might become help.

I hope you now know the importance of making the website more accessible just for helping people. This is our job and this article will help you in doing the job in a better way so let’s start.

1. Use Contrasting Colors

The first and the most important step while designing an interface for visually disabled people is to make the color contrasting. the color we see might be totally different if a visually disabled person sees it.

For this point, I like to share some of the tools that I personally love to use especially for making the color contrast top-notch.

Stark: The suite of integrated accessibility tools for your product design and development team

and there is an awesome article I found on the internet about color accessibility tools, I hope you’ll love to read the whole list of tools there.

Color accessibility: tools and resources to help you design inclusive products by Stéphanie Walter – UX Researcher & Designer.

Add Alt Text

Alt-text is the most important thing to be done especially for visually disabled people. Basically, Alt Text is the attribute inside the image tag that helps you to define the image in the textual form which might be read by an AI software reader for the person who can’t read the text.

Use Short and Clean Headings

using a short and clear heading helps not only disabled people because this is the most important rule while writing the headings. I don’t want to teach you the writing skills, but I put this because I saw that myself.

Add Labels to Form Field

Adding labels on the side of the field helps users to easily guess what they have to enter inside the field. If you remove the labels from the front of the field it’ll make the whole thing more complex as it would be difficult to guess what the field actually wants.

Avoid Tiny Fonts

Small text is not the thing designers actually wanted but it happens while making the website for mobiles and other devices. If you’re a designer than make sure that you will not make that mistake.

Respect White Space

Whitespace is the key feature to make your content easy to visualize, making the button too close can promote the mistake which makes the website experience bad and eventually the accessibility.

Keep Your Content Simple

People hate complex things especially if they have visual difficulty, so that make your content simple which not only helps the user but also helps your audience. try to make the image big, text easy to see, etc.

Add Keyboard Support

Have you ever use the command(+) to zoom instead of going for the zoom button, if yes then you have to make your website keyboard supportive. The shortcuts that users can use, the up and down things that can be performed by using the button. Doing this will helps a lot.

Make It Responsive

This might be late, but making your website responsive is the most important and useful thing that you can ever do. This not only wider your audience but also helps in making your website more accessible.

Use Real Text rather than Text on Image

Don’t do this mistake, Text takes less time to load rather than a 1MB image. So keep this thing in mind and never use images with text in them. Instead, you can use CSS to make the text look much bigger.

Mention Required Fields

The required field should be mentioned, you can write the required keyword or you can put a dot there for making the user focus on the required fields. Sometimes we have to make the password and id field required and this tip will be accessible there.

Give Links Unique and Distinctive Names

While making the links take care you add the name/label attribute to it. The labels are important, but not only this the text you label with also matters. You don’t have to write a click-me label for your contact page instead write the contact us label to it.

Structure Your Content Wisely

The structure is essential for making your design accessible the important thing in your design should be on the top which makes your website good-looking and easy to be used by the users.

Provide Video if Possible

We do not always design for visually disabled people, but also for the hadycap people as well as people with hearing difficulty. So for them, you can embed your video with subtitles this will really help your audience understanding the concept easily, and it also helps in more social views.

Use ARIA if Required

ARIA or Accessible Rich Internet Applications is the collection of some attributes that you can add into your HTML existent code with some javascript that helps in better accessibility of the website.

Wanted to read more about this particular subject read the article below.

ARIA – Accessibility | MDN

thanks a lot for reading the article. I write this to help you in designing a website with more accessibility. if I missed something out or you wanted to point out my mistake above feel free to share your response below.

Always ready to learn something new. Thanks.


Tips for Designing Website with Accessibility was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.