Issues:
Sub-study content digital accessibility website Werken bij de gemeente Capelle aan den IJssel

(Issues only)

Scope of the evaluation

Detailed audit results

1. Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)

Information about success criterion 1.1.1 Non-text Content

Finding 1: At various places on the website, for example on the homepage or on a vacature-page you find next to the 'vacature' a number of icons, for example a Euro sign or a clock. Thes SVG-images have meaning but they lack an name.Solve this with role=image and a title describing the image. Also see 4.1.2

Finding 2: On page www.werkenbijcapelleaandenijssel.nl/accessibility there is an image of text. The code that can be downloaded and embedded on accessibility-statement.nl is accessible. However, this code has not been used here, but its own alternative text has been used, so that the image is no longer accessible. Add the code provided by Logius in the accessibility statements registry to resolve this issue.

1.3 Adaptable

1.3.1 Info and Relationships (Level A)

Information about success criterion 1.3.1 Info and Relationships

Finding 3: On page www.werkenbijcapelleaandenijssel.nl/contact, the visual header 'Team recruitment' is formatted with the b-element instead of a header-element. Visitors who use reading software can navigate the page using a shortcut key or a heading list, in order to quickly get an idea of ​​the content. Texts that are only visually a heading, but are not formatted as such in the code, are not operable and accessible in this way. Make sure that texts that are visually headlines are coded as such.

Finding 4: On page www.werkenbijcapelleaandenijssel.nl/39009/medewerker-s-handhaving there are several headings, such as 'Daarom werken voor Capelle aan den IJssel' and 'Heb je interesse?' formatted with the strong element. The strong element gives emphasis to a word or short sentence and should therefore not be used purely for layout. Visitors who use reading software can navigate the page using a shortcut key or a heading list, in order to quickly get an idea of ​​the content. Texts that are only visually a heading, but are not formatted as such in the code, are not operable and accessible in this way. Make sure that texts that are visually headlines are coded as such. This problem occurs on several pages, including on page www.werkenbijcapelleaandenijssel.nl/42220/projectleider-vastgoed.

Finding 5: On page www.werkenbijcapelleaandenijssel.nl/42220/projectleider-vastgoed the text 'Acquisitie naar aanleiding van deze advertentie stellen wij niet op prijs.' formatted with the em element. The em element gives spoken emphasis to a word or a few words and should therefore not be used purely for formatting. Use the i element or CSS to create similar formatting without the semantic meaning of the em element.

Finding 6: Advice: On page https://www.werkenbijcapelleaandenijssel.nl/cookie-beleid, the first heading has level 2. Usually a page starts with a level 1 heading with the title of the page. The same occurs on page https://www.werkenbijcapelleaandenijssel.nl/vacatures.

Finding 7: Advice: On page https://www.werkenbijcapelleaandenijssel.nl/39009/medewerker-s-handhaving there are lists where the bullets consist of a special ascii character. Some utility software pronounces that character as "right pointing pointer." That's confusing. Hide the character for reading software.

1.3.4 Orientation (Level AA)

Information about success criterion 1.3.4 Orientation

Finding 8: This research focuses on the content of the website, so this success criterion has not been investigated.

1.3.5 Identify Input Purpose (Level AA)

Information about success criterion 1.3.5 Identify Input Purpose

Finding 9: This research focuses on the content of the website, so this success criterion has not been investigated.

1.4 Distinguishable

1.4.4 Resize text (Level AA)

Information about success criterion 1.4.4 Resize text

Finding 10: This research focuses on the content of the website, so this success criterion has not been investigated.

1.4.10 Reflow (Level AA)

Information about success criterion 1.4.10 Reflow

Finding 11: This research focuses on the content of the website, so this success criterion has not been investigated.

1.4.11 Non-text Contrast (Level AA)

Information about success criterion 1.4.11 Non-text Contrast

