We're in an age where the internet is no longer a luxury, but instead a necessity. Because of this growing importance, web accessibility has turned into a matter of human rights.

Even for talented creators and designers with the best intentions, making a website that is fully usable for people of all walks of life can seem daunting. In reality, there are a bunch of sensible and straightforward ways to develop a website that meets the needs of all people.

Before we discuss how you can create accessible designs, let's discuss a little more about why accessibility is such an important topic.

The Growing Importance of Accessibility in Design

The world population is not getting any smaller, which means every single year more and more people will be needing the internet in some capacity. Of course, as the population grows, so too does the number of people who have some form of disability.

Here are some stats provided by Interactive Accessibility that should highlight just how pressing this topic is:

• Nearly 20 million people struggle with lifting and grasping, which can in turn affect interactions with keyboards and physical navigational tools.
• 8+ million people have a visual impairment, meaning monitors and visual queues can be an issue.
• 7+ million people have a hearing impairment, so audio and video will in these cases need assistance.

These few statistics alone shed light on just how many people can be affected by web accessibility, and why it has become such a critical part of developing the best possible experience.

So, when creating with accessibility in mind, the W3C says that these are the most common disabilities that affect access to the web:

• Auditory
• Cognitive
• Neurological
• Physical
• Speech
• Visual

Even though there are quite a few things to keep tabs on, ensuring accessibility for all users is not as complicated and time-consuming as it may seem. However, there's still one other thing that we should mention before you start making your creations accessible for everyone.

It's Not Just a Nice Thing to Do

We would be silly not to note that depending on what country you live in, having an accessible website isn't just a friendly thing to do for your users, but required by law.

The W3C Web Accessibility Initiative (or WAI for short) is one of the institutions that has created standards and policies that ensure fair and equal web accessibility, and a site where you can learn different types of accessibility requirements across the globe.

The mere fact that there are a network of governments working on making the web a place for everyone should tell you just how important creating accessible design is.

Making Your Own Accessible Design

Whether it's the law or your own desire to create the most accessible design possible, here are a few tips you can put into practice to ensure your design is inclusive to people with disabilities.

1. Add alt text to all your images

When you include an image on a website, there is something called an alt tag, which essentially is a small written description that goes into the HTML of a site. The reason alt text is so crucial for a website is that not everyone uses the web with their vision.

Many users who have visual impairment use a tool called screen readers that dictate what is on the screen. This includes the alt text descriptions of the images!

Adding alt text is usually straightforward and simple to do. Once you do find the field to fill in the alt text, there are a few things you should consider:

• Be descriptive and do your best to be specific when describing the image
• Be descriptive... but also be somewhat brief! Long alt text may not always be fully read by screen readers
• Use keywords, but don't jam them all in there (keyword stuffing)
• A cardinal sin in alt text is beginning with "Image of..." or "picture of...". Those don't fly too well so just avoid them

What's great about adding alt text to your images or customized illustrations is that you're not just making your design more accessible, but you're also improving the SEO of your project. Pretty slick, right?

To give you an example, check out this cool doodle below:

This scene, for example, could be described as five hand-illustrated doodle characters wearing brightly colored clothes in front a sign with a rainbow heart and a rainbow flag. Remember that the key is keeping it to the point, but still descriptive enough to paint a mental picture for your users.

2. Accessibility with icons

Icons are a great way to help with the navigation of your website or app. The key to making icons super-accessible is keeping them straightforward and consistent.

Take an eCommerce website as an example. If they are using a shopping cart as a checkout icon on the homepage, they will want to use the same shopping cart as the checkout icon on the shopping pages, blog pages, and all the other pages on the website.

Why is this necessary? Good question! The answer is partially to do with programs that are aimed at improving the accessibility of a website. Screen readers, for example, can lose function when icons are mixed and lack consistency.

Also, and probably more importantly, predictability eliminates frustration and confusion,  and consistent icons are a great way of instilling a more soothing user experience across your website for all users.

3. Color can be confusing

Visibility is a major factor when dealing with accessibility in design. This goes for a wide range of reasons, but one of the main disabilities that designers may encounter is colorblindness.

There are multiple types of colorblindness, and some forms are more severe than others. The important thing to take away from this is that all types of colorblindness can be a huge inconvenience when trying to use the web.

One trusted way to ensure visibility is by using colors with sharp contrast. Why? Because those with colorblindness will often have trouble distinguishing tones!

This is so crucial that the WCAG has a contrast standard that should always be used when it comes to text color and its background color. The standard for text should be at least a 4:5:1 contrast ratio to achieve an AA rating and a 7:1 contrast ratio to achieve an AAA rating.

Seems confusing? It's not! There are plenty of sites to ensure that you can achieve this AAA rating with your color palettes, like this one!

Lastly, you should be doing your very best to avoid these color pairings:

• Green-red
• Green-blue
• Green-brown
• Green-black
• Green-grey
• Blue-grey
• Light green-yellow
• Blue-purple

While some of these pairings may seem contrasty and a good choice for something like a CTA, those with colorblindness will see combinations that are in fact low in a contrast.

In the end, choosing colors correctly will help not only people with colorblindness use your website more easily, but also improve your metrics with stronger visual queues!

4. Animate with care

It should probably go without saying, but keeping users physically safe while browsing the internet should be the number one priority. That means that if you got the skills to animate your illustrations, then you'll need to avoid creating any sort of animation that can trigger a physical response, most notably seizures.

People who suffer from this type of disability are often triggered by animations that are designed with quick-moving patterns or repetitive flashing lights.

So when you do set out on the brave adventure to create UI and websites with animations or moving illustrations, it is important to create with care as well as creating with accessibility in mind.

Help Make the Web Accessible for Everyone!

The worldwide web is an immense and powerful tool, and everyone deserves to access it. That's why all of us who are creators have a responsibility to create with accessibility in mind so that everyone has the opportunity to enjoy the wonders of the internet equally.

Have questions about accessibility? Want to share some thoughts on how to make the web more inclusive? Tweet us! We'd love to hear your thoughts!