05 February 2022

WCAG Checklist

Steven
️ Blog
23 min. reading time

Digitally accessible is an important and topical item. But how do you make a website accessible to everyone? This can be done by following the WCAG (Website Content Accessibility Guidelines). Here you will find a WCAG checklist with all the requirements that your website must meet for level AA, the legally required level. You can also download the WCAG checklist as a PDF.

WCAG Checklist

What is DigiAccessible?

DigiAccessible is the Dutch name for the standard with which government organizations must make their websites and apps accessible to all citizens. Accessible here means usable for everyone: young, old, with or without disabilities.

The Dutch government wants public facilities to be usable by all citizens. Not just buildings or public transport, but also digital facilities such as websites and apps. Therefore, digital accessibility is a legal requirement for all government organizations (“DigiToegankelijk | Logius,” nd).

The deadline for a digi-accessible website was September 23, 2020 and the deadline for dig-accessible apps is June 23, 2021.

No less than 25% of the population (4.500.000 people) has a disability. By making your website DigiAccessible, you open up your website to a large part of our society.

Do you need a digi-accessible website or do you want to improve the accessibility of your app? View our digital accessibility services page and request a free scan right away!

What good is an accessible website?

  • Efficient use of your website
  • User Participation
  • Quality, durability and user-friendliness
  • Findability and searchability of your information
  • Satisfaction with visitors and employees
  • Social awareness in your organization
  • Good for your social profile and diversity
  • Clear communication with suppliers
  • Cost reduction

What is covered under a website?

  • Everything you receive via the browser
  • Web pages with image, text
  • Multimedia content (video, audio, VR, etc)
  • Interactive parts and processes
  • External content for which you are responsible
  • (Mobile) applications (mandatory from 23 June 2021)
  • Documents (PDF etc.)

Based on the WCAG

DigiAccessible is based on an international accessibility standard: the Web Content Accessibility Guidelines (WCAG). This standard is managed by the World Wide Web Consortium (W3C). If a website or app meets the requirements of Digi Accessible, it guarantees maximum accessibility by applying technical and substantive design principles (WGAC, 2020).

The subjects

The rules in this document are taken from WCAG version 2.1. These are based on 4 key principles:

Principle 1: Observable

Information and components on the website must be visible to the user.

Principle 2: Operable

Parts of the website and navigation must be easily operable by the user.

Principle 3: Understandable

Information and the operation of the website must be clear to the user.

Principle 4: Robust

Web page content should be readily available to tools such as a screen reader.

Based on these 4 principles, there are success criteria that are divided into the following levels:

  • Level A: the minimum accessibility level (30 criteria)
  • Level AA: good accessibility (additional 20 criteria)
  • Level AAA: excellent accessibility, also for more specific disabilities (additional 28 criteria)

In order to meet the minimum requirements of the government, a DigiAccessible website must meet levels A and AA. In this document we have explained the 50 success criteria so that you can easily check whether your website is DigiAccessible. The numbering of the cups corresponds to the number in the WCAG extensionso that you can easily find it.

Principle 1 Perceptibility

Information and components on the website must be visible to the user.

1.1 Text alternative

If you place non-text content on the website such as images, buttons, these must contain alternative text so that, for example, visually impaired people can listen to them via the screen reader.

1.2.2 to 1.2.5 Provide alternatives to time-based media

For pre-recorded videos, a text and audio alternative should be available for both the visually impaired and the hearing impaired. An audio alternative is only necessary if information is conveyed in the video by means of images instead of audio.

It is important that you take into account that the most important information is mainly given via the sound and as an alternative for the hearing impaired via the subtitles. Subtitles must be clearly visible at the bottom of the screen.

This also applies to all live content.

1.3 Customizable

Create content that can be presented in multiple ways without losing its information or structure.

1.3.1 Info and relations

The information conveyed as a visual presentation must be recognizable and readable by software or an alternative must be available in the text.

1.3.2 Meaningful sequence

When there is content that needs to be presented in a certain way, such as a step-by-step plan, this must be indicated in the code so that auxiliary equipment can read it correctly.

1.3.3 Sensory properties

Information or instructions are not only indicated by color and form, for example because something turns red if it is wrong. For people who are, for example, color blind or who read through a screen reader, this will be unclear and therefore it must also be indicated by means of text.

1.3.4. Playback mode

The content on the page does not limit viewing and operation to portrait or landscape only unless it is absolutely essential.

1.4 Distinctive

Make it easier for users to hear and see content by separating foreground and background.

1.4.1 Use of color

Color is not used as the sole visual means to convey information, indicate an action, evoke a response, or distinguish a visual element.

This is, for example, with the colors green and red to show good and bad. This is not clear to the color blind and must be supplemented with an icon or with text.

1.4.2 Sound Control

If a video or audio fragment is automatically played on the website for more than 3 seconds, there must be a clear on-off button for this. This is to prevent the audio/video and screen reader sound from mixing up.

1.4.4 Rescaling the text

The text can be scaled up to 200% without assistive technology without loss of content or functionality. This does not apply to the subtitles.

1.4.5 Text images

Text may not be placed in an image on the web page, because this prevents the screen readers from reading it. In addition, the text cannot be enlarged properly.

1.4.10 Reflow

The content on the page can be displayed both horizontally and vertically

1.4.11 Readability

A contrast ratio of at least 3:1 with the adjacent colors is taken into account. This does not apply to inactive user interface components and graphical objects.

1.4.12 Text spacing

Readability for visually impaired users is taken into account by:

  • Line height (line spacing) to at least 1,5 times the font size;
  • Spacing between paragraphs to at least 2 times the font size;
  • Letter spacing (spacing of letters) to at least 0,12 times the font size;
  • Spacing words to at least 0,16 times the font size.

