The term accessible design is present for almost 20 years. The use of it, however, is a different story. The fact is that web accessibility 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 since 2015 and 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 Choose technology that supports design accessibility standards
Drupal development for example, support accessibility standards. Drupal is already a highly customisable CMS and empowered to design themes that support accessibility, which can save you time, effort and money. WordPress is another content management system that enables and supports web accessible design. PHP frameworks also ensure you can develop and design for web accessibility.
#2 Adapt the website structure accordingly
Is important to think about the website structure and with custom web development you do not only ensure web accessibility but also entirely meet the needs of internet users. 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 web accessibility. Comparing fonts is equally important so choose typeface and fonts that support accessibility on the web.
#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.
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 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.
#7 Test your colours for web accessibility
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 colour on your website has to be chosen wisely and with consideration.
You should aim for motivating and enjoyable colours but at the same time take into account a colour palette that meets different needs.
To reach users with colour blindness you have to ensure that your palette doesn’t make the website architecture and 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.
#8 Add clear CTA buttons that support accessibility in the web
To address the needs of visually impaired people, use a CTA button to enable easier navigation. However, use an indicator rather than just a colour 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 colour 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.
If this guide is not enough, you can also increase web 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 web 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 colours. Does it still make sense or are you relying on colour 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 Why we need accessible design. And if you are looking to find out how to prototype an idea, check out our blog.
