Inclusive Design: Making Websites Accessible to Everyone

PopArt Studio
Dec 20, 2018 · 9 min read
Image for post
Image for post

What would you do if you knew that 1 billion people cannot access your website? Even if they manage to visit it, they may not be able to navigate through nor to understand it, so it may appear to them as a completely useless web page. Would you be willing to change that?

When we say a billion people, we are not exaggerating. The World Bank statistics show that there really are 1 billion people with disabilities in the world, which makes 15% of the world’s population. Among them, there are 110–190 million people experiencing severe disabilities.

We all know that social inclusivity is an issue of empowering all the marginalized and discriminated people in society. It means giving a helping hand to everyone who is dealing with any kind of a physical or mental disability, by bringing up the awareness and making assistive technologies that may help them to be included into the community.

And what about web design inclusivity? Should the design area be different?

It should not.

So, let us dive deeper into this subject matter.

WHY IS INCLUSIVE DESIGN IMPORTANT

In other words, it means creating usable, functional and easy-to-use products that meet the needs of as many individuals as possible.

Instead of assuming a one-size-fits-all user experience, inclusive design aims to please a diverse range of individuals and accommodate a variety of experiences and ways of interacting with the world. While assistive devices aim to remove a barrier for people with disabilities, inclusive design strives to fundamentally redesign a product so that the barrier does not exist.

- Eone magazine

Fortunately, designers and developers have started to pay much more attention to this lately.

And yes, inclusive design and accessibility have become somewhat buzzwords in the design community. But it is not something that has been just invented recently.

For example, take the image alternative attribute Alt text. It is the box in the back-end of your CMS that you fill in with what you see on the image in order to make it more readable for search engines, as one of the SEO techniques for the image optimization. Right? Well, not really.

It is used for SEO optimization, that is correct. But do you know the first and foremost purpose of the image Alt text? It is used to textually describe non-textual content on a web page and make it readable for screen readers. Therefore, visually impaired users can easily know what is shown in the image. That is why Alt text should be more descriptive and not simply staffed with keywords.

So, adding Alt text to photos is one of the core principles of web accessibility.

WHAT IS WEB ACCESSIBILITY

Making a website, or an e-shop, or a web app accessible means that every web page is designed and coded in a way that makes it approachable, usable, understandable, and navigational to users with physical and mental disabilities of any kind.

As described by the Web Accessibility Initiative (WAI), many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. Making the web accessible is going to benefit individuals, businesses, and society.

Disabilities that affect access to the web include:

  • auditory
  • cognitive
  • neurological
  • physical
  • speech
  • visual

Besides that, web accessibility also benefits people with temporary or situational disabilities, such as:

  • people using small screens on mobile phones, smart watches, and other devices
  • people experiencing the change of abilities due to aging
  • people with temporary disabilities such as a broken leg, lost glasses, exposure to loud music
  • people with situational limitations such as too low or too bright light, or too noisy environment
  • people using a slow Internet connection or limited bandwidth

An overall review of accessibility principles is so powerfully represented in the sketch drawn by Krisztina Szerovay, UX designer and a founder of UX Knowledge Base Sketch.

Image for post
Image for post

Accessibility — UX Knowledge Base Sketch #76 / Sketch by Krisztina Szerovay

HOW TO MAKE YOUR DIGITAL PRODUCTS ACCESSIBLE TO EVERYONE

So, let us help you understand those guidelines and make the principles more digestible.

According to Web Content Accessibility Guidelines (WCAG) 2.0, there is a wide range of recommendations for making web content more accessible to people with disabilities, including low vision, hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these.

There are three levels of conformance to WCAG guidelines:

  1. A — basic accessibility requirements satisfied
  2. AA — medium-scale accessibility requirements satisfied
  3. AAA — high-volume accessibility requirements satisfied

USABLE STEPS FOR THE BASIC LEVEL OF ACCESSIBILITY

Keep your layout clear

Image for post
Image for post
Example of recommended page layout / Image source: Design Lab

Create understandable links

Design large buttons

Enable customizable text

Test keyboard navigation

Image for post
Image for post
Testing website keyboard navigation / Image source: UX Collective on Medium

Make a good color contrast

Do not overcrowd the screen

Image for post
Image for post
Example of design with too many elements on the screen, not recommended for web accessibility / Image source: Design Lab

Provide captions for video content

Make transcripts available for prerecorded audio

Image for post
Image for post
Always try to do more with your design until you create an excellent user experience / Photo by Carl Heyerdahl on Unsplash

TRY WALKING IN USER’S SHOES

Let us take a producer of headphones for example. He might say that auditory impaired or deaf people are certainly not in his target audience, and he might wonder why should he make his website accessible to them.

Or, a book publisher might think that dyslexic people have nothing to do with his business and simply neglect them as potential customers.

And the biggest irony might be if a producer of assistive devices for blind people does not make his website accessible for visually impaired individuals.

If you ever find yourself in such a situation, what should you do? Should you intervene and explain the importance of inclusive design to your clients? We believe you should.

And how could you show them what you mean?

First of all, you should run the accessibility test and see the website pain-points. For that purpose, you can use some of the online testing tools recommended by Jennifer Aldrich on the UX Magazine. Her list includes AChecker, Contrast Analyzer, Skala Preview, and Wave Web Accessibility Evaluation Tool.

Then, you can simply put your clients’ business website to be read by a screen reader. That kind of a live demo will make them experience first-hand the ups and downs in web accessibility. And that might change their mind.

If you want to experience it yourself, you can try the beta version of the Funkify, the new extension for Chrome that helps you see the web and use interfaces through the eyes of users with different abilities and disabilities.

Image for post
Image for post
Designing for accessibility means designing for a diverse audience with different abilities and needs / Image source: Salesforce UX on Medium

CONCLUSION

Inclusive design and web accessibility are so much more than buzzwords.

Designing for inclusivity and accessibility means that every digital solution that you create should provide a bespoke user experience to each and every user, no matter if they are permanently or temporarily disabled, or not disabled at all. Following these guidelines will also make your website more usable to users in general. It can boost your page visits, extend the time users stay with your website, make it easier for customers to purchase from your e-shop, and make your web pages much more SEO-friendly.

Everyone has the right to view, review, and interact with your online content. Do not take that right away.

Think about every aspect of web design and make your users happy.

This article is only a scratch on the surface of the accessibility subject matter, but we do hope that we managed to explain its significance and provide you with the usable steps for improving your websites and digital products by making them accessible to everyone.

We invite to share your thoughts, recommendations, and concerns with us by leaving a comment in the section below or by commenting on our Facebook page.

Originally published at www.popwebdesign.net on December 19, 2018.

NYC Design

A publication for designers of New York & design lovers from all around the world.

PopArt Studio

Written by

PopArt is a full-service digital agency which provides you with graphic & web design, development, and marketing solutions. https://www.PopWebDesign.net

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

PopArt Studio

Written by

PopArt is a full-service digital agency which provides you with graphic & web design, development, and marketing solutions. https://www.PopWebDesign.net

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store