11 guidelines for better digital accessibility

Digital accessibility is about creating a digital environment (such as websites, apps, etc.) that is usable by as many people as possible. This is achieved by taking into account the diverse capabilities or situations of the users accessing this environment.

At Dropsolid we use an extensive accessibility checklist, consisting of guidelines to prevent problems in the areas of content, structure, design (UI) and development. This makes it easier to ultimately comply with the WCAG 2.2 AA standard.

In this blog you will learn more about the 11 guidelines for better digital accessibility: 

  1. Reading level
  2. Semantic HTML
  3. Tabnavigation
  4. Zoom
  5. Links
  6. Media
  7. Forms
  8. Contrast
  9. Animation and flashes of light
  10. Touch 
  11. Responsive design

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 of giant blocks of text.

  • Avoid impenetrable text by using short and active sentences.
  • Avoid complicated language. The essentials should be understandable without knowledge of nuclear physics (unless that is just what your website is about, of course).
  • Avoid old-fashioned language.

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). We often work with a CMS for our content, where fortunately a WYSIWYG editor automatically places the correct tags. But just as for SEO, there are things to watch out for. Here are some examples:

  • A link is represented by an 'a' tag and it should have descriptive text.
  • An image is represented by an 'img' tag and it should have alternative text.
  • Use headings consistently.
  • Use tables for data representation only.

3. Tabnavigation

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

  • Is each interactive element accessible?
  • Is the order as you expect? For example, if you're in the navigation, can you move through those items in a logical order, including the submenus?
  • Does this work on smaller screens? For example, can you get to the mobile menu and open it by pressing the Enter key?
  • Can you submit forms by clicking Enter when your focus is on the submit button?

Therefore, make sure that the active elements have a focus style so that the visitor can see what is active.

Pop-ups should be easily closed via the keyboard. Preferably, we do not see pop-ups that appear automatically, but only appear when your user clicks on something. The ubiquitous cookie pop-up is an exception, as it is necessary for the functionality of many websites (there are legal obligations around the use of cookies).

4. Zoom

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

5. Links

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

For text links, underlining is a well-known pattern. You need to pay attention to styles that can be confused with regular text. For example, giving a link a bright background color may make it look like highlighted text, or just putting a link in bold may make it look like bold text.

6. Media

Alternatives must be available for audiovisual materials:

  • For audio sources (e.g., a podcast or interview), provide a transcript.
  • For videos with sound, use subtitles.
  • For videos without sound, provide descriptive text.

Video or audio players should also be accessible, as should other UI elements. This means that buttons must be operable via keyboard and labels must be clear. A good example is the YouTube player. It may not be 100% perfect, but it is accessible via the keyboard and offers features such as closed captioning to display subtitles (when enabled).

7. Forms

Make it clear to your user what he is doing in the form:

  • Use focus styles to make clear which field the visitor is filling out.
  • If a field is required or has an error, make clear which field it is and how to fix it.

Help the user get through the forms:

  • Allow forms to autofill and allow text to be pasted into fields (e.g. passwords).
  • If you use sessions (e.g. online banking), also clearly show the user how much time is left and make it easy to extend the session (minimum 20 seconds and via a simple action).

8. Contrast

Higher contrast values help with various types of color blindness and blurred vision. You can easily measure contrast with numerous contrast checkers found online. Those values go along with the size of the text, for example, different values apply to text larger than 24px than to smaller text.

This also applies to the design of focus styles on interactive elements. For example, a colored border on a form entry field when the user is typing text should have enough contrast relative to the background and inside color of the field.

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.

For moving, scrolling or blinking elements, it is recommended that they’re animated for no longer than 5 seconds and that controls are provided for the user to turn them off.

Autoplay of audio or video is not recommended. If this cannot be avoided, it is also recommended here to provide controls that allow the user to turn them off.

10. Touch

Make sure all clickable elements, are large enough (minimum 24 by 24 px) to work with touch as well.

On a touch screen, 'click' and 'hover' behave the same. Make sure UI elements that have both click and hover functionality are also usable with touch. For example, if a menu item has a submenu that opens on hover, you could move that functionality to an arrow icon.

11. Responsive design

It almost goes without saying by now, but make sure that a design can clearly convey the information on different screen sizes but especially on small screens and devices. Also make sure that the necessary functionalities also work on those smaller sizes. It is not always enough to just make the browser window smaller, it is useful to test the site effectively on a smartphone:

  • Can you still zoom in?
  • Does the touch functionality work with the navigation?
  • Can you scroll through the page?

The smartphone is omnipresent and an important part of assistive devices for the blind or people with motor disabilities, for example, so don't miss out on this one.

We also convert the checklist into a PDF file, so you can easily check which aspects are still missing from your website and where improvements are possible.

Download the checklist

Stay up to date
Subscribe to our newsletter