WCAG 2.2 AA Sub-study on form content for the Municipality of Wierden

This sub-study focuses exclusively on the content of the forms within the Shift2 environment that the organization can enter or modify via the management system.

This study evaluated 30 of the 55 success criteria of WCAG 2.2 Levels A and AA.

The remaining 25 success criteria relate to the technical aspects of the forms and are evaluated in the separate technical sub-study.

Together, these two sub-studies constitute the complete assessment of the forms within the Shift2 environment.

Success criteria assessed in the technical sub-study

The following success criteria were not evaluated in this content study and are covered in the separate technical sub-study:

The study was conducted using a representative sample of forms within the Shift2 environment. Within this sample, the accessibility issues identified were described as specifically as possible, including references to the relevant form or form section. Where possible, recommendations were included to address the issues.

This study does not provide an exhaustive overview of all possible accessibility issues. The findings represent a snapshot of the situation at the time of the study.

WCAG (Web Content Accessibility Guidelines) are internationally recognized guidelines for digital accessibility, based on four principles: Perceivable, Operable, Understandable, and Robust. Measurable success criteria have been established within these principles.More information: WCAG 2.2 (Dutch translation)

The table below shows, for each WCAG principle and each WCAG level, how many success criteria were tested and how many of those were approved.

• Step 1 - Feedback Form: Renovation of the De Stouwe Playground on the East Side of Europaring
  https://www.wierden.nl/form/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde-0
• Step 1 - Information (Sign up for Zenderink updates)
  https://www.wierden.nl/form/aanmelden-updates-zenderink/gegevens-0-1

On these pages, the "First Name" field has the value autocomplete="name". This is the wrong value: "name" refers to the full name, so when autofill is used, the browser fills in both the first name and the last name. This is a problem for people who rely on autofill, such as those with motor impairments or those who have difficulty typing.

Advice

In the "First Name" field, replace the "name" autocomplete attribute with "given-name".

• Step 1 - Feedback Form: Renovation of the De Stouwe Playground on the East Side of Europaring
  https://www.wierden.nl/form/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde-0
• Step 1 - Information (Sign up for Zenderink updates)
  https://www.wierden.nl/form/aanmelden-updates-zenderink/gegevens-0-1

On this page, the "Address" field is missing the autocomplete attribute. As a result, the purpose of this field cannot be determined. This is a problem for people who rely on autofill, such as those with motor impairments or those who have difficulty typing.

Advice

Add the attribute `autocomplete="street-address"` to the "Address" field.

Step 1 - Contact Form - Wedding Officiant Bert Groothengel / Contact Form - Wedding Officiant Bert Groothengel
https://www.wierden.nl/form/contactformulier-trouwambtenaar-bert-groothengel/contactformulier-trouwambtenaar-bert-groothengel-0

This page contains a form in which the "Applicant's Phone Number" field requests the user's own phone number. This field does not have an autocomplete attribute, which prevents the browser and assistive technology from programmatically determining the field’s purpose. As a result, autofill does not work for this field. This is a problem for people with cognitive disabilities, people with dyslexia, and people with motor disabilities, who specifically benefit from autofill to avoid errors and reduce the amount of typing required.

Advice

Add the attribute autocomplete="tel-national" to the phone number field.

• Step 1 - Feedback Form: Renovation of the De Stouwe Playground on the East Side of Europaring
  https://www.wierden.nl/form/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde-0
• Step 1 - Contact Form - Wedding Officiant Bert Groothengel / Contact Form - Wedding Officiant Bert Groothengel
  https://www.wierden.nl/form/contactformulier-trouwambtenaar-bert-groothengel/contactformulier-trouwambtenaar-bert-groothengel-0

On these pages, the step title (h2) does not accurately describe the content of the step. The h2 repeats the name of the form, even though the step is about entering personal information and submitting a response. Users who navigate using headings—such as those who use a screen reader—cannot determine from this heading what is expected of them in this step.

Advice

Replace the h2 with a descriptive step title that explains what is required in that step. For example: "Your information and response."

