Report for Kindertelefoon

Report Creator: Fatih Topcuoglu, Quality Assurance Engineer, from Salves 'Software Testing Company', November 9, 2020

Evaluation Commissioner:

Summary of the evaluation findings

During the W3C Accessibility (level A & level AA) evaluation we concluded the website is compatible.

Scope of the evaluation

Website name kindertelefoon
Scope of the website

https://www.kindertelefoon.nl/

WCAG Version WCAG 2.1
Conformance target Level AA
Additional evaluation requirements

Evaluation involving users with disabilities

Accessibility support baseline

Explorer (IE) with JAWS
Chrome with JAWS
FireFox with NVDA
Apple with VoiceOver
Safari’s built-in developer tools
Chrome with ChromeVox

Relied upon technologies
  • CSS
  • DOM
  • HTML5
  • JavaScript
  • PHP

Overview of audit results

Results of Level AA
Principle Level A Level AA
1. Perceivable 9 / 9 11 / 11
2. Operable 14 / 14 3 / 3
3. Understandable 5 / 5 5 / 5
4. Robust 2 / 2 1 / 1
Total 30 / 30 20 / 20

Detailed audit results

Principle 1 Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: ARIA6: objects are provided with an 'alt' description
ARIA10: objects are provided with a text label by means of an aria label
G196: website does not contain grouped images
FLASH1, 5, 28: the website does not use Flash
H2: combination of adjacent image and text links for the same resource:
<a href="/chat" class="nav-overlay-link"> <img class="nav-overlay-link-icon" src="/images/navigation/chatten.png" alt="Chatten"> </a>
H35: website does not use <applet> </applet> attribute
H37: objects are provided with an 'alt' description
H53: website does not use object elements
H86: website does not use ASCII
PDF1: website does not contain pdf documents with images

1.2 Time-based Media

1.2.1 Audio-only and Video-only (Prerecorded): (Level A)
Results for the entire sample:
Outcome: Passed

Findings: The website contains no sound clips without video.
The website does not contain video fragments without sound.

1.2.2 Captions (Prerecorded): (Level A)
Results for the entire sample:
Outcome: Passed

Findings: All videos present on the website can be provided with subtitles. This function is available from the YouTube menu bar.

1.2.3 Audio Description or Media Alternative (Prerecorded): (Level A)
Results for the entire sample:
Outcome: Passed

Findings: All videos present on the website are provided with a transcript that is present in the video. The content of the video can thus be understood without sound.

