Web Accessible Designs | Part I

As promised in my last post, here I shall be elaborating two out of five suggestions that will help us design better, that is, design better interfaces for all people irrespective of age, gender, location, educational qualification, disability etc. We call these web accessible designs.

Let’s do a quick recap:

Web accessible designs are meant to offer better usability for people of all demographics. There are over 60 guidelines for creating accessible designs. Basically, designs that follow these guidelines can solve problems that people face while interacting with a website or mobile application. The issues that web accessible designs can address can be categorized into the following:

• Visibility problem
• Hearing impairment
• Cognitive difficulties

• Nerve disorder
• Language or educational barriers
• Low bandwidth
• The case of new and infrequent users on the internet

In this article and the next, we will look at areas where we can improve web and mobile designs in order to make them more easily accessible to all.

Now, please note that web accessible design is a vast topic, and what I’m going to cover is a tiny part of it. Also, when I refer to visual impairment in this article, I’m excluding zero visibility, since there are other ways to help in this case.

So, are we ready to proceed?

Good.

---

1. Typography

Readability is one of the most important factors in any media, be it print or digital.

Here’s an important piece of information that probably all of us know but have never realized:

Users spend approximately 5.59 seconds looking at a website’s main content.

So, in less than 6 seconds a user decides whether to continue reading the content or close the tab and leave.

This data is based on the behavioural pattern of an average person. Now, imagine the scenario for a person with visual impairment. People with poor visibility will find it even more difficult to cope with the content if it’s not properly laid out.

Here are some more stats to consider:

According to 2018 reports from WHO, 1.3 billion people have some kind of vision impairment.

Sadly, there isn’t any current data stating what percentage of this population has access to the internet. The latest information available is from 2014, which says there were 285 million visually impaired people back then, and that 50% of them were active on Facebook.

Now that’s about Facebook alone, and the internet is as vast as the ocean. So, with the population rising, and with internet being more spread out, we can easily assume that today a minimum of 50% of the visually impaired population has access to the internet.

That’s a staggering 650 million people!

Now, let us assume that of these, at least 500 million people are probably interested in some aspect of your website or your service. If they aren’t able to read the content on your website, you are depriving and losing at least 500 million of your potential customers.

So, how to improve readability?

Avoid Thin And Light Coloured Fonts

Thin fonts may look aesthetically pleasing but are not prominent enough. So if one at all chooses to use them for aesthetic purposes, the text colour should be dark and the font size should be large enough to be clearly visible.

Try avoiding what the team at Felix IT’s did:

In case you’re thinking that the screenshot is of poor quality, let me make it clear that it’s not the screenshot, it’s the website that has used Montserrat font with text colour grey and on a light background, all while keeping the font size very small.

Please remember that the main purpose of a website or an application is its usability. The aesthetics are mere add-ons that first attract us towards the application and then guide through it.

Note:

According to the responsive website font size guidelines, the optimum font sizes for both mobile and desktop should be no less than 16px, though 18px is a better choice.

Avoid Highly Decorative Fonts

Another trend that’s pretty hot is poster-style web designs, which play with images or typography or both in a way that would have been done on a poster.

Here is a very simple example from Jack Knife Design:

Now, Jacknife Design is one of my personal favourites. I love the way they present the information with bold colours and typography. But, when I look at this particular screen from the viewpoint of a person with visibility problem or of someone with cognitive difficulty, then I find myself taking a lot of time to figure out even this small piece of text.

So, what are some examples of good, readable typography?

Eighty-Eight Designs

Eighty-Eight Designs does an awesome job of keeping the text clean and large. The images around them do the rest of the job.

Medium

Medium is my favourite source of some really good articles. Since it’s made for reading purposes, it makes sure that it offers the best readability. Medium’s mobile app has the option to increase the font size and also has a night mode for easy viewing.

These two examples brings me to the next recommendation.

Try Using Serif Fonts

The conventional motto is:

Serif is good for print,
Sans-serif is good for digital

Unfortunately, this isn’t very much applicable today. With the size of viewing devices getting smaller and with the volume of data increasing, digital media has become just as good as print.

So, we can say that the new mantra is:

Serif is good for print,
Serif is also good for digital

Now, if we rewind just a little, and go back to the examples of Eighty-Eight Design and Medium, we find that both the websites have used serif fonts on stark white background for their main content. And both the websites have remarkably good readability.

So, does good readability mean only serif fonts on white or black background?

Not necessarily.

Use Good Contrast Between Background and Text

Smashing Magazine does a fantastic job of presenting information on their homepage. It’s quite easy to read, and it’s sans-serif font on a bold red background!

So, you get the idea?

Basically, as long as the screen offers content that’s clear and large enough to read, and has a good contrast with the background, it’s good for all.

The Case of Colourblindness

Now, contrast is specially important for people with colorblindness. Remember that colour blind people won’t be able to distinguish between every colour clearly, and contrast is the only thing they rely on. Whatever you design, make sure it looks prominent in black and white just as well. Then it will surely work in case of colourblindness.

This brings me to another thing that I can’t help but mention, although it’s not a part of typography.

With minimalistic design rising fast on the popularity scale, we tend to abandon textual information as much as possible and make things intuitive. However, there are certain things that better remain the old way. Forms are one such thing.

While displaying errors in form fields, do not simply outline the error fields in red. Red outlines don’t translate well for colour blind people. It’s best to prompt clear error messages.

2. Icons and Imagery

Our brain apparently processes visual messages 60,000 times better than textual messages.

The internet is full of this piece of information but no matter how long you try, you can never track the original source! Well, I couldn’t.

Okay, let’s ignore the numbers. Let’s just stick to real-life instances. There’s no denying the fact that we are always – ever since we were kids – more attracted towards images and videos than we are towards chunks of text. Visual messages are much easier to grasp and retain than textual ones.

Now, here are some different types of stats:

17% of the world’s population is illiterate.

Sounds small, doesn’t it? So, how about this:

According to a 2017 report, only 20% of the global population speaks English.

If we look at it the other way round, approximately 80% of the world’s population does not speak English. Now that’s a large fragment.

With most applications and websites adopting English as the language of communication, a major share of people will – and already do – face problems in understanding the context.

The solution?

Translators ?

Translators are a blessing for all who prefer local languages over English. However, we all know how translators can sometimes be filled with weird translations and incorrect sequence of words, thus presenting an absolutely unwanted interpretation of the content.

To support translators and make up for these glitches, we can take the help of…

Images ?

Now, the language of visuals is (almost) universal. Of course, everything cannot be depicted through pictures but important sections, like the ones that drive decisions and call to actions, can be accompanied by appropriate visuals. Few recommended sections can be page names, search field, shopping cart, contact information and so on.

Using images as add-ons will not only aid those with difficulties in language but will also be very helpful for people with cognitive difficulties and those with visual impairments.

Note:

Stick to the universal symbols for different activities. Of course the style and theme should be your creativity, but introducing new symbols for a particular task will confuse many users, and is hence not recommended.

That’s all folks!

I’ll be including three more suggestions in the next article. Putting them all in one might be a little tiring to the brain. I have included the sources of the stats below.

Till then, take care and spread the love!

References:

https://conversionxl.com/blog/10-useful-findings-about-how-people-view-websites/
https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment
https://www.researchgate.net/publication/266655702_Visually_impaired_users_on_an_online_social_network
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
https://ourworldindata.org/literacy
https://www.babbel.com/en/magazine/how-many-people-speak-english-and-where-is-it-spoken/