Deelonderzoek toegankelijkheid module Regelcheck

Uitkomst: Onvoldoende

Bevindingen:

In the last step, in each item below ‘Voorwaarden’ are icons which indicate if the condition is met or not. These icons are hidden from assistive software, but they give information to the user. See screenshot 4. Solution: remove the aria-hidden attribute and provide an alternative text within the element.

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Onvoldoende

Bevindingen:

Headings on the page aren’t coded as heading elements but as div elements. Assistive software doesn’t recognize these texts as headings. For example: ‘Uw gegevens’, ‘De Regelcheck’ and ‘Gezinssituatie’. Solution: Mark up all styled headings in a heading element with a logical structure from h1 to h4/h5 without skipping any levels. Since this is a form, headings within the form like ‘Gezinssituatie’ and ‘Aantal volwassenen’ in step 1 can also be marked up as legend
(‘Gezinssituatie’) and label (‘aantal volwassenen’) elements.

Below ‘Uw gegevens’ is visually a list with steps. It’s clear by a green color in which step you are. Within the steps are questions and answer pairs. All this structure information is not provided to assistive software. Solution: the code can be marked up as following:

• Use an ol-element for the list with steps.
• Give the current step an aria-current-attribute with the value ‘step’.
• Within the steps, use a dl-element for the question-answer pairs.

In the last step, below ‘Fondsen’ is visually a list of items. In the code there are only div-elements. For assistive software it’s not clear that this is a list. Solution: code the items within a ul-element.

In the last step, in each item is a heading ‘Voorwaarden’ which is not marked up as a heading element. Solution: code this text within a h3-element.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Onvoldoende

Bevindingen:

Within the steps it’s made clear by color which is the current step. For people who can’t see this color, this information is not available. The contrast of this indicative green color is very low: 1.8:1. Solution: use another indication of the current step, like an icon or in text, and/or increase the contrast of the indicative color to at least 3:0.

Uitkomst: Niet van toepassing

Uitkomst: Onvoldoende

Bevindingen:

Text must have a contrast of at least 4.5:1 for visually impaired and color blind people. This also applies to active elements such as hover and focus. The elements on the website mentioned below are below these values ​​in terms of contrast. Solution: increase the contrast to at least 4.5:1.

The green/white and green/gray combinations, for example:

• The ‘volgende’ button in unfocused
  (3.2:1) and focused state (1.8:1)
• The ‘activeren’ button
  (3.2:1)
• The ‘Download as PDF’ button
  (1.8.1)
• The numbers of the steps
  (1.8.1) See screenshot 2.

Uitkomst: Onvoldoende

Bevindingen:

Make the layout responsive in such a way that all content remains available to at least 200% when zooming in. This is not the case in the following places on the site.

Above 150% there is an image covering the text in the current step. See screenshot 3. Solution: remove the image or put it below the text.

Above 150% the heading ‘Uw gegevens’ and the other steps are hidden. There is a ‘toon meer’ button but it doesn’t reveal anything. In the last step all information from the sidebar is hidden
(heading, steps, download and edit buttons, filters). Solution: make sure all content is available after zooming in, by default or via a valid toggle button.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

Make the layout responsive in such a way that content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions when zooming in to a minimum of 400%
(comparable to 320px wide). This is not the case in the following places on the site. (Tested at 1280px wide.)

Above 200% there is an image covering the text in the current step. See screenshot 3. Solution: remove the image or put it below the text.

Above 200% the heading ‘Uw gegevens’ and the other steps are hidden. There is a ‘toon meer’ button but it doesn’t reveal anything. In the last step all information from the sidebar is hidden
(heading, steps, download and edit buttons, filters). Solution: make sure all content is available after zooming in, by default or via a valid toggle button.

Uitkomst: Onvoldoende

Bevindingen:

Graphic elements must have a contrast of at least 3:1. This also applies to the borders or background color of input fields. The elements on the website mentioned below are below these values ​​in terms of contrast. Solution: increase the contrast to at least 3:1.

In the last step: the icon which indicates that a condition is not met
(orange cross, 2:1)

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Onvoldoende

Bevindingen:

The page does not have a descriptive title, it’s called ‘Forus platform’. Solution: give the page a descriptive title like ‘Regelcheck Potjeswijzer’. To add the current step in the title will also be helpful.

Uitkomst: Onvoldoende

Bevindingen:

After going to the next step, focus stays on the ‘volgende’ button at the bottom of the form. This means a user has to navigate back up through the page to the top of the form. Solution: put the focus on the first input field from the top of the form.

In the last step, focus goes to the list with results. After the results, focus goes into the footer. To get into the sidebar with options like Download and Edit, the user has to navigate back up through the list and then ‘back’ to the sidebar. This is very inconvenient for keyboard users. Solution: keep the visual order and focus order as much as possible in sync. When there are a lot of interactive elements, an extra skiplink can be provided to jump over the section, like ‘ga direct naar de resultaten’.

Uitkomst: Onvoldoende

Bevindingen:

In the last step, there are multiple links with the text ‘Meer informatie en aanvragen’. Users of assistive technology often request lists of links on the page. If these texts do not provide clear information, they cannot do anything with these links. Solution: Add texts to the link that make it clear what exactly it is about, so that the various links can be distinguished from each other. This can be done with an extra text in the link, possibly hidden with CSS, or via an aria-labelledby reference to a text elsewhere on the page, like the h2 heading of the item. For more information, see https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

The focus on the select lists
(for example ‘Leeftijd oudste kind’) is not visible. Therefore it looks like it doesn’t work with a keyboard. Solution: provide a visible focus style when the inputs are focused. See also 4.1.2.

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

When submitting to the next step is not executed, there is no clear error identification. To state that a field is required is not an error message but an instruction. Solution: describe to the user in text which field is in error and how it can be corrected. For example: ‘Er is nog geen keuze gemaakt bij de inkomensgrens’.

Uitkomst: Onvoldoende

Bevindingen:

There is no instruction on which fields are required. This can cause unnecessary error messages and therefore an extra burden for users. Solution: Make clear in text before filling in the form which input fields are required
(or that all fields are required.)

Uitkomst: Niet van toepassing

Uitkomst: Niet van toepassing

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen:

In several steps are ‘steppers’
(spin buttons), for example to add the number of children. The name and value of each step is not clear from the markup. Within a stepper, you must be able to use the arrow keys to increase or decrease the value. Now this has to be done with separate buttons. When activated, a percentage is announced by the screenreader, which makes no sense. See screenshot 1. Solution: give each stepper a clear label, like ‘aantal kinderen’ (instead of the general ‘aanpassen’), and implement the steppers according to the specification, so the right number of units is announced when updated. See also 1.3.1 for the form markup.

There are input fields which visually resemble a select with options, for example below ‘Leeftijd oudste kind’, but they are buttons that open a list box. The role and operation of this is not clear to users of assistance software. The listbox does not have an accessible name. Input fields are also nested. With the keyboard it does not work as expected with a listbox with the enter key to open the list and the arrow keys to navigate between the options. Solution: use the native select element to provide the options. This will be accessible to users of keyboard and assistive software by default.

Uitkomst: Niet van toepassing