Accessibility scan https://ikvergelijk.nl/

Error count by tool

Results of the Html Codesniffer accessibility scan

Results of the accessibility scan with Axe

Results of the accessibility scan with QualWeb

Results of the accessibility scan with IBM Equal Access

Checks website accessibility with different rules.

Results of the accessibility scan with Pa11y

Pa11y uses Html Codesniffer and Axe. The results should be the same as the Codesniffer and Axe results.

Results of the accessibility scan with Sa11y

• PDF accessibility is a topic on its own. Make sure the printed version of your website is accessible. People save websites as PDF and print webpages. Check for 'widow or orphan' text. Reset styles, remove unnecessary content, reveal links and print the href of the link, hide background images. (Side note, in Acrobat you can test the accessibility of PDF files).
• See the reading order and see hidden content by disabling css. The order of the text in the html must respect the order of the visual representation of the page. Orange has this as one of their guidelines opens in new window.
• A11y.css opens in new window intends to warn developers about possible risks and mistakes that exist in HTML code.

Screen reading

Have the content of elements on a page read out loud. More or less to simulate screenreading. Get a feeling if the order and content is relevant.

• This overview of the page is created with the Guidepup 'virtual-screen-reader'.
• It lists content and elements on the page.
• Custom html (Webcomponents, like for instance: <my-own-element class="heading1" text="About Us"> </my-own-element> and shadow dom) is converted to 'normal html' with best effort.
• Iframes and content within iframes is not processed by the tool, screen readers, such as VoiceOver, are capable of accessing and reading iframes.
• SVG images are not detected and thus skipped by Virtual Screen reader, Voiceover does detect them.
• The order in which Voiceover reads information differs from the order 'Virtual screenreader' generates it (Image alt description image -vs- img image alt description -and- heading level 1 heading description -vs- heading heading description level).
• Voiceover can read all the static text and articles on a webpage. This has not yet been implemented.
• There might be duplicate content in the results if the websites hides and shows the same content for specific screensizes.
• The cookie consent on a website might block access to the html of the website.
Try to find the text which accepts or declines the consent(using incognito browser), use the text when configuring the test, and it 'removes' the popup.
• Invalid html might cause errors in the tool, if there are no results that might be the reason.
• The speaking voices that are installed and available on your computer are used, select a different one if language doesn't match the text of the website. Voiceover might/will sound different.

Note from the developer: You should always test with real screenreaders.

• Video showing the tab order. Make sure the tab order is logical.
• Buttons, links and form elements have to be in the tab order(and not jump around all over the page).
• Highlight the focussed element in a consistant and distinct way.
• This video is just showing default tab order on the page. No elements are selected or interacted with.
• There is a 300 millisecond delay between every tab keypress. Change the playback speed of the video if it is to hard to follow/watch.
• Websites that have DDoS/firewall protection (like offered by Cloudflare or Akamai) won't get recorded. They block this tool.
Allow the domain this tool runs on, to access your website in order to record users tabbing through the page.

Is language readable? Six formulas that score the readability of the text on the page. The formulas are intented to use on the English language.

• Zoomed webpage at 150, 200, 300 and 400%, to evaluate how the webpage is perceived by individuals with vision impairments who utilize zoom features.
• High contrast mode filters out colors and uses a limited set of colors to improve readability and contrast. Around 4% of active devices / around 30% of users with low vision use high contrast mode(opens in new window). Search for 'Rendering' in Chrome/Edge Devtools, change 'prefers-color-scheme' to 'dark' and 'forced colors' to 'active'.

Vision deficiency

How the webpage is seen by people with vision deficiencies.

• Showing the color and background color of elements with text content(colors defined in RGB/sRGB/HSL and okLCH are tested).
• Text with the same properties(color/backgroundcolor and element type) is grouped.
• Suggesting adjusted colors if color and backgroundcolor don't pass the WCAG contrast ratio requirements.
• This check treats all text on the page as normal text. For bigger fonts the WCAG contrast ratios are lower.
• Items with background images, or text on top of an image, should be checked against the background image on the webpage(not in this check).
• Text that is hidden for visitors is visible in the results. Screenreader only text for example.
• Filter items with AA and AAA, to only see items that don't meet the requirements for that level.

• Contrast ratio is calculated by dividing the luminance of two colors.
• The brighter color should be 4.5 or 7 times as luminous/bright as the darker color.
• The default background color in the results below is white. If the tested website uses a background color other than white combined with color opacity, the previews below may not be representative.
• Background colors created using gradients(multiple colors) may display incorrect background colors and contrast ratios in the results.
• Background colors created with blend modes and transparancy may display incorrect background colors and contrast ratios in the results.
• Colors in the hover state are not tested.
• 'Shadow DOM' is not fully parsed. The color and backgroundcolor of elements using shadow DOM is difficult to extract. Hide/ignore items that have shadow DOM.

• Scan of the full html, using html-validate.org HTML validator opens in new window.
• HTML-validate is a strict parser, following the HTML5 Content Model, a strict ruleset reduces the amount of possible bugs (as it eliminates the freedom to use the (mobile)browsers own interpretation of the rules).
• Where the 'Axe Accessibility checker' is strong on testing CSS/Color related issues on websites, the HTML-validate tool is good in testing the HTML.
• No-trailing-whitespace issues are important when if you use the html-validate check in CI(automated builds) to compile the website. Disregard it when testing website urls.
• The 'Attribute-boolean-style' setting may frequently generate false positives because browsers typically append ="" to attributes. Since this tool analyzes HTML fetched directly by a browser, it might issue warnings for HTML code that, in its original form, contains only the bare attributes without appended values.

Results of the validator.w3.org/nu opens in new window HTML validator. The World Wide Web Consortium (W3C) is maintainer of the web standards.

The html of the page. Use for element lookup and check current code.

The HTML of the page after converting Shadow DOM and webcomponents to 'normal' HTML was added as a test. To see the generated output of the conversion. The converted HTML is used in the Guidepup/Voice navigation part of the scan. Running HTML-Validate and Nu HTML Validator on the converted code might result in some extra issues, but also in lots of false positives. The issues location and selector cannot be used to investigate the issue in the html code in the browser.

• The accessibility tree of the page. Based on the DOM/Html of the page. The items in the tree are used by screenreaders.
• The items that most screenreaders discard are skipped, only 'interesting' items are available.
• No elements are interacted with, content that appears after interacting with the page is not in the initial accessibility tree.
• The tree is generated using Chrome browser emulating an iPhone 15.
• While Guidepup tests the whole html of a page, also including elements that are hidden in some devices and screensizes, this tree should only contain actual elements in the mobile rendering/viewport.
• This is not trying to emulate a screenreader, it just reads the elements on the page in the order they are in.

• Download Axe and HTML_Codesniffer results
• Download IBM Equal Access results
• Download Pa11y results
• Download QualWeb results
• Download Sa11y results
• Download Content list results
• Download Guidepup results
• Download Nu HTML Validator
• Download HTML Validate
• Download Taborder video - right click save as
• Download Vision deficiency screenshots
• Download Zoomed & high contrast screenshots
• Download Accessibility Tree