1.2.4 Captions (Live): (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: The website does not use live video and / or audio fragments

1.2.5 Audio Description (Prerecorded): (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: All videos present on the website are provided with a transcript that is present in the video. The content of the video can thus be understood without sound.

1.3 Adaptable

1.3.1 Info and Relationships: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G138 = OK:The pages that contain a lot of text are laid out more creatively. T
his by means the use of larger letters, color, etc.

H51/H39/H73/H63/H43 = OK: The website does not use tables.

PDF6/PDF9/PDF11/PDF17/PDF20/PDF21 = OK: The website does not use PDF documents (tables).

FLASH31/FLASH21/FLASH32/FLASH29/FLASH25 = OK: The website does not use Flash

H44 = OK: The website uses label 'input type' on forms

H65 = OK: The form controls contain a title on the website

H71 = OK:
Semantic grouping for related form controls are grouped.

H85 = OK: Types are grouped in form selection lists, example: https://www.kindertphones.nl/subscribe

H48 = OK: Example of an ordered list in the footer of the website is:
<ul class = "footer-links">
<li>
<a title="House Rules" href=" House Rules"> House Rules </a> </li>
</ul>

H42 = OK: Website uses HTML and XHTML header markers, example:
<div class = "col-12 m-content-column-size">
<h1 class = "m-title"> <img class = "title-icon" src = "/ images / icons / mobile-icon_kdt.svg" alt = "call icon"> CALL & nbsp; </h1>
<h3 class = "m-subtitle"> 0800-0432 </h3>
</div>

SRC21 = OK: Website uses (client-side) scripting in the DOM model

H97 = OK: The website uses the HTML5 nav element to group navigation links

1.3.2 Meaningful Sequence: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G27 = OK: The content on the website is well organized
C27 = OK: Order of the content in the source code corresponds to the visual presentation of this content.

1.3.3 Sensory Characteristics: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G96 = OK: Textual identifiers are available on the website for 'non-textual' items.

1.3.4 Orientation: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: When the presentation orientation changes, the home page renders to that specific orientation.

1.3.5 Identify Input Purpose: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: The forms are provided with input so that the user knows what can be entered where.

1.4 Distinguishable

1.4.1 Use of Color: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G14 = OK: Ensure that information conveyed by color differences is also available in text
G111 = OK: Using color and pattern
G205 = OK: Includes a text cue for colored form control labels

1.4.2 Audio Control: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G171 = OK: Play sounds only at the request of the user
G60 = OK: Play a sound that turns off automatically within three seconds

The website does not contain any audio and / or video clips that are played automatically.

1.4.3 Contrast (Minimum): (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G18 = OK: Ensure that there is a minimum 4.5: 1 contrast ratio between text (and images of text) and background behind the text

G145 = OK: Ensure a contrast ratio of at least 3: 1 between text (and images of text) and background behind the text

1.4.4 Resize text: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G142 = OK: Using a technology that has widely available user agents that support zoom

If the website is increased to 200 percent, all text is still legible and there is no loss of content and / or functionality. The content of the website is therefore fully responsive. Except for the logo on the homePage and the background images.

1.4.5 Images of Text: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: C30 = OK: Using CSS to replace text with images of text and provide UI controls to toggle.
The website doesn't contain text images

C22 = OK: Using CSS to control the visual presentation of text.
The website uses CSS styling for text.

1.4.10 Reflow: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: C32 = OK: Using media queries and grid CSS to reposition columns. No scroll bar present.

The purpose of this technique is to be able to present content without introducing a horizontal scroll bar with a width equal to 320 CSS pixels, or a vertical scroll bar with a height equal to 256 CSS pixels for text intended for horizontal scrolling.

1.4.11 Non-text Contrast: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G207 = OK: Make sure to provide a 3: 1 contrast ratio for icons

1.4.12 Text Spacing: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: C36 = OK: Allow text spacing to be overwritten
C35 = OK: Allow text spacing without wrapping

OK = Line height (line spacing) up to at least 1.5 times the font size;
OK = Space between paragraphs up to at least 2 times the font size;
OK = Letter spacing (tracking) to at least 0.12 times the font size;
OK = Spacing words to at least 0.16 times the font size.

1.4.13 Content on Hover or Focus: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: A mechanism is available to close the supplemental content without moving the pointer hover or keyboard focus unless the supplemental content communicates an input error or does not hide or replace other content:
OK = "With tab it is possible to scroll to the next plane. With escape can be closed flat."

When a pointer hover can activate additional content, the pointer can be moved over the additional content without disappearing:
OK = "On the home page, the additional content remains available if the pointer is moved over the additional content without it disappearing."

The additional content remains visible until the cause for the hover or focus is removed, the user closes the content, or the information is no longer valid:
OK = "
On the home page, the additional content remains available until the cause for the hover or focus is removed. The boxes then show the initial status again."

Principle 2 Operable

2.1 Keyboard Accessible

2.1.1 Keyboard: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G202 = OK: Provide keyboard control for all functionality

2.1.2 No Keyboard Trap: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G21 = OK: Ensuring that users don't get stuck in content

2.1.4 Character Key Shortcuts: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: When a keyboard shortcut is implemented in content using only letters (including uppercase and lowercase), punctuation, numbers, or symbols, at least one of the following applies: disable, assign, and always active on focus.

The website does not use shortcut keys that are implemented in the content.

2.2 Enough Time

2.2.1 Timing Adjustable: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G198 = OK: Provide a way for the user to disable the time limit.
"No mechanism in place to disable any time limits at the top of the page."

G133 = OK: Provide a check box on the first page of a multipart form that allows users to request a longer session time limit or no session time limit.
"The forms on the website do not have a time limit when completing the form."

2.2.2 Pause, Stop, Hide: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G4 = OK: Allow the content to be paused and restarted from the point where it was paused.
"On the website, integrated youtube movies can be paused and restarted from the point where it was paused."

G11 = OK: Create content that blinks for less than 5 seconds.
"There are no flashing, scrolling or moving parts on the website."

2.3 Seizures and Physical Reactions

2.3.1 Three Flashes or Below Threshold: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G19 = OK: Make sure that no part of the content flashes more than 3 times in a 1 second period.
"There are no flashy elements on the website."

G176 = OK: Keep the flashing area small enough.
"There are no flashing elements on the website."

2.4 Navigable

2.4.1 Bypass Blocks: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G1 = OK: Add a link at the top of every page that goes directly to the main content area.

G123 = OK: Add a link at the beginning of a block of repeated content to go to the end of the block.

"The most important parts of the website, the channels Calling, Chat and Forum, can be reached via the boxes on the homepage. A returning visitor has the option to skip the courses and navigate directly to the subsequent pages using the symbols next to the menu.
It is also possible to navigate directly back to the 'homepage' from different pages. This by means of the first symbol on each subpage."

PDF9 = OK: Deliver headings by marking content with heading tags in PDF documents. The website does not contain PDF documents.

2.4.2 Page Titled: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: H25 = OK: Specify a title with the title element.

PDF18 = OK: Specify the document title using the Title item in the document information dictionary of a PDF document. Website does not contain PDF documents.

2.4.3 Focus Order: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: H4 = OK: Creating a logical tab order using links, form elements and objects.
"Tab index is used
The tab order specified by the tab index attributes follows the relationships in the content."

C27 = OK: Match the DOM sequence to the visual sequence.
"Visually view the order of the content on the web page as presented to the end user.

Examine the elements in the DOM using a tool that allows you to see the DOM.

Make sure that the order of the content in the source code sections matches the visual presentation of the content on the web page."

PDF3 = OK: Ensuring correct tab and reading order in PDF documents. Website does not contain PDF documents.

2.4.4 Link Purpose (In Context): (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G91 = OK: Provide link text describing the purpose of a link.
"The text of the link describes the purpose of the link, example:
<a title=" Speech or paper" href=" Speech-or- paper"> Speech or paper </a>"

2.4.5 Multiple Ways: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G125: Provide links to navigate to related web pages.
"For each link on the webPage/homePage: check if the link leads to related information."

2.4.6 Headings and Labels: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G130 = OK: Provide descriptive headlines.
"The web page contains headings.
Each heading identifies the portion of the content."

G131 = OK: Provide descriptive labels.
"Identify the purpose of the interface component.
Check that each label conveys the purpose of the part.
Examples are:
https://www.kindertelefoon.nl/solliciteer-jongeren
https://www.kindertelefoon.nl/solliciteer"

2.4.7 Focus Visible: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G149 = OK: Using user interface components flagged by the user agent when they receive attention.
"When HTML links gain focus, they are surrounded by a dotted focus highlight rectangle."

C15 = OK: Using CSS to change the presentation of a user interface component when it receives focus.
"The purpose of this technique is to demonstrate how the visual appearance can be enhanced through style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device."

2.5 Input Modalities

2.5.1 Pointer Gestures: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: The purpose of this technique is to demonstrate how the visual appearance can be enhanced through style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device.

"The entire website can be operated without using a recent gesture. A single click is enough to navigate or fill in form fields."

"The entire website can be operated without using multiple clicks. A single click is enough to navigate or fill in form fields."

2.5.2 Pointer Cancellation: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G210 = OK: Allow drag and drop actions to be canceled.
"The website does not use elements that have to be dragged."

G211=OK: Link the accessible name to the visible label.
"The website does not use voice input interaction."

2.5.3 Label in Name: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G208 = OK: Include the text of the visible label as part of the accessible name.
"All symbols, menu items and buttons with links are labeled in the code."

G211 = OK: Link the accessible name to the visible label.
"The website does not use voice input interaction."

2.5.4 Motion Actuation: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G213: Provides conventional controls and an application setting for motion-activated input.
"The website does not use input that is activated by movement."

Principle 3 Understandable

3.1 Readable

3.1.1 Language of Page: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: H57 = OK: Using language attributes on the html element.
"The language is set to Dutch on every page. In the html it says lang = nl."

3.1.2 Language of Parts: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: H58 = OK: Using language attributes to identify changes in human language.
"The website does not contain any language other than Dutch.
The html contains only lang = nl."

3.2 Predictable

3.2.1 On Focus: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G107 = OK: Use "activate" instead of "focus" as a trigger for context changes.

3.2.2 On Input: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G80 = OK: Provide a send button to initiate a context change.
"Each form on the website has a submit button."

3.2.3 Consistent Navigation: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G61 = OK: Present repeated components in the same relative order each time they appear.

"The fixed navigation items, the symbols of the channels Call, Chat and Form are in the same order throughout the website.
On the homepage they are at the top left, on the follow-up pages they are at the top right.
The menu is located throughout the website in the top left corner.
The footer is on the entire website, in the same order, at the bottom of the page.
The social icons are in the footer throughout the website, in the same order, at the bottom of the page."

3.2.4 Consistent Identification: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G197 = OK: Consistently use labels, names, and text alternatives for content with the same functionality.

"Each item is associated with text that identifies it (eg, Label, name, or text alternative).

This associated text is identical for any user interface item with the same function.

Example:
Throughout the website, the following icons consistently have the same 'alt' text. Icons: Bellen, Chat, Forum and Hamburger Menu"

3.3 Input Assistance

3.3.1 Error Identification: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G83 = OK: Provide text descriptions to identify mandatory fields that have not been completed.

OK:
"When a mandatory field in a form is skipped and / or forgotten, it is not possible to send the form.
Only a red line appears around the field.
The 'hint' text per field (which data is expected?) Is already pre-filled."

3.3.2 Labels or Instructions: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G131 = OK: Provide descriptive labels.
"All input fields, such as with the form I want to participate in De Kindertelefoon or the input fields at the start of a Chat, have accompanying text in the input field."

H71 = OK: Describing groups of form controls using fieldset and legend elements.
"Items in drop-down lists on forms are grouped, example:

<select class = "custom-select is-invalid" name = "field_16"> <option value = ""> Select your gender </option>
<option value = "Female"> Female </option>
<option value = "Man"> Man </option>
</select>"

3.3.3 Error Suggestion: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G83 = OK: Provide text descriptions to identify mandatory fields that have not been completed.

"When a mandatory field in a form is skipped and / or forgotten, it is not possible to send the form.
Only a red line appears around the field.
The 'hint' text per field (which data is expected?) Is already pre-filled."

3.3.4 Error Prevention (Legal, Financial, Data): (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: G155 = OK: Provided with a check box in addition to a send button.

Principle 4 Robust

4.1 Compatible

4.1.1 Parsing: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: G134 = OK: Validating web pages.
https://validator.w3.org/

4.1.2 Name, Role, Value: (Level A)
Results for the entire sample:
Outcome: Passed

Findings: If you develop interactive functions yourself, make sure that assistive technologies can determine their name, role and value.

"The website does not use components developed by Webavance itself."

4.1.3 Status Messages: (Level AA)
Results for the entire sample:
Outcome: Passed

Findings: ARIA22 = OK: Use role = status to present status messages.
"The website does not use a 'role attribute' with a value of 'status'"

G199 = OK: Provide success feedback when data is successfully submitted.
"The website confirms a sent form: 'Bedankt voor het invullen. Wij nemen zo spoedig mogelijk contact met je op!'"

Sample of audited web pages

Related WCAG 2 resources