The term accessible design is present for almost 20 years. The use of it, however, is a different story.

The fact is that accessibility on the web is simply not yet so attractive for many, and accessible design not exclusive enough to be part of design and development. 

There are one billion people (15%) in the world that have some sort of disability. The number of people who experience significant disabilities is between 110-190 million.  

They all deserve to have the same access to the web like the rest of us do. 

Eventhough many websites are struggling to embrace accessibility to the fullest due to different technical or social barriers, there are ways to overcome these issues. 

The accessible design has been our approach to design for quite some time.

We want to share our knowledge with you and show you how easily one can implement and use the accessible design on the projects. 

Read on our quick guide to learn how to apply essential accessible design elements. This guide will help you ensure proper accessibility for your website or project. 

How can you increase web accessibility right away?

The accessible design considers presenting the information in multiple ways to cover the preference of the users and the disability.

There are many technical guides for web accessibility available today, including Web Content Accessibility Guidelines (WCAG). The WCAG documents explain thoroughly how to make web content more accessible to people with disabilities, how to include text, images or sounds. 

You can follow it but remember: “Accessible web design should not be viewed as a barrier to creativity, but a challenge to be more creative”. 

#1  Look over for the CMS that supports design accessibility standards

Drupal and WordPress, for example, support accessibility standards. 

Drupal is already a highly customizable CMS and empowered to design themes that support accessibility, which can save you time, effort and money.

#2 Adapt the website structure accordingly 

When you develop a website to ensure accessibility it is important to think about its structure. You will have to provide the flexibility for the user to change the text size easily or make modifications. 

Keep in mind that every component on the page has to communicate with screen readers and allow the user to listen to the page. Therefore, HTML tags should be functional and not only for style effects. You can find more details in the WCAG guide about how to code a website that supports accessibility. 

#3 Line your headings properly

Headings exist to make hierarchical order in the content and help you to understand the content better. The same goes for visually impaired people. 

For them, headings are important as they enable them to listen and understand your website with the help of a screen reader. Properly structured headings allow them to scan the site until they find the header that is most likely to have the information they are looking for. 

Source: WCAG

That is the reason why you should keep your heading tags consistent all over the site. Try also to maintain the same heading level on each page ( H1 to H4, rather H1 to H2) because skipping can confuse the screen reader software that these users depend on. 

#4 Caption your hyperlinks

We can scan the page to find what we need. We can see applied links, but those who are using screen readers need a little help. 

Still, they can easily scan the page as we do if you create an embedded text that clearly explains which information they will find once they click on a hyperlink. Therefore, you should write clearly what is on the link without adding ambiguous words such as “click here or “read more”. 

#5 Add transcripts and captions to your video and audio files

Captions in video files exist to provide usability and accessibility as they accommodate both a user’s preference and disabilities.

Having captions, for example, allow you to learn languages by watching the video and read instead of listening if you prefer that. Captions are also a preference for users in a noisy environment or for those who lack audio equipment. 

The convenience of adding a transcript to the video and audio files also covers preference and disability for those who prefer reading than watching or listening. That also works for hearing-impaired people. 

Plus, if you focus on readable captions and transcripts,  the simpler the language, the easier it will be to read for learning-impaired users.

#6 Add bullets and numbers for quick scanning 

Numbers and bullets enable us to quickly scan the content. We use it to break up large amounts of text into smaller paragraphs, or bullet points if possible.

For people with visual difficulties, proper text formatting and clear and concise text are essential as the screen reader uses it to navigate over the site and provide information. 

Source: WCAG

#7 Test your colors 

According to The World Health Organization (WHO), there are 217 million people who have moderate to severe vision impairment. This is the reason why the color on your website has to be chosen wisely and with consideration. 

You should aim for motivating and enjoyable colors but at the same time take into account a color palette that meets different needs. 

To reach users with color blindness you have to ensure that your palette doesn’t make the navigation difficult or content unreadable. It is also critical to consider the sufficient contrast between text and background as elderly people can’t see the text if the contrast is low.  

Source: WCAG

#8 Add clear CTA buttons

To address the needs of visually impaired people, use CTA buttons to enable easier navigation. However, use an indicator rather than just a color such as text labels or patterns. 

For example, if you want to add any kind of button on the screen, don’t rely just on colored text alone, add an icon or include a title to the message.

For color-blind persons “click the red button” isn’t helpful but “click the circular button” is. 

A great example of how to meet the needs of those who are color-blind is Trello’s colorblind mode. When turned on, labels become more accessible by adding texture. 

#9 Be thorough with Image Alternative Text

When you apply an image, always be thorough with the alt text. The text will make your content more inclusive. It should also engage more users with different visual difficulties. 

Do your best to always explain what is on the picture, which is essential for blind or color blind persons. Also, use descriptive ALT tags for icons, images, videos, and other media types as well so they could navigate the website easily with a screen reader.

Source: WCAG

If this guide is not enough, you can also increase accessibility by applying Universal Design principles:

  • Equitable Use – Design to accommodate users with diverse abilities 
  • Flexible Use – Accommodate right- and left-handedness
  • Simple, Intuitive Use – Use Simplify complex information. Use a proper information hierarchy, progressive disclosure and effective prompting towards task completion.
  • Perceptible Information – Use images + text to optimize readability 
  • Low Physical Effort – You can minimize repetitive actions.

See how inaccessible websites with bad navigation affect screen readers

 Test the accessibility yourself: 

  • Close your eyes. Use the screen reader and try to discover whether your information is easily available to someone who can’t see it. 
  • Turn off the colors. Does it still make sense or are you relying on color alone to provide information?
  • Turn off your audio. Does it have a captioned transcript communicating the audio?

If you are not sure, let your users test the accessibility.

In the end, if you are eager to discover more about accessible design and how you can implement it correctly, take a closer look at the article Accessibility On Websites – From Compliance To Business Benefits.