11 guidelines for better digital accessibility

Blog
Posted on
WCAG - digital accessibility

Last update 03/09/2023

You’ve probably heard of it already: the WCAG-guidelines or ‘Web Content Accessibility Guidelines’. What is this about? And do you have to keep this in mind while creating a website? 

You obviously want your website to be as accessible as possible. But what exactly does that mean? What are the minimum requirements and who can help you with this? We'll clear that up for you!

What is digital accessibility?

Digital accessibility is all about building a digital environment (websites, apps…) that is usable by as many people as possible. We do this by taking into account the different capabilities or circumstances of the people who may have access to that environment.

What is "WCAG" and what does it have to do with digital accessibility? WCAG, or Web Content Accessibility Guidelines, is a set of guidelines, created by the World Wide Web Consortium (W3C), that defines and documents international standards for the Internet. In short, the WCAG is a guide to creating accessible websites (or apps). It is a widely used and even international standard. There are several versions and degrees, but the most widely used is currently WCAG 2.1 AA. An update to WCAG 2.2 was released on October 5th 2023 (after significant delay).

The importance of digital accessibility

Unless your website belongs to a certain sector (such as a government website), you are not legally obliged to take accessibility into consideration. Nevertheless, we recommend you to take it into account because you will benefit from it for yourself and your visitors. 

WCAG - digitale toegankelijkheid

The advantages of good digital accessibility

The bigger picture

Accessibility improvements also offer benefits to people without (permanent) disabilities. Consider, for example, voice recognition in a cell phone. This has been an important part of assistive technology for the blind and visually impaired for years. It is also widespread through integrations with digital assistants such as Google Home, Alexa, Siri... with which we control our devices hands-free. For example, think about using a GPS while being able to keep your eyes on the road and your hands on the wheel.

The more inclusive your website, the more visitors

If we know that 8% of the Belgian population between 15 and 64 years of age are seriously hindered in their daily activities by a disability or long-term health problems (Statbel survey, 2020) and 81% of them regularly use the Internet, we can speak of a large group of potential visitors.

Together we make the world a better place.

During the Corona crisis, we saw an unprecedented rise in online shopping. Partly due to necessity, but we also see that the use of digital products can contribute to a degree of independence. Not being able to do something yourself and being dependent on third parties is a major stress factor that has an impact on, for example, people with a motor disability, but also on their environment. Improvements in the use of online tools (such as online shopping, information search, ...) reduce that stress and make life a lot easier.

Improved SEO

Several factors that contribute to accessibility also contribute to better SEO. Thus, a website that has good accessibility will also have a positive impact on SEO.

How to address digital accessibility?

What is not always considered is the broad spectrum of disabilities and obstacles that make it difficult to use a website online. When we think of "Accessibility Issues," we may think mostly of the extreme end of that spectrum and how blind and visually impaired people must interact with our websites. It is just as much about people who are hard of hearing (people who, for example, deal with auditory information in videos), people with a reading disorder (6% of adult Flemings), low literacy (14% of adult Flemings) or even situational limitations (for example, a slow or poor mobile Internet connection, just when you need the train or bus service).

In short, there are many things to consider when looking at digital accessibility, but the importance to your visitors is enormous. And you will benefit too.

The good news is that many tools already exist to facilitate online navigation (text readers, accessibility settings in devices...). 90% of what still needs to be done to your website is to apply solid standards so that those tools work properly. Because this often has an impact on the construction of a new website, we recommend you keeping this in mind from the start. 

The remaining 10% is mostly finding solutions to situations and patterns that are somewhat out of the norm or have rarely been questioned in the past. Consider, for example, the ever-present JavaScript date picker. This component opens a small calendar when you click on a date field. You navigate through years and months using arrows to finally click a day. This looks nice and is useful when working with a mouse but we often notice problems when navigating via the keyboard, which is the basic tool for accessible navigation. Fortunately, there are solutions or alternatives available.

Digital accessibility checklist

