WCAG 2.2 AA Partial Audit of the BEL Combinatie Website Content

This sub-study pertains exclusively to the content of the website that the organization can enter or modify via the content 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 website and are evaluated in the separate technical sub-study.

Together, these two sub-studies constitute the complete evaluation of the website.

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. Within this sample, the accessibility issues identified were described as specifically as possible. 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.

https://www.belcombinatie.nl/samenstelling
The page contains portrait photos of the board members. Each image has an empty alt attribute (alt=""), which means that assistive technology treats the photos as decorative. As a result, users of assistive technology, such as screen readers, are unaware that there is a portrait photo of a board member on the page.

Advice

Provide a text alternative for each portrait photo that indicates it is a portrait of the person in question, for example, alt="Portrait of Roland van Benthem".

https://www.belcombinatie.nl/bel-model
The page features an infographic that visually illustrates the BEL cooperation model. The infographic illustrates the administrative relationships between the municipal councils, the municipal executive boards, the BEL board, the working organization, and the residents of Blaricum, Eemnes, and Laren. This information is not accessible to users of assistive technology, such as screen readers. The current text alternative for the image is “BEL Combinatie model,” which does not convey the information contained in the infographic. The text above the infographic describes only the composition of the BEL board and the role of the General Director; the other layers and their mutual relationships are not mentioned.

Advice

Two things are needed for a complex infographic:

1. Provide a brief text description for the infographic itself in the alt attribute that explains what the image is, for example, alt="Infographic of the BEL collaboration model".
2. In addition, include the content of the infographic in text form on the page, for example as a list or descriptive text directly below the infographic. This ensures that users who cannot view the infographic receive the same information as those who can.

https://www.belcombinatie.nl/organogram
The page contains an infographic showing the organizational chart of the BEL Combinatie. The image has an empty alt attribute (alt=""), which causes assistive technology to treat the image as decorative. As a result, users of assistive technology, such as a screen reader, are unaware that there is an organizational chart on the page. The content of the organizational chart itself is already presented in text form on the page.

Advice

Provide a brief text description of the image in the alt attribute that explains what the image is, for example, alt="Infographic showing the organizational chart of the BEL Combinatie".

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
At the top of the following PDF document is a combined image containing the logos and names of the municipalities of Blaricum, Eemnes, and Laren, as well as the BEL Combinatie logo. These logos are not tagged as images and are therefore ignored by assistive software (such as a screen reader).

Advice

On page 1 of the document, this image must be tagged and provided with an appropriate text alternative. This is not necessary on the following pages.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
On page 16, under “Approved,” there is a screenshot of an approved agenda from the administrative decision-making system. The image lacks alt text. As a result, the information in this image is not accessible to users of assistive technology, such as a screen reader.

Advice

The image is a screenshot of information that would be better presented in text form. Consider removing the image and including the agenda information in text form on the page. If the image must be retained, provide it with descriptive alt text that summarizes the content, for example: alt="Screenshot of the approved agenda with decisions by the AB, DB, and Executive Management Team regarding the privacy policy".

https://www.belcombinatie.nl/
In the footer, the headings “Contact” and “Opening Hours” are further emphasized using a `strong` element (an HTML element used to emphasize text within body content). A heading inherently carries meaning and emphasis. The `strong` element does not add any additional meaning here and does not belong semantically within headings.

Advice

Remove the `strong` element from the “Contact” and “Opening Hours” headings. You can control the visual formatting of headings, such as bold text, using CSS.

• https://www.belcombinatie.nl/
• https://www.belcombinatie.nl/privacyverklaring

In several places on the website, groups of related items are not formatted as a true list, but as separate lines or paragraphs:
The footer of the homepage contains contact information (phone, email, contact form, press inquiries, international phone number) and the bottom navigation links “About this website”, “Accessibility,” “Sitemap,” and “Privacy Statement” as separate lines separated by a line break (br element).
On the Privacy Statement page, under the h3 heading “How can you exercise these rights?”, there are three items in a single paragraph, preceded by a bullet point (•) and separated by line breaks (br element).
On the same page, the three buttons “Municipality of Blaricum,” “Municipality of Eemnes,” and “Municipality of Laren” link to the privacy statements of the three municipalities, each in a separate paragraph (p element) rather than in a single list.
Visually, these items look like a list, but in the code they are not formatted as a list. As a result, users of assistive technology, such as a screen reader, do not know that the items belong together or how many items the group contains.

Advice

Turn these groups into a proper list (an `ul` element with `li` elements for each item). You can control the list's visual layout—such as hiding the bullet points or adjusting the spacing between items—using CSS.

