Design

The design of a webpage is essential for accessibility. A lot of information is conveyed with colour, shape and location, but not all visitors can properly perceive the design. So make sure there is enough contrast, but also that there are other ways available to convey the same information.

By paying attention to these important points, you make sure that the design of your website is accessible as well.

  • The text colour should have enough contrast with its background. This way, the text is easily readable for all visitors. Text must have a minimum contrast ratio of:

    • 4.5:1 for the text smaller than 24px or 19px bold.
    • 3:1 for the text larger than 24px or 19px bold.

    These contrast requirements also apply to text on images.

    Note: These contrast ratios should not be rounded up. The contrast ratio between the hexadecimal colour codes #777777 (gray) and #FFFFFF (white) is 4.47:1. So this is not enough.

    A contrast checker can be used to calculate a contrast ratio. For example, the contrast checker on the website of WebAIM or the Colour Contrast Analyser (software) of The Paciello Group.

    There are a few exceptions for text contrast such as logos, decorative text, and elements that are inactive.

  • The focus indicator must be clearly visible. The focus indicator shows which part has the keyboard focus. So this is important for everyone who navigates with the keyboard. It is often represented by a visible border around an element.

    Each browser has a default focus indicator, but its style features can also be customized. If the style features are adjusted, make sure there is enough contrast between the colour of the focus indicator and the colour of the background. The focus indicator must have a contrast ratio of at least 3:1.

    A contrast checker can be used to calculate a contrast ratio. For example, the contrast checker on the website of WebAIM or the Colour Contrast Analyser (software) of The Paciello Group.

  • Colour can be used to accentuate or distinguish between different parts of content. For example, it can be used for a warning message on a page, or to distinguish between several lines in a chart. Efficient as it may be, it should not be used as the sole means of conveying information, indicating an action, provoking a response or distinguishing a visual element. Information that is only conveyed with color cannot be perceived (or not properly) by visitors who are color blind or visually impaired.

    Also provide other ways like: text, text styles, icons, or patterns. For example, don’t just use a green or red dot, but a green check mark and a red cross. Or use not only a different color per line in a graph, but also place an icon on the line and provide a legend.

  • Navigation menus and items that appear on multiple web pages must be placed in the same order on each page. Make sure that this order is also the same in the design and in the code.

    A consistent navigation and page structure make it easier for everyone to navigate the website and to find information on a page. Visitors who use screen readers can also find their way faster and more efficiently.

  • Make sure that components that have the same functionality are named the same throughout the website. This makes it easier for visitors to find the repeating parts. This concerns, for example:

    • texts on buttons;
    • labels of the input field;
    • link texts;
    • alternative texts of icons that have the same functionality.

    By naming components in a consistent way, visitors who use screen readers can find their way faster and more efficiently.

    Example:
    The text on the button next to a search field is ‘search’ on all pages, and not ‘find’ on some pages.

Heb je nog vragen?

Wil je weten hoe jouw website ervoor staat met betrekking tot digitale toegankelijkheid? Of heb je vragen over onze dienstverlening?

Neem contact op

Vergroot je bereik

Digitale toegankelijkheid vergroot de gebruiksvriendelijkheid, vindbaarheid en compatibiliteit.

Succescriteria

  • Principle 1. Perceivable
    • Guideline 1.4 Distinguishable
      • 1.4.1 Use of Color
      • 1.4.3 Contrast (minimum)
      • 1.4.11 Non-text Contrast
  • Principle 2. Operable
    • Guideline 2.4 Navigable
      • 2.4.7 Focus Visible
  • Principle 3. Understandable
    • Guideline 3.2 Predictable
      • 3.2.3 Consistent Navigation
      • 3.2.4 Consistent Identification

Theme

Design

The design of a webpage is essential for accessibility. A lot of information is conveyed with colour, shape and location, but not all visitors can properly perceive the design. So make sure there is enough contrast, but also that there are other ways available to convey the same information. By paying attention to these important points, you make sure that the design of your website is accessible as well.

Forms

Forms can be made accessible using a combination of technology, design and text. A form which is properly built in the code, can be operated with the keyboard. An accessible form provides the visitors with a suggestion on how to solve an input error. It also allows the visitors who use assistive technology to complete the form correctly. A form can consist of various form fields:

  • input fields
  • checkboxes
  • comboboxes
  • radiobuttons
  • etc.

Images

The content of a website which does not consist of text, such as photos, icons and other images, can be made accessible by making them available as text as well. This is because text can be presented in various ways by assistive technologies. Reading software can convert a text to speech (auditory) and a braille display can translate it to braille (tactile). This way images are also accessible to visitors who cannot see the image. The content of a text alternative depends on the context of the image. The same image in a different situation can need a different text alternative.

Media

Media files make it possible for the information to be transferred quickly and easily. To make them accessible to everyone, it must be ensured that visitors can experience films and sound fragments with the senses available to them. Visitors who are deaf or hard of hearing cannot hear (clearly) what is being said in a sound fragment. Visitors who are blind or visually impaired cannot see what is shown in a video. Therefore, add an alternative way of communication, such as subtitles, a transcript or an audio description. The guidelines distinguish between different forms of audio and video:

  • Sound fragments (sound without image)
  • Moving pictures (picture without sound)
  • Movies (image with sound)
Sound fragments or video are sometimes used as an alternative to text. If all the information that can be seen or heard is also available in the text, then you speak of a media alternative. With an equivalent media alternative, a media file does not have to meet the associated requirements such as subtitles, transcript or audio description. In the Netherlands an exception applies to media published before September 23, 2020. Live media does not have to be directly accessible either. If it is available online after the broadcast or is republished somewhere else, then it must be made accessible.

Navigation

Navigation is an important part of a website. By making sure that all visitors can navigate a website properly, they are given access to all available information. A well built and consistent page structure and skip links help visitors to navigate the page without much effort.

Operation

The operability of a website is important for good interaction. Many visitors use a mouse and a keyboard to navigate the web. Unfortunately, this is not suitable for everyone. Make sure that the functionality of the content does not rely only on a mouse or a keyboard.

Text

Text is the most accessible form of digital information. Text can be presented in different ways by assistive technologies. For example, reading software can convert a text into speech (auditory) and a braille display can translate it into braille (tactile). A clear structure is important for the accessibility of a text. Elements such as headings, subheadings, and lists are used for structure. The structure also needs to be properly coded. In addition, the content must be understandable and presented to visitors in a logical order. All of this must be indicated correctly in the code.