At Dropsolid, we use an accessibility checklist: guidelines that should prevent problems in terms of content, structure, design (UI), and development. These make it easier to ultimately comply with the WCAG 2.1 AA and WCAG 2.2 AA. The list below makes it clear that accessibility is a shared responsibility. A website can only be optimally accessible if all aspects are fulfilled, so everyone who contributes (including those who create content) works on this. 

Here are some basic guidelines to get you started:

SVG

1. Reading level

Make sure the text matches the reading level of your audience. This means not only taking into account language ability but also the fact that many people drop out when seeing giant blocks of text.

SVG

4. Zoom

Make sure your visitor can zoom up to 200% without losing any functionality (e.g. navigation) or information. Remember that this also applies to small screens (such as a smartphone).

SVG

7. Forms

Help the user by making it clear where in the form they are engaged. That includes using focus styles to make it clear which field the visitor is filling out. Also make it obvious when a field is required, where an error happens when filling it out... and how your user can fix it.

SVG

10. Touch

Make sure all clickable elements, are large enough (minimum 24 by 24 px) to work with touch as well
(this is a WCAG 2.2 specific criterium)

SVG

2. Semantic HTML

Use the right HTML for the right function. This ensures that screen readers can find the navigation and content and other tools can use it (including keyboard navigation).

SVG

5. Links

Links should be clearly distinguishable. So make sure you use a color that contrasts with the surrounding text and background.

SVG

8. Contrast

A higher contrast helps with various types of color blindness and blurred vision. It can be easily measured with numerous contrast checkers found online.

SVG

11. Responsive design

By now it almost goes without saying, but make sure a design can clearly conveys the information on different screen sizes but especially on small screens and devices.

SVG

3. Tabnavigation

A website should not only be usable via your mouse (or touch). It must be possible to navigate through the site in a clear and smooth way, using the tab key and using the Enter key, arrows... to control elements such as links and forms.

SVG

6. Media

For audiovisual material, alternatives should be available. Make sure to give a podcast or interview a transcript, a video you give subtitles, and a descriptive text.

SVG

9. Animation and flashes of light

Be careful with flashes of light, they can cause seizures. So avoid flashes that last longer than 3 seconds or limit them to a very small area. This tool helps you measure this.

We also converted the checklist into an extended version in the form of a PDF, so you can easily check which points your website does not yet meet and where you can still add improvements.

Validation en certification of digital accessibility

Using only the guidelines above will not necessarily result in a fully accessible website, but it is a good starting point. Finally, the result should be validated by comparing it to the appropriate version of WCAG. At Dropsolid, we do a comprehensive audit of your website, using our accessibility knowledge and automated test suites like Axe. When we validate or audit a site, the check is always done by someone who has been trained in accessibility (e.g. AnySurfer).

It is important to note that test suites are not a comprehensive solution, therefore manual checks are necessary. Context is important when applying the guidelines and an automated system cannot (yet) estimate this. So certain expertise is required to apply the rules correctly and to set the right priorities.

If you want to go a step further, it is possible to have audits and reports prepared by individuals who have received specialized training, for example through the IAAP (International Association of Accessibility Professionals). A site that is tested by them (and passes) will then receive a certificate.

In Belgium, there are a number of organizations that have these kinds of professionals, the best known being Eleven Ways and AnySurfer. For example, if someone from AnySurfer positively evaluates your website, you can put a label in the footer of your site that lets everyone know that your site was tested by them. This is not a must to be accessible, but an external validation sometimes provides extra confidence.
 

Conclusion about digital accessibility

No one can take all the aspects around the accessibility of a website into account 100% of the time. Especially when it comes together with time and budget. Fortunately, we can do a lot of things right such as:

  • Using the WCAG guidelines as a tool.
  • Prioritize and address issues that have the greatest impact.
  • Include these priorities and guidelines in the (construction) process from the beginning.
  • Evaluating your results.

How inclusive is your website?

Open up your digital platforms to everyone. By enhancing digital accessibility, you cater to a broader audience and showcase a commitment to inclusivity. Let's gauge the potential benefits of this endeavor for your business.