11 guidelines for better digital accessibility
Digital accessibility is about creating a digital environment (such as websites, apps, etc.) that can be used by as many people as possible. You achieve this by taking into account the diverse abilities or situations of the users who access this environment.
At Dropsolid, we use an extensive accessibility checklist, made up of guidelines that should prevent problems in terms of content, structure, design (UI) and development. This makes it easier to eventually meet the WCAG 2.2 AA standard.
In this blog, you'll learn more about the 11 guidelines for better digital accessibility:
1. Reading level
Make sure the text matches the reading level of your audience. This means not only taking language proficiency into account, but also the fact that many people drop off at gigantic blocks of text.
- Avoid impenetrable text by using short and active sentences.
- Avoid complicated language. The essence must be understandable without knowledge of nuclear physics (unless that is exactly 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 that other assistive tools can use them (including keyboard navigation). We often work with a CMS for our content, where a WYSIWYG editor fortunately places the right tags automatically. But just like for SEO, there are things to pay attention to. Here are some examples:
- A link is represented by an ‘a’ tag and should have descriptive text.
- An image is represented by an ‘img’ tag and should get an alternative text.
- Use headings consistently.
- Only use tables to display data.
3. Tab navigation
A website should not only be usable with a mouse (or touch). It must be possible to navigate through the site clearly and smoothly with the Tab key, and to operate elements such as links and forms with the Enter key, arrow keys and so on:
- Can every interactive element be reached?
- Is the order what you would expect? For example, when you are in the navigation, can you go through the items in a logical order, including the submenus?
- Does this also work on smaller screens? For example, can you get to the mobile menu and open it with the Enter key?
- Can you submit forms by pressing Enter when the focus is on the submit button?
Also make sure that active elements have a focus style, so visitors can see what is active.
Pop-ups must be easy to close with the keyboard. Ideally, pop-ups don't appear automatically, but only when your user clicks on something. The ubiquitous cookie pop-up is an exception, because it is needed for the functionality of many websites (there are legal obligations around the use of cookies).
4. Zoom
Make sure your user can zoom in to 200% without losing functionality (for example navigation) or information. Remember that this also applies to small screens (such as a smartphone).
5. Links
Links must be clearly distinguishable. So use a colour that contrasts with the surrounding text and background.
For text links, underlining is a familiar pattern. You can hardly go wrong with it, because it is well established. You do have to pay attention to styles that can be confused with regular text. For example, giving a link a bright background colour can make it look like highlighted text, and only making a link bold can make it look like bold text.
6. Media
Alternatives must be available for audiovisual material:
- For audio sources (for example a podcast or interview), provide a transcript.
- For videos with sound, use subtitles.
- For videos without sound, provide a descriptive text.
Video or audio players must also be accessible, just like other UI elements. This also means that the buttons must be operable with the keyboard and the 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 show subtitles (when enabled).
7. Forms
Make it clear to your user where they are in the form:
- Use focus styles to make clear which field the visitor is filling in.
- If a field is required or contains an error, make it clear which field it is and how to fix it.
Help the user get through the forms:
- Allow forms to use autofill and allow pasting text into fields (for example passwords).
- If you use sessions (for example online banking), clearly show the user how much time is left and make it easy to extend the session (at least 20 seconds and with a simple action).
8. Contrast
Higher contrast values help with different types of colour blindness and blurred vision. You can easily measure contrast with the many contrast checkers you can find online. Those values depend on the size of the text: 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 coloured border on a form input field while the user is typing must have enough contrast with the background and the inner colour of the field.
9. Animation and flashes
Be careful with flashes, as they can cause epileptic seizures. So avoid flashes that last longer than 3 seconds, or limit them to a very small area.
For moving, scrolling or blinking elements, it is recommended not to animate for longer than 5 seconds and to provide controls that allow the user to switch them off.
Autoplay of audio or video is discouraged. Where it cannot be avoided, it is also recommended to provide controls that allow the user to switch it off.
10. Touch
Make sure all clickable elements are large enough (at least 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, but make sure a design can clearly convey the information on different screen sizes, and especially on small screens and devices. Also make sure the necessary functionality works on those smaller formats. It is not always enough to just make the browser window smaller; it is useful to actually test the site 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 ubiquitous and an important part of the assistive tools of, for example, blind people or people with a motor disability, so don't overlook it.
