If you look at the world around you, you can see that all great designs are designed for the user in mind. Take a look at the way roads are so bicycle-friendly in Copenhagen or the way some apps are designed very intuitively—these are some examples of stellar design planning out there.
These great designs work because they consider the way in which their users’ interact with it.
It’s important to bear in mind that not everyone will interact with things the same way, especially when it comes to website design. Incorporating inclusive design will shed some light on the bias and assumptions you may have from your website. Ultimately, it will ensure that your users will not feel excluded.
If you’d like to find out more about building websites, our previous blog should do the trick. There are other resources like this guide from Digital.com to creating a website.
In this post, we’re going to dive into what inclusive website design means, its importance, and the simple steps you can take to make your website more accessible to a larger audience!
Inclusive design means designing websites, applications, browsers, tools, and every other digital product that people with disabilities can use. After all, people with disabilities should be able to perceive, understand, navigate, and interact with the web.
Essentially, inclusive design is all about creating usable, functional, and easy-to-use products that meet the needs of as many individuals as possible.
Thankfully, inclusive design and accessibility has come a long way since designers and developers have begun paying more attention to it.
If you have experience in building your website’s SEO, you’ll know that Alt texts are used for SEO optimization. However, did you know that its other purpose is to describe to users who might be visually impaired what is shown in the image. That’s why the standard practice for Alt text is to keep it descriptive and not simply stuffed it with keywords. This is one way of making your website’s contents accessible to all kinds of users.
According to the Web Accessibility Initiative (WAI), many sites and tools are developed with accessibility barriers that make it difficult or impossible for some people to use.
Keep this in mind because when your website is designed and coded properly, people with disabilities can use them too!
Some disabilities that affect access to the web include:
Other forms of disabilities include temporary or situational disabilities such as:
When your website is inclusive, it makes it easy for everyone to engage with it fully without feeling excluded. Basically, it translates to universal design.
This illustration by UX designer, Krisztina Szerovay, illustrates an overall view of accessibility and its principles according to Web Content Accessibility Guidelines (WCAG) 2.0 too!
Unless you’re taking a maximalist design approach, it’s best to keep your website layout clean and easy to navigate! Organize your information hierarchy in a clear visual layout to encourage users to navigate through your content.
When it comes to page elements, less is more. You want to avoid overcrowding the screen and distracting users from navigating around your website. The last thing you want is to overwhelm them and increase bounce rates of your site!
For people who have difficulties seeing, accessing, or interacting with digital content, they can use screen readers, which helps them read aloud what is on the screen. The technology allows them to navigate through websites and applications via speech output.
This is why it’s important to make sure that you use the correct heading structure for your website and individual pages. When used correctly, these headings (<h1>, <h2>, etc), help screen readers scan and interpret your content easily.
The best practice is to use <h1> for the primary title of the page and avoid using it for anything other than that. Try to avoid skipping heading levels, for example, jumping from <h1> to a <h4> as it will be interpreted as if there is content missing.
Visually impaired people might not be able to see the images on your post or page, but screen readers can. They read out the alt tags of images to the users. Alt tags, also known as “alt attributes” or “alt descriptions” are used to describe the appearance and function of an image on a page.
By using alt text, users are able to understand the context and message behind the use of that image on a page. So, always use alt text to describe your images, especially for informative images like infographics.
For example, if you are including an image of a conference you just hosted, put “[conference name]” in the alt text. This clearly describes the image to screen reader users who can’t see the picture.
When you include links in your content, you want to consider describing where the link will go. For example, using “click here” isn’t the most descriptive and it’s ineffective for a screen reader user to understand. Instead, using descriptive text will properly explain the context of links to them.
Take this as an example, “Click here to read about what we do.” Being more descriptive with your links can look like this instead: “To learn more about what we do, read About Us.”
The WCAG 2.0 guideline recommends that for information to be easily perceivable, it should be distinguishable. Ensure the text on your website is readable by using proper color contrast. You can make it easier for users to see content with the right use of color to separate foreground from background. If you want, there are tools such as WebAIM’s Contrast Checker tool to determine the contrast ratio of a foreground and background color combination. This way you’ll consider those with visual impairment such as color-blindness and avoid putting similar colors side-by-side.
Next up, when we consider users with mobility disabilities, they may not be able to use a mouse or trackpad. Thus, they’ll need to access content through the use of a keyboard by pressing “tab”, “spacebar”, “arrow” keys, or through the use of alternative input devices to navigate a page. That said, you should ensure that the tab order should match the visual order of things. This way, keyboard-only users are able to logically navigate through site content.
Long pages should be broken up with anchor links to allow users to skip to relevant portions of the page without having to scroll through other content, much like having a table of contents like our blog posts!
Imagine what it would be like to watch a video in a foreign language without subtitles. It’d be so hard to understand, right?
Similarly, for those experiencing hearing impairments, watching a video without subtitles will be difficult to comprehend. So, if you have videos on your website, it’s best to provide captions to accommodate this group of users.
Readability is a big part of inclusive design. If your website is truly inclusive of all sorts of Internet users, important web design elements such as call-to-action buttons should be eye-catching and effective.
If your button and text are too small, the chances of attracting and converting visitors are very low. You should design them to be large enough to be seen and clicked. Another thing you can consider is to make them clear, distinctive, and easily identifiable especially on small screens.
That’s right, with technologies like this Chrome browser extension–Funkify, you can view the web and use interfaces through the eyes of users with various abilities and disabilities.
You should also run an accessibility test to see your website pain points. Here are a few accessibility testing tools recommended by Jennifer Aldrich on the UX Magazine:
Everyone has the right to view and interact with your online content, regardless of their accessibility. That’s why it’s important to design your website to be inclusive to all kinds of users according to guidelines recommended by WCAG 2.0. Every design decision should contribute to providing the best user experience to each and every user, disabled or not. At the end of the day, universal web design benefits everybody–your customers, new visitors, and for your site’s SEO.
If you’re looking to explore ways to improve your website design to be more inclusive, get in touch with us! You can write to us at email@example.com, or drop us a message via our chatbot below! We look forward to working alongside you.
Medianetic Sdn Bhd
No. 59, 2nd Floor, Block E, Zenith Corporate Park, Jalan SS7/26 Kelana Jaya, 47301 Petaling Jaya, Selangor
+603 7960 3088 (Office)
Medianetic Sdn Bhd © 2023
Made by Medianetic
Sign up for interesting insights on digital marketing, creative design, social media, and more!