1.4.13 Content on hover or focus

No content should be visible and then hidden again using a hover or focus with the keyboard. A hover is when you mouse over an element on the web page and that element changes. Focus is when you click with your mouse in a field or element, for example, and the content changes as a result.

Principle 2 Operability

Parts of the website and navigation must be easily operable by the user.

2.1 Keyboard accessibility

All functionality on the page can be operated by means of the keyboard. This is for users who cannot use a mouse but operate the page using the keyboard.

Controlling the page with a keyboard should navigate smoothly and logically without the user running into obstacles.

2.1.2 No keyboard trap

When navigating on the page with his keyboard to a component, the user should easily get out of the component again using the standard keys.

2.1.4 Single character hotkeys

If keyboard shortcuts are used on the website, they should be easy to disable and reassign to other keys.

2.2 Enough time

Give users enough time to read and use content.

2.2.1 Timing adjustable

Any content on the page that has a time limit, such as automatic logout, should consider the following:

At least 1 of the following applies

  • The user can disable the time limit before it is reached
  • The user may change the time limit.
  • The user is warned when the time expires and has at least 20 seconds to extend it.

2.2.2 Pause, Stop, Hide

All moving, flashing and scrolling elements must be able to be paused, stopped or hidden.

2.3. Physical reactions

2.3.1 Flash

The website may not contain elements that blink more than 3 times in 1 second. This is related to users who have elision.

2.4 Navigable

2.4.1 Bypassing Blocks

The page must contain skip links. These make it possible to bypass blocks of content that appear several times on the page.

2.4.2 Page title

Web pages should have a title that describes the topic and purpose of the page. Titles must also be unique.

2.4.2 Focus sequence

The order of content should be logical when navigating the page with the keyboard.

2.4.4 Link target

All links on the page should have clear link text that describes the context. Think of a button with the text 'Read more'. For a user with a screen reader this is meaningless, especially if he hears all the links in succession.

2.4.5 Multiple ways

There should be 2 other ways to reach the web pages in addition to the main navigation.

2.4.6 Buttons and Labels

Buttons and labels should clearly describe the subject or purpose so that the user understands what happens when they press the button or fill in an input field.

2.4.7 Focus visible

When the user uses the keyboard to operate the web page, he must be able to see where he is on the page.

2.5 Modalities

2.5.1 Pointer gestures

All functionalities on the web page that are controlled by gestures must be offered in multiple ways. Think, for example, of swiping or zooming in with your fingers on a touchscreen. This should also be possible with the keyboard.

2.5.2 Cancellation pointer

There must be an option to undo a touch action.

2.5.3 Label in name

The text in buttons must have a clear name that describes what the function is.

2.5.4 Motion activation

Functions that are only controlled by motion must also be able to be switched off. For example, consider shaking or rotating your screen.

Principle 3 Understandable

Information and the operation of the website must be clear to the user.

3.1 Readable

3.1.1 Language of page

If the text on the web page is written in Dutch, it is also set to Dutch for the screen reader. Otherwise, the screen reader may have difficulty pronouncing words.

3.1.2 Language of parts

If the website uses different languages, this is indicated in the code.

3.2 Predictable

3.2.1 Focus

If the user focuses on something, the context should not change. For example, no additional information may be displayed. For example, if you click on something, additional information may suddenly appear without the user's knowledge of this, for example by means of a "read more" button.

It must also be clear where the focus is. The user must be able to see where he is on the page, you can do this by, for example, changing the design of the input field when the focus is on this.

3.2.2 Input

If the user provides input on something, the context may not change. For example, when the user clicks on an input field, "the password must contain at least 1 capital letter" should not suddenly appear.

This should be visible in advance.

3.2.3 Consistent navigation

The navigation menu has a logical order and returns in the same way on every page.

3.2.4 Consistent identification

The navigation menu items are clearly descriptive and appear consistently on every page.

3.3. Import assistance

Help the users to avoid mistakes by improving them.

3.3.1 Error Identification

If, for example, an error is automatically discovered when filling in a form, the user will receive immediate feedback about this in the right place.

3.3.2 Labels or instruction

When the user has to enter something in, for example, a form, clear instructions are given such as: "enter your name" and "use at least a capital letter and number for your password." This is to prevent the user from making a mistake.

3.3.3 Error Suggestion

Input fields automatically provide feedback when recognizing an error to prevent it.

3.3.4 Error Prevention

For web pages where financial data must be entered, the user must be able to apply at least 1 of the following:

  • Rollback
  • Undo Send
  • Controleren
  • The data is checked
  • Feedback given on any errors
  • There is a system in place that reviews, validates and improves the data before action is completed.

Principle 4 Robust

Content must be robust enough to be reliably interpreted by a wide variety of tools.

4.1 Compatible

4.1.1 Parsing

The HTML code contains as few errors as possible because:

  • The elements have a start tag and an end tag
  • The elements are properly nested in the code
  • The elements do not contain duplicate attributes
  • All IDs are unique

4.1.2 Role name, value

All elements on the web page can be operated by assistive devices for users with disabilities. To check whether this works correctly, online tools are tested to see which elements need to be improved.

4.1.3 Status messages

All status messages such as error messages must also be available for disabled user auxiliary equipment.

Sources

DigiAccessible | Logic. (nd). Retrieved August 16, 2020, from https://logius.nl/diensten/digi accessible

Initiative, WWA (2020, July 22). Web Content Accessibility Guidelines (WCAG) Overview. Retrieved October 16, 2020, from https://www.w3.org/WAI/standards-guidelines/wcag/

Steven Founder[email protected]06-20413957
I practiceWhatsapp

Inspired? The following topics have been offered

SEO
Show all inspiration