9 Web Accessibility Best Practices You Can Easily Apply

Over the last couple of years, accessibility standards finally started playing an increasingly important role in the world of software development.

For example, in 2019, the UK introduced new accessibility regulations, setting a legal duty for public sector bodies to make their websites accessible by the 23^rd of September 2020. In the US, the number and costs of federal accessibility lawsuits have risen significantly in the last decade. And, maybe most importantly, in 2019, the EU has introduced the European Accessibility Act – now seen as one of the leading pieces of legislation for digital accessibility.

Yet, as we’ve mentioned in our previous article on the topic, accessibility still has a long way to go. Unfortunately, 98% of websites are still not accessible.

However, you don’t have to be among these 98%!

If you didn’t invest yet in making your solutions accessible, I have some good news. Even if you’re not an accessibility expert to any extent, you can still assess your website from an accessibility point of view – and add basic accessibility best practices without much effort. In this article, I’m going to show you how to do it.

What is Accessibility – And Why is it Important?

If you don’t know what accessibility is, exactly, or are unsure if you should even bother investing in it, read our previous article in this series. It will not only help you to understand the ins and outs of accessibility best practices but also convince you that accessibility is beneficial to your business.

Not even to mention that it’s a human right.

9 Accessibility Best Practices Everybody Can Apply – Quickly and Easily

As we’ve mentioned in our first accessibility commentary, the need for accessible solutions is broader than one might intuitively think. Let me give you the following example.

Eyesight issues are becoming a growing global problem. In 2020, in the US only, approximately 12 million people 40 years and over have had vision impairments; moreover, 93 million adults are at high risk for serious vision loss.

This statistic perfectly depicts that accessibility is not only aimed at helping people with disabilities in a very colloquial understanding of this term. Accessibility is about helping all kinds of people who can’t interact with given certain digital solutions due to a variety of reasons.

So, let’s now look at the specifics.

Zooming text in up to 200%

There are a couple of adjustments you can make to help people with eyesight impairments. First, you can make sure that the text on your website is easy to read when zoomed in.

Every popular browser offers the option to zoom in on a website. If somebody has low vision, making the text bigger will ease reading. It’s up to you to make sure that the text can still be read after it’s twice as big; most importantly, you must make sure that no elements overlap.

Text Alignment and Contrast

Although text justification is a standard practice in the world of print, it should come nowhere near an accessible website. To make your text easier to read, you should align it to the left side. Ideally, the text should also be presented in narrow columns.

The Worlds Wide Web Consortium (W3C) standards committee explains this issue further:

Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified (aligned to both the left and the right margins).

What’s more, check if your text is easy to “see”. There’s nothing worse than grey letters on a white background.

Which means that each line (except the last) on your web page has the same length.

Ok, there is – white letters on a white background. But you know what I mean (hopefully!).

Link Height and Font Size

In Hollywood, script readers at large production companies review a couple of scripts each day. Already a long time ago, way before the digital revolution, more experienced screenwriters knew that it’s good to leave a solid space between lines of text. That way, the texts was (and still is) easier to read. As a result, the screenwriters could score a few bonus points early on.

Today, this rule hasn’t changed. Make sure that there’s a visible space between the lines of text.

Additionally, to make your website even more accessible, change the format size to 16px at least. When larger, it’s obviously easier to read.

Keyboard Navigation

Moving on from vision impairments – this next point is not only a good accessibility practice but also a matter of convenience for every internet user.

Enabling keyboard navigation is a must. The arrows should allow navigating in the given directions or between selected UI sections, while the tab key should enable accessing form inputs and links. That way, using a website is not only more comfortable but also possible for people with mobility impairments.

Visible Focus

Heavily linked to keyboard navigation, visible focus enables users to tell where they are on the page if they’re using a keyboard to move between UI sections. After all, even if the tab key would enable to navigate between page elements but wouldn’t highlight in any way what is currently happening, the option would be useless. Visibility focus should appear around links and form fields in form of easily recognizable borders as well as visible prompts on text fields.

Clear and Short Error Messages

Somewhat self-explanatory, this category enables users to easily understand what is happening on the web page if an error occurs. They should be concise and clear, providing simple instructions on how to solve the issue. Depending on the size of your website, this accessibility best practice might be the most difficult one from our list to implement quickly – but it still shouldn’t prove especially time-consuming. And if you’re not a master of writing short and clear messages, don’t worry – just visit this W3C accessibility user notifications tutorial to learn everything you need to know.

No Placeholders

Placeholders should never be used as an alternative to labels. A placeholder is a short hint intended to aid the user with data entry. However, it should never be relied upon to convey information. This is because valuable information put in placeholders is not always accessible. Most importantly, the contrast of placeholders is often different than that of the rest of the text on your website. For example, it can be dark grey on light grey. And, as we’ve already established, this is by no means easy to read.

Links are Underlined and Clear

It’s an SEO good practice to create hyperlinks that are self-explanatory. The hyperlink’s content should inform the reader where it’s going to take him. And Google loves it, promoting these types of links. Accessibility best practices have a similar preference. But, maybe even more importantly, they also suggest that a link should be easily distinguishable as such. Thanks to an underline, a user will be able to tell instantly that a given text is indeed a hyperlink.

Nothing Happens Automatically (or Can Be Stopped)

Finally, your website shouldn’t have any automatic playback, content scrolling, no automatic content change, and no auto-submit of forms. It’s not only irritating to all of us, but it’s also heavily obstructing for all kinds of users with impairments. Alternatively, if some things do (must) happen automatically, make sure they can be stopped at any point.

Summary

Accessibility awareness is growing. Simultaneously, accessibility legal regulations are also getting stronger in numbers and sophistication.   That’s why you shouldn’t sideline making you web solutions accessible. And with the 9 best practices described above, making your first accessibility steps shouldn’t be all too difficult – all you need is somebody who will optimize your website from a programming point of view if needed, and somebody who will rewrite your error messages. All these steps should be possible to achieve quickly and painlessly.   And if you’ve glanced through this article and concluded: “hey, but my website already has all of these features!”, then…   Congratulations! I wish everybody could say that!   Thank you for reading and good luck in your accessibility endeavours!