• https://www.belcombinatie.nl/
• https://www.belcombinatie.nl/inkoop-en-aanbesteding

In several places on the website, text is formatted using an em element:
In the footer under "Contact," the text "From abroad" appears as a label above a phone number.
On the "Procurement and Tendering" page, the document title "The Gooi and Vecht Region Procurement and Tendering Policy 2022" is in italics.
The em element is intended to add extra emphasis to a word within a running sentence, similar to how you might pronounce a word slightly louder or more emphatically when speaking. In both cases, the em element is used for visual formatting (italics), even though it is intended to indicate that semantic emphasis.

Advice

Remove the `em` element in these places. If you want the text to appear in italics, you can style it using CSS.

https://www.belcombinatie.nl/vergaderoverzicht
The page contains a table listing the board meeting dates. The table consists of a single column and lacks a header cell (a element). A table is intended to relate data in rows and columns to one another. With a single column, this is not the case, and the content is essentially a list of dates. Assistive software currently identifies the content as a table with 9 rows and 1 column, which is misleading for the user.

Advice

Turn the dates into a list (an `ul` element with one `li` element per date). You can control the visual formatting—such as borders or boxes around each date—using CSS.

https://www.belcombinatie.nl/inkoop-en-aanbesteding
On the page, the main heading “Procurement and Tendering” (an h1 element) is immediately followed by an h3 heading “Downloading and Opening a Document”. There is no intermediate h2 heading between the h1 and this h3. As a result, a level in the heading hierarchy is skipped. This makes the page structure illogical for users of assistive technology who navigate using headings.

Advice

Make sure that headings follow a hierarchical order without skipping any levels. Change the heading “Downloading and opening a document” to an h2 instead of an h3, or place this text under an existing h2 (for example, as part of a section on documents).

https://www.belcombinatie.nl/organogram
On the page, under the h2 heading “Distribution of Domains and Teams within the BEL Consortium,” there is a collapsible section. Within that section, the four subheadings “Physical Domain,” “Society Domain,” “Operations Domain,” and “Public Space Domain” are formatted as h2 headings. Since they are subordinate to the h2 heading above them, they should be h3 headings. This makes the heading hierarchy illogical and prevents users of assistive software from clearly seeing which headings belong to which section.

Advice

Make the four domain headings (“Physical Domain,” “Society Domain,” “Operations Domain,” “Public Space Domain”) h3 headings, so that they are subordinate to the h2 heading “Distribution of Domains and Teams within the BEL Consortium.”

https://www.belcombinatie.nl/privacyverklaring
On the Privacy Statement page, the first paragraph (the introductory text that begins with “At BEL Combinatie, we frequently work with personal data...”) is entirely within a `strong` element. The `strong` element is intended to give extra emphasis to a word or phrase within a text, not to visually display an entire paragraph in bold.

Advice

Remove the `strong` element around the introductory paragraph. Instead, use the "Intro" field in the CMS to format the text in bold.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
The PDF “General Privacy Policy” contains two tables: a “Version Control” table on page 2 and a table listing target groups and their relevance to the privacy policy in section 4.2. In both tables, all cells are marked as TD (data cells); no TH elements (header cells) have been used. As a result, users of assistive technology, such as a screen reader, cannot determine the relationship between header cells and data cells, and the tables are read aloud without it being clear what the columns and rows mean.

Advice

Mark the top row of each table as column headers by tagging the cells as TH. Also, mark the first cell of each data row as a row header by tagging it as TH as well.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
In the PDF “General Privacy Policy,” the title on page 1 is not tagged as an H1 heading. The title consists of multiple lines (“General Privacy Policy,” “Municipalities of Blaricum, Eemnes, and Laren &,” “Joint Arrangement BEL Combinatie”), each of which is contained in a separate P element (paragraph). The tag structure does contain an empty H1 element, but it has no text.

Advice

Mark the document title as a single H1 element. Place the lines “General Privacy Policy,” “Municipalities of Blaricum, Eemnes, and Laren,” and “Joint Arrangement BEL Combinatie” together in a single H1 tag, or make “General Privacy Policy” the H1 and the remaining lines a subordinate element (such as a subtitle).

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/Besluitenlijst%20BEL%20Bestuur%2019%20januari%202026.pdf?cb=-s1aMRZu
The following PDF document is not tagged. This means that no structure has been specified in the file using tags. As a result, assistive software (such as a screen reader) cannot determine what constitutes headings, lists, and the like, and will ignore images.

Advice