Finding 12: This finding may require a technical solution:
The light gray edges of the input fields (HEX #D0D0D0) on the white background on page www.werkenbijcapelleaandenijssel.nl/open-sollicitatie or www.werkenbijcapelleaandenijssel.nl/stage have too low a contrast. The contrast ratio here is 1.5:1, where it should be at least 3:1.
If a field has not been filled in or has been filled in incorrectly and the form is submitted, the pink border of the field (HEX #FCA5A5) on the white background has a contrast ratio of 1.9:1 where this should be at least 3:1.

Finding 13: This finding may require a technical solution:
On page www.werkenbijcapelleaandenijssel.nl/39009/medewerker-s-handhaving there is a red button (HEX #BF0029) on a blue background (HEX #013F75). When the button has keyboard focus, it is visible by a red focus border in the same shade of red as the button. The contrast ratio between the focus edge and the blue background is only 1.6:1 where it should be at least 3:1.

Finding 14: This finding may require a technical solution:
On pages such as www.werkenbijcapelleaandenijssel.nl/stage, visitors can add files to an entry. The contrast ratio between the (gray X icon) button to delete a file (HEX #C0BCBB) and the background is only 1.8:1 where it should be at least 3:1.

1.4.12 Text Spacing (Level AA)

Information about success criterion 1.4.12 Text Spacing

Finding 15: This research focuses on the content of the website, so this success criterion has not been investigated.

1.4.13 Content on Hover or Focus (Level AA)

Information about success criterion 1.4.13 Content on Hover or Focus

Finding 16: This research focuses on the content of the website, so this success criterion has not been investigated.

2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

Information about success criterion 2.1.1 Keyboard

Finding 17: This research focuses on the content of the website, so this success criterion has not been investigated.

2.1.2 No Keyboard Trap (Level A)

Information about success criterion 2.1.2 No Keyboard Trap

Finding 18: This research focuses on the content of the website, so this success criterion has not been investigated.

2.1.4 Character Key Shortcuts (Level A)

Information about success criterion 2.1.4 Character Key Shortcuts

Finding 19: On the homepage a video player of Vimeo is used. This player allows the use of single character key operation, for example an f for fullscreen. This functionality is something that can get in the way of people who are depend on speech software. These people depend on those short commands to operate their computers with speech software. Solve this by changing the embed code of the Vimeo video so that the operation with character keys is off. The property to be added to the embed code is 'keyboard: false'. With this adjustment you ensure that you meet this success criterion.

2.2 Enough Time

2.2.1 Timing Adjustable (Level A)

Information about success criterion 2.2.1 Timing Adjustable

Finding 20: This research focuses on the content of the website, so this success criterion has not been investigated.

2.4 Navigable

2.4.1 Bypass Blocks (Level A)

Information about success criterion 2.4.1 Bypass Blocks

Finding 21: This research focuses on the content of the website, so this success criterion has not been investigated.

2.4.3 Focus Order (Level A)

Information about success criterion 2.4.3 Focus Order

Finding 22: This research focuses on the content of the website, so this success criterion has not been investigated.

2.4.5 Multiple Ways (Level AA)

Information about success criterion 2.4.5 Multiple Ways

Finding 23: This research focuses on the content of the website, so this success criterion has not been investigated.

2.4.6 Headings and Labels (Level AA)

Information about success criterion 2.4.6 Headings and Labels

Finding 24: Advies: De submit knop van het sollicitatieformulier op pagina https://www.werkenbijcapelleaandenijssel.nl/39009/medewerker-s-handhaving heeft het label 'Ja, ik heb interesse'. Voor sommige mensen kan dat onduidelijk zijn.

2.4.7 Focus Visible (Level AA)

Information about success criterion 2.4.7 Focus Visible

Finding 25: This research focuses on the content of the website, so this success criterion has not been investigated.

2.5 Input Modalities

2.5.1 Pointer Gestures (Level A)

Information about success criterion 2.5.1 Pointer Gestures

Finding 26: This research focuses on the content of the website, so this success criterion has not been investigated.

2.5.2 Pointer Cancellation (Level A)

Information about success criterion 2.5.2 Pointer Cancellation

Finding 27: This research focuses on the content of the website, so this success criterion has not been investigated.

2.5.4 Motion Actuation (Level A)

Information about success criterion 2.5.4 Motion Actuation

Finding 28: This research focuses on the content of the website, so this success criterion has not been investigated.

3. Understandable

3.2 Predictable

3.2.1 On Focus (Level A)

Information about success criterion 3.2.1 On Focus

Finding 29: This research focuses on the content of the website, so this success criterion has not been investigated.

3.2.2 On Input (Level A)

Information about success criterion 3.2.2 On Input

Finding 30: This research focuses on the content of the website, so this success criterion has not been investigated.

3.2.3 Consistent Navigation (Level AA)

Information about success criterion 3.2.3 Consistent Navigation

Finding 31: This research focuses on the content of the website, so this success criterion has not been investigated.

3.3 Input Assistance

3.3.1 Error Identification (Level A)

Information about success criterion 3.3.1 Error Identification

Finding 32: Visitors can submit a form, for example on the page www.werkenbijcapelleaandenijssel.nl/stage. When visitors submit the form but have left some fields empty, an error message will appear, for example: 'Enter your mobile number here.'. An error message should state which error the visitor has made and where the error was made, for example 'The mobile number field has not been filled in.' That a visitor has to enter the mobile number is an error suggestion, not an error identification. This problem occurs on multiple pages.

3.3.2 Labels or Instructions (Level A)

Information about success criterion 3.3.2 Labels or Instructions

Finding 33: The 'Vul je e-mailadres in' form fields on the https://www.werkenbijcapelleaandenijssel.nl/ and https://www.werkenbijcapelleaandenijssel.nl/vacatures pages do not have a visible label, but do have a placeholder text. The placeholder text is not enough, because it disappears as soon as the visitor starts typing. It can be difficult for some people to remember what to fill in if it is not clearly stated. Add a label that will always be visible to resolve this issue.

3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)

Information about success criterion 3.3.4 Error Prevention (Legal, Financial, Data)

Finding 34: This research focuses on the content of the website, so this success criterion has not been investigated.

4. Robust

4.1 Compatible

4.1.1 Parsing (Level A)

Information about success criterion 4.1.1 Parsing

Finding 35: This research focuses on the content of the website, so this success criterion has not been investigated.

4.1.2 Name, Role, Value (Level A)

Information about success criterion 4.1.2 Name, Role, Value

Finding 36: At various places on the website, for example on the homepage or on a vacature-page you find next to the 'vacature' a number of icons, for example a Euro sign or a clock. Thes SVG-images have meaning but they lack an name.Solve this with role=image and a title describing the image. Also see 1.1.1

4.1.3 Status Messages (Level AA)

Information about success criterion 4.1.3 Status Messages

Finding 37: This research focuses on the content of the website, so this success criterion has not been investigated.

Basis for this evaluation

The audit was conducted based on the evaluation method of the W3C, WCAG-EM. This is largely done manually by taking a sample. For a quickscan we use parts of this methodology. Despite all the researcher's care and experience, it is possible that a problem has not been identified. Keep in mind that in a next audit certain parts could be assessed differently because of further development of techniques and assistive software. Tools are used in the manual audit.

Sample of audited web pages

• Home:
  https://www.werkenbijcapelleaandenijssel.nl/
• Contact:
  https://www.werkenbijcapelleaandenijssel.nl/contact
• Vacatures:
  https://www.werkenbijcapelleaandenijssel.nl/vacatures
• Toegankelijkheid:
  https://www.werkenbijcapelleaandenijssel.nl/toegankelijkheid
• Formulier:
  https://www.werkenbijcapelleaandenijssel.nl/open-sollicitatie
• Content:
  https://www.werkenbijcapelleaandenijssel.nl/jouw-ontwikkeling
• Cookie:
  https://www.werkenbijcapelleaandenijssel.nl/cookie-beleid
• Vacature Formulier:
  https://www.werkenbijcapelleaandenijssel.nl/39009/medewerker-s-handhaving
• Stage Formulier:
  https://www.werkenbijcapelleaandenijssel.nl/stage

Relied upon techniques

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Resources:

• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

This report is mainly created with the online W3C report tool.