Report Creator: Fatih Topcuoglu, Quality Assurance Engineer, from Salves 'Software Testing Company', November 9, 2020
Evaluation Commissioner:
During the W3C Accessibility (level A & level AA) evaluation we concluded the website is compatible.
| Website name | kindertelefoon |
|---|---|
| Scope of the website | |
| WCAG Version | WCAG 2.1 |
| Conformance target | Level AA |
| Additional evaluation requirements | Evaluation involving users with disabilities |
| Accessibility support baseline | Explorer (IE) with JAWS |
| Relied upon technologies |
|
| 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 |
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
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
For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:
Findings: The website contains no sound clips without video.
The website does not contain video fragments without sound.
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Findings: All videos present on the website can be provided with subtitles. This function is available from the YouTube menu bar.
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
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.
Findings: The website does not use live video and / or audio fragments
Audio description is provided for all prerecorded video content in synchronized media.
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.
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
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
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
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.
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
Findings: G96 = OK: Textual identifiers are available on the website for 'non-textual' items.
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
Findings: When the presentation orientation changes, the home page renders to that specific orientation.
The purpose of each input field collecting information about the user can be programmatically determined when:
Findings: The forms are provided with input so that the user knows what can be entered where.
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
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
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
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.
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
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
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
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.
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
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.
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
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.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
Findings: G207 = OK: Make sure to provide a 3: 1 contrast ratio for icons
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
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.
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
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."
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
Findings: G202 = OK: Provide keyboard control for all functionality
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.
Findings: G21 = OK: Ensuring that users don't get stuck in content
If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
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.
For each time limit that is set by the content, at least one of the following is true:
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."
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
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."
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
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."
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
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.
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.
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
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.
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
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>"
More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
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."
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"
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
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."
All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
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."
For functionality that can be operated using a single pointer, at least one of the following is true:
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."
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
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."
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
Findings: G213: Provides conventional controls and an application setting for motion-activated input.
"The website does not use input that is activated by movement."
The default human language of each Web page can be programmatically determined.
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."
The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
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."
When any component receives focus, it does not initiate a change of context.
Findings: G107 = OK: Use "activate" instead of "focus" as a trigger for context changes.
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Findings: G80 = OK: Provide a send button to initiate a context change.
"Each form on the website has a submit button."
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
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."
Components that have the same functionality within a set of Web pages are identified consistently.
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"
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
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."
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>"
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
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."
For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:
Findings: G155 = OK: Provided with a check box in addition to a send button.
In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
Findings: G134 = OK: Validating web pages.
https://validator.w3.org/
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
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."
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
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!'"