If the file is tagged correctly, assistive software can better determine its structure and relationships. For example, it can then announce that certain sections are headings. In many cases, this problem can be resolved by re-exporting the document from the source file (usually in Word or InDesign) to PDF, but this time including tags or labels.
Because the tags are currently missing, other success criteria such as 1.1.1 and 1.3.2 cannot be assessed. Therefore, be aware that resolving this issue may create new accessibility problems.

https://www.belcombinatie.nl/bel-gemeenten
On the page, the three municipalities (Blaricum, Eemnes, and Laren) are displayed side by side in three columns. Each column contains, in sequence, a heading, an introductory text, an image, a detailed description, and a button linking to the municipality’s website. In the code, this information is structured not by column but by row. In the code, the three headings and their introductory text appear one after another first, followed by an image for each municipality followed by the detailed text, and finally the three buttons one after another. For users of assistive technology, such as a screen reader, this makes it difficult to follow the relationship between the heading, image, text, and button for each municipality. The order in the code does not match the visual order.

Advice

Group the information for each municipality in the code: header, introduction, image, detailed text, and button, one after the other. You can control the visual three-column layout using CSS. In the CMS, this can be achieved by selecting the “3 columns” paragraph type; this places the content for each column together in the code. This ensures that the order in the code matches the visual order.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
In the “General Privacy Policy” PDF, an image (Figure element) appears in the tag structure on page 1. Visually, this image does not appear until page 16 (the last page, under “Adopted”). For users of assistive technology (such as a screen reader), this means that the reading order jumps from page 1 to page 16 and then back.

Advice

Place the Figure element in the correct location within the tag structure—specifically on page 16 under “Approved”—so that the reading order matches the visual order.

https://www.belcombinatie.nl/organogram
Below the image of the organizational chart on the page, the text reads: “(Click on the image for a larger view).” The instruction does not specify which image it refers to. For visual users, this is not a problem: they can see the image of the organizational chart directly above the text. Screen reader users do not hear the image because the alt attribute is empty, so the image is skipped. They only hear the instruction and therefore do not know that there is an image on the page, let alone which image is meant.

Advice

Write the instructions so that it is clear which image is being referred to. For example: “Open the larger view of the organizational chart.”