Step 1 - Information (Sign up for Zenderink updates)
https://www.wierden.nl/form/aanmelden-updates-zenderink/gegevens-0-1

The page contains a form field labeled "Zip Code and City." This label is linked to a single text field. The field expects two separate pieces of information: a zip code and a city. There is no instruction regarding the expected input format. It is not clear to the user how the data should be entered: just the postal code, just the city, or both one after the other (and if so, in what order and with what separator). There is no placeholder or instructional text to clarify this. This is a problem for people who use assistive technology and for users who are unfamiliar with the expected input format.

Advice

Create two separate fields, each with its own label: "Zip Code" and "City."

Step 1 - Contact Form - Wedding Officiant Bert Groothengel / Contact Form - Wedding Officiant Bert Groothengel
https://www.wierden.nl/form/contactformulier-trouwambtenaar-bert-groothengel/contactformulier-trouwambtenaar-bert-groothengel-0

The page contains a text field labeled "Bride and Groom's Names". The label does not indicate what input is expected. It is currently unclear whether the user should enter the full names of both partners separately, the combined married name, or some other format. Without instructions, the user must guess what the municipality intends. This is a problem for people with cognitive disabilities, but also for all other users who are not familiar with this type of form.

Advice

Add instructions directly below the label explaining what information is expected and in what format. For example: "Enter the first and last names of both partners, separated by 'and'"

Step 1 - Contact Form - Wedding Officiant Bert Groothengel / Contact Form - Wedding Officiant Bert Groothengel
https://www.wierden.nl/form/contactformulier-trouwambtenaar-bert-groothengel/contactformulier-trouwambtenaar-bert-groothengel-0

On the page, the "Applicant Phone Number" field has been created as a numeric field (type="number"). As a result, a screen reader announces the field as a countable number rather than a phone number. This is confusing for users who rely on a screen reader.

Advice

Replace the numeric field with the phone number field available in the form system. That field has type="tel" and also includes instructions on the expected format.

• Step 1 - Feedback Form: Renovation of the De Stouwe Playground on the East Side of Europaring
  https://www.wierden.nl/form/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde-0
• Step 2 - Check (Feedback Form)
  https://www.wierden.nl/form/reactieformulier-vernieuwing-speelplek-de-stouwe-europaring-oostzijde/overzicht-1

On these pages, the introductory text includes the sentence "Below is an overview of the current performance venues." However, this overview is not actually there. The form fields immediately follow the introductory text. As a result, all users are missing information that is intended to help them fill out the form correctly. The same problem occurs on the "Overview" page (step 2), where the exact same introductory text is used. This is not considered a violation because the reference "below" does not work for any user: the overview is completely missing. Consequently, there is no issue of unequal accessibility based on sensory characteristics.

Advice

Add the list of current performance venues to the page, immediately after the introductory text. If the list is located elsewhere, replace the reference with a link, for example: "View the list of current performance venues."

Pages containing forms offer a high-contrast version. This can be enabled using a "contrast switch." This success criterion has been fully tested in high-contrast mode. The high-contrast version is considered an alternative to the standard version. As a result, there may be contrast issues in the standard version. These have not been further evaluated.

Advice

We recommend ensuring that the standard version also features sufficient color contrast in all text. This improves the website’s accessibility for visitors with visual impairments. Text with sufficient color contrast is also easier to read for all readers. As a result, reading is less taxing, requires less energy, and is (subconsciously) perceived as more pleasant. This makes the reader more likely to proceed to take action. The high-contrast version can then be used to provide "enhanced contrast," thereby meeting the WCAG 1.4.6 Enhanced Contrast success criterion (Level AAA).

Pages containing forms include a high-contrast version. This can be enabled using a "contrast switch." This success criterion has been fully tested in high-contrast mode. The high-contrast version is considered an alternative to the standard version. As a result, there may be contrast issues in the standard version. These have not been further evaluated.

Advice

Ensure that the standard version also provides sufficient color contrast for all graphic elements. This improves the website’s accessibility for visitors with visual impairments. The high-contrast version can then be used to provide “enhanced contrast.”