https://www.belcombinatie.nl/bel-model
This success criterion has been tested in high-contrast mode. In the infographic of the BEL collaboration model, white text (#FFFFFF) appears on a gray background (#949494). The contrast ratio is 2.85:1. This does not meet the WCAG standard of at least 3:1 for large text (and 4.5:1 for normal text).

Advice

Increase the contrast between the text and the background in the infographic to at least 3:1 for large text (or 4.5:1 for normal text), for example by making the background color darker.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
The PDF “General Privacy Policy” contains text in several places with an insufficient contrast ratio against the white background:
The date “October 2019” on page 1 has text color #8DB3E2 on a white background. The contrast ratio is 2.2:1.
The H2 subheadings (such as “3.1. European privacy legislation” on page 6) have a text color of #4F81BD on a white background. The contrast ratio is 4:1, at a font size of 12.96 pt.
For normal text, WCAG 1.4.3 requires a contrast ratio of at least 4.5:1. Neither example meets this standard.

Advice

Adjust the text colors in the document so that they have a contrast ratio of at least 4.5:1 against the white background. For example, use a darker shade of blue. Check the contrast using a Color Contrast Analyzer.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
On page 16 of the PDF “General Privacy Policy,” under “Approved,” there is a screenshot of an approved agenda from the administrative decision-making system. This image contains information that is fully displayed as text (agenda items, decisions, initials, dates, and names). Text may only be used as an image if it is essential for the display. That is not the case here: the text could also be included as plain text in the document. As a result, the text cannot currently be searched, selected, copied, or adjusted in size or color by users who need to do so.

Advice

Remove the screenshot and include the diagnostic information as plain text in the document. That way, users can search, select, and zoom in on the text, and customize it to their own preferences.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/nota_algemeen_privacybeleid_bel.pdf?cb=to-lhMTu
The PDF has no title. As a result, PDF readers display the file name in the tab and title bar. As a result, users of assistive technology, such as a screen reader, hear the file name instead of a descriptive document title.

Advice

In the PDF's document properties (File > Properties > Description), enter a descriptive title. It is best to do this in the source file (for example, in Word or InDesign) before exporting to PDF. In addition, set the advanced display settings so that the document title is shown instead of the file name (File > Properties > Initial View > Show: Document Title).

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/Besluitenlijst%20BEL%20Bestuur%2019%20januari%202026.pdf?cb=-s1aMRZu
The PDF does have a title (“Anonymized document”), but it does not adequately describe the document’s content. As a result, users of assistive technology, such as a screen reader, do not hear a descriptive document title.

Advice

Set a descriptive title that reflects the document's content. It is best to do this in the source file (such as Word or InDesign) before exporting to PDF.

https://www.belcombinatie.nl/organogram
On the page, the BEL Combinatie organizational chart includes a link to a larger version of the image. The image lacks alt text, meaning the link does not have an accessible name. As a result, users of assistive technology, such as a screen reader, do not know that there is a link or where it leads. This issue also falls under Success Criterion 4.1.2 (Name, Role, Value).

Advice

Give the link an accessible name that describes its destination. There are two ways to do this: provide the image with an appropriate alt attribute (for example, alt="Organization chart of the BEL Combinatie, larger view"), or add an aria-label attribute to the a element itself.

https://www.belcombinatie.nl/organogram
On the page, the BEL Combinatie organizational chart includes a link to a larger version of the image. The image lacks alt text, so the link does not have an accessible name. As a result, assistive technology, such as a screen reader, cannot announce the link properly. This issue also falls under Success Criterion 2.4.4 (Link Target in Context).

Advice

Give the link a descriptive name. There are two ways to do this: either provide the image with an appropriate alt attribute (for example, alt="Organization chart of the BEL Combinatie, larger view"), or add an aria-label attribute to the a element.

https://www.belcombinatie.nl/bel-gemeenten
The page features three atmospheric images accompanying the introductions to the municipalities of Blaricum, Eemnes, and Laren: a photo of a flock of sheep on the Westerheide, a photo of the pumping station in the Eemnes polder, and a photo of the Brinkhuis in Laren. The images include alt text. However, the content of these photos does not add any information not already found in the surrounding text; they are illustrative images. Assistive software currently announces these images and reads the alt text aloud, even though they are essentially decorative.

Advice

Give the three stock images an empty alt attribute (alt=""). This causes assistive technology to recognize them as decorative elements and skip over them, making the text easier to read for screen reader users.

https://cuatro.sim-cdn.nl/belcombinatie45904b/uploads/Besluitenlijst%20BEL%20Bestuur%2019%20januari%202026.pdf?cb=-s1aMRZu
The following PDF document is not tagged. As a result, informational images are not marked as "Figure" and do not have text alternatives. As a result, people who are blind and use a screen reader do not receive this information. Because the document is not tagged, it is impossible to determine whether images have been processed correctly. Consequently, this is not currently flagged as an issue. Once the document is tagged, it may turn out that informational images are missing or have been tagged incorrectly.

Advice

Make sure the PDF includes a complete tag structure, distinguishing between informational and decorative images.

• Tag informational images as "Figure" and provide them with a short, descriptive text alternative.
• Mark decorative images as artifacts so that screen readers ignore them.

https://www.belcombinatie.nl/organogram
This success criterion was tested in high-contrast mode. In the organizational chart infographic, white text (#FFFFFF) appears on gray buttons of varying shades. The contrast ratio is not sufficient on all buttons:
On the light gray buttons (#C1C1C1), the contrast ratio is 1.74:1.
On the medium gray buttons (#7F7F7F and #828282), the contrast ratio is 3.67:1 and 3.54:1.
For normal text, a contrast ratio of at least 4.5:1 is required, and for large text, at least 3:1. The light gray buttons do not meet either standard.
This finding is not considered a failure, because the information from the infographic is also provided in text form on the same page. Users who cannot read the text in the infographic clearly thus have an alternative.

Advice

Consider increasing the contrast in the infographic to at least 4.5:1 for normal text (or 3:1 for large text).

The website offers 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.

This may cause contrast issues in the standard version. These issues have not been further evaluated.

Advice

We recommend ensuring that the standard version also includes sufficient color contrast in all text. This improves the website’s accessibility for visitors with visual impairments.

Texts with sufficient color contrast are also easier for all readers to read. This makes reading less taxing, requires less energy, and is (subconsciously) perceived as more enjoyable. As a result, readers are more likely 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).

A high-contrast version is available on the website. It 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 with graphic elements in the standard version. These have not been further evaluated.

Advice

We recommend ensuring that the standard version also provides sufficient contrast for graphic elements, such as icons, buttons, and form fields. This improves the website’s accessibility for visitors with visual impairments.
The high-contrast version can then be used to provide “enhanced contrast.”

https://www.belcombinatie.nl/
In the footer under "Contact," there is a link labeled "Press inquiries?". A question mark at the end of a link text is unusual and can be confusing for users of assistive technology, as it appears to be a question rather than a link to a page. The link destination itself is clear in this context (the contact section of the footer).

Advice

Replace the link text “Press inquiries?” with a phrase that does not include a question mark and describes the link’s destination, such as “Press inquiries,” “Information for the press,” or “Go to press information.”