Showcase website of a consulting SME specialising in digital accessibility, with no contact form or sales process. Scope: complete site: Home, About, The Lab, Contact, Tools and Projects templates, Blog and blog post. Objective: a site and its accessibility statement conforming to WCAG 2.2 AA.
Digital accessibility means designing sites and applications usable by as many people as possible, including people with disabilities (visual, auditory, motor, cognitive). An accessible web actually benefits every user: older people, people with a limited connection, people using a mobile device or an assistive technology, and anyone browsing under less than ideal conditions.
The WCAG
The WCAG are organized into 4 principles: Perceivable, Operable, Understandable, Robust (POUR). Each success criterion is rated A, AA, or AAA. This document targets level AA conformance, the most widely referenced standard (used in most legislation, notably in Europe, the United States, and Canada).
Using this document
Fixing findings
Findings are ranked by severity. Start with critical findings, which fully block some people from using the page, before addressing major issues, then moderate, then minor. When possible, findings include a concrete fix your team (in-house or a technical provider) can apply. Once fixes are in place, retest the page (notably with keyboard tabbing and a screen reader) to confirm the issue is actually resolved.
PDF export
A direct PDF export is in the works. In the meantime, your browser's print function (Ctrl/Cmd+P) produces a faithful PDF version, with columns and colors preserved.
Why an HTML document?
This report is a self-contained HTML file rather than a standard PDF: it opens in any browser, works offline once downloaded, adapts to light or dark mode, and stays readable with a screen reader. The links on this page (shortcuts, appendices) let you jump straight to the section you need.
Appendices
The appendices hold the raw data from the automated scans run during the audit, in a technical format that isn't meant to be read as-is. They serve as evidence and reference: your technical team can check a specific result there, but you don't need to understand them to understand the report.
Interactive elements (links, buttons, form fields) show no visual keyboard focus indicator, or one that is insufficiently visible. Here, there is no visible focus around the clickable images.
▲ Major
WCAG criterion: 2.4.7 — Focus Visible
Impact: People navigating by keyboard lose track of their position on the page, making the site difficult or even impossible to use without a mouse. Here, navigation is still possible by pressing Enter (the image opens without the user having seen it was focused) or by pressing Tab once more (to reach the next button), which adds clicks and can lose the user.
Fix: Never remove the browser's focus outline without replacing it. Provide a clear indicator on every interactive element, visible against every background on the page. A well-contrasted `:focus-visible` style often does the job.
Occurrences noted: 3
Focusing on the image: the "--accent: var(--sage-500);" from root, present on the other elements, is absent.
Summary
As of now, the site achieves AA conformance on 34 of the 35 applicable criteria. The only non-conformant criterion concerns focus visibility, with a fix planned by November 2, 2026. These results follow from a diagnosis and an accessibility statement, whose results follow below.
--
I audited the HTML prototype of the site (vesperlab.dev) as part of producing its accessibility statement, between September 29, 2026 and October 1 of the same year. This diagnosis covers the complete site and its repeated elements, in the prototype's current state, and technical recommendations will be provided for the fix.
It covers the following pages: - Home, About, The Lab and Contact; - Blog, plus one blog post with its illustration; - one page from each of the Tools and Projects sections, which share the same template; using the tools listed in the resources, and the in-house tool Vesper Auditor. Tests were run with VoiceOver (macOS) on Safari, Chrome and Zen. The NVDA, JAWS and TalkBack screen readers were not tested.
Following this audit, an accessibility diagnosis and its statement were produced on October 1, as an HTML page. That page was then itself analyzed as an additional page of the site, from October 2 to 5, 2026. Its results were added to the final document, and the original diagnosis can be viewed in the follow-up section.
This site is a special case: it is our own. I audited it myself, which has its limits, but which also allowed me to improve my tools along the way, including the ones offered publicly. The original prototype was not modified between this report and its publication online. Changes may have been made to the site since publication that are not yet reflected in this statement.
-- On the positive side, the site includes many additions that build accessibility into its content.
Navigation. In the header, it lets you skip to the content (skip link) and quickly reach the accessibility options. In the footer, a site map shows the sub-menus, right next to the accessibility options: text size, the moon movement in the background, light or dark theme. On the light theme, however, the moon's shadow is more visible and the rendering less polished.
Languages. A language option switches the site to English. The company is based in Quebec (Canada), where both French-speaking and English-speaking people live: visitors' assistive technologies can therefore be set to either language. When visiting the English version, a message clearly announces that the content is not translated and offers a button to a translation tool. If the person keeps reading, the announced language is the right one.
Structure. The instructions announced to the screen reader are clear. The landmarks, headings and labels are consistent and well defined.
Images. Particular attention was paid to images, with two distinct choices: - The mockups have an empty alternative text, in favor of the surrounding context. Each one is a button, clearly named by `aria-label`, that lets you enlarge it. - In the blog, the image has an alternative text that differs from its caption, which explains its content.
--
A fix is needed for criterion 2.4.7 (Focus Visible) to reach conformance.
On the pages that display mockups (Lab > Tools; Lab > Projects) and on the About page, the focus does not appear around the images, which are buttons that enlarge them in a new window. While tabbing, the focus can be seen moving forward to the image, disappearing, then reappearing on the next element. When the focus is invisible on the image, the button still works with the Enter key and is correctly announced thanks to its `aria-label`.
The people affected are those who can see the screen and navigate by keyboard with the Tab key: for example, people with reduced mobility or low vision. They lose their place on the page.
To fix it, the same `:focus-visible` approach just needs to be applied to the clickable images in the Tools and Projects sections and in the About block. The proposed deadline is one month from this statement, i.e. November 2, 2026.
--
In the prototype's current state and after the diagnosis, the site is partially AA conformant. Several points were nevertheless noted during the diagnosis, with no direct impact on the site's accessibility. These are flags from automated scans that turned out to be false positives: - The image and label scans report an image with no alt, named "X" in the web structure scans. It is the icon of the close button of the image enlargement window. This button is accessible and works in its context. It is hidden otherwise, except during automated scans. - The mockups are buttons, so that they can be enlarged. Without clicking the button, the image's description relies on the context. The button itself is clear and correctly announced.
-- The difficulty of this diagnosis lies in objectively judging one's own product. Conversely, it is easy to assure my readers that these fixes will be made, and that this assessment, besides giving me a fresh look at my own work, helps me improve my method and my tools for the future.
End of the original diagnosis, which led to the accessibility statement. That statement was then itself audited; the results follow: --
I audited the accessibility statement of the vesperlab.dev site, from October 2 to 5, 2026. This diagnosis covers the statement alone, in HTML format, attached to the site and based on it. No accessibility barrier was found. A few optional improvement points are noted below.
The audit covers a single page, using the tools listed in the resources and the in-house tool Vesper Auditor. It was carried out under the same conditions as the site's: VoiceOver (macOS) on Safari, Chrome and Zen, without NVDA, JAWS or TalkBack.
--
On the positive side, the accessibility statement, despite a format that differs from the site's, is consistent with it. To make navigation easier and avoid long scrolling, it offers shortcuts at the top of the page, and consistently reuses the option to change the page theme.
One point of attention. The conformance tables show a very slight horizontal scroll (73 px according to 🦇 Reflow, sometimes less, or even none depending on the browser and tool used). Criterion 1.4.10 (Reflow) does not apply to data tables, which are correctly accessible and readable here. So, in my view, there is no immediate improvement possible to change this horizontal scroll without harming the readability already established for the tables. A rearrangement of the content could nevertheless be discussed internally to improve how statements read on mobile.
--
In conclusion:
As of October 1, 2026, vesperlab.dev, without its accessibility statement, is partially conformant at AA level: 34 of the 35 applicable criteria are met.
As of October 5, 2026, vesperlab.dev with its accessibility statement has the same result: 34 of 35 criteria met.
A major fix is due by November 2, 2026 to make the site conformant with criterion 2.4.7 Focus Visible. It maps to the following standards: RGAA 4.1: 7.3 and 10.7; EN 301 549: 9.2.4.7; SGQRI 008 3.0: 2.4.7.
The accessibility statement will be updated once this fix has been verified.
Conformance by criterion (WCAG 2.2)
34 criterion/criteria conformant out of 35 applicable at level AA.
Perceivable
Criterion
Name
Verdict
Note
1.1.1
Non-text Content
Conformant
Home : Empty Img Scan · About : alt ✅ · The Lab : icon = decorative ✅ · Blog : Client says: some articles will have an image preview, with its alt. · Blog post : OK on the tested page; it is the client's responsibility to ensure alt texts are present and coherent. · Contact : icons ✅ · Accessibility Statement : images with empty alt because of the context (description), would be repetitive. Good practice.
1.2.1
Audio-only and Video-only (Prerecorded)
Not applicable
1.2.2
Captions (Prerecorded)
Not applicable
1.2.3
Audio Description or Media Alternative (Prerecorded)
Not applicable
1.2.4
Captions (Live)
Not applicable
1.2.5
Audio Description (Prerecorded)
Not applicable
1.3.1
Info and Relationships
Conformant
Shared elements : div by section
1.3.2
Meaningful Sequence
Conformant
Home : Tab Order (Annex)
1.3.3
Sensory Characteristics
Conformant
Blog post : links, img, resources, summary ✅
1.3.4
Orientation
Conformant
Home : Dev Tools
1.3.5
Identify Input Purpose
Not applicable
Blog : search ≠ personal infos
1.4.1
Use of Color
Conformant
1.4.2
Audio Control
Not applicable
1.4.3
Contrast (Minimum)
Conformant
Vesper Tools : grey tag on bg 12.92:1 ; GitHub icon on bg 12.33:1 · Projects : grey tag on bg 12.92:1 ; GitHub icon on bg 12.33:1 · Blog : Tags on bg → 6:1 ; placeholder on bg = 4.85:1 in dark theme. Reco: a lighter placeholder color, like #878787 for a 4.61:1 ratio. · Blog post : "Zoom sur" 11.01:1 ; Image details (small text) on bg 7.36:1.
1.4.4
Resize Text
Conformant
Home : positive: burger menu
1.4.5
Images of Text
Conformant
Vesper Tools : Mockups without alt because of context, text is the content of the screenshot · Shared elements : Logo
1.4.10
Reflow
Conformant
Home : Responsive · Accessibility Statement : tables
1.4.11
Non-text Contrast
Conformant
Home : 14.93 : 1 · About : borders, img · Vesper Tools : icons ✅ ; mockups have a border 3.54:1 · Projects : icons ✅ ; mockups have a border 3.54:1 · Blog post : on img: client's responsibility to keep going with blog illustrations
1.4.12
Text Spacing
Conformant
1.4.13
Content on Hover or Focus
Not applicable
Operable
Criterion
Name
Verdict
Note
2.1.1
Keyboard
Conformant
Shared elements : positive: accessibility options skip to footer.
2.1.2
No Keyboard Trap
Conformant
Vesper Tools : open window → nav ✅ · Projects : open window → nav ✅
2.1.4
Character Key Shortcuts
Conformant
Blog : searchbar: enter key works as search button, only if focus is on the searchbar typing. Accessible via button.
2.2.1
Timing Adjustable
Not applicable
2.2.2
Pause, Stop, Hide
Not applicable
2.3.1
Three Flashes or Below Threshold
Not applicable
2.4.1
Bypass Blocks
Conformant
Home : Skip Link · About : skip link · The Lab : skip link · Contact : skip link
2.4.2
Page Titled
Conformant
2.4.3
Focus Order
Conformant
2.4.4
Link Purpose (In Context)
Conformant
2.4.5
Multiple Ways
Conformant
Home : Nav + Footer · Blog post : + in-blog nav
2.4.6
Headings and Labels
Conformant
Home : 🦇 Label Scan ok
2.4.7
Focus Visible
Not conformant
About : Lost at the img · Vesper Tools : no focus border around img · Projects : no focus border around img
2.4.11
Focus Not Obscured (Minimum)
Conformant
2.5.1
Pointer Gestures
Not applicable
2.5.2
Pointer Cancellation
Conformant
Home : buttons · About : toggle buttons ✅
2.5.3
Label in Name
Conformant
Vesper Tools : button to expand · Projects : button to expand · Blog : search button · Blog post : only header and footer
2.5.4
Motion Actuation
Not applicable
2.5.7
Dragging Movements
Not applicable
2.5.8
Target Size (Minimum)
Conformant
Blog : icon buttons: 44x44 · Shared elements : Nav icons 32x32. Logo footer 29x29. Footer icons 44x44.
Understandable
Criterion
Name
Verdict
Note
3.1.1
Language of Page
Conformant
3.1.2
Language of Parts
Conformant
Blog : EN version: when a blog article isn't translated, the content is in the correct language · Blog post : EN: if the article is in French, the language is well recognized. · Accessibility Statement : bilingual
3.2.1
On Focus
Conformant
3.2.2
On Input
Conformant
Home : ø field
3.2.3
Consistent Navigation
Conformant
Home : have their own page testing
3.2.4
Consistent Identification
Conformant
Home : excluding header/footer (shared elements), no coherent elements to check
The appendices are provided for informational purposes. Most are derived from the Vesper Toolkit. Some are presented as raw data in the menus below, while others are available in HTML format by clicking the link. They contain technical information that isn’t always easy to understand and do not constitute a list of things to correct. I recommend reading them with some perspective and basing your approach on the findings rather than the appendices.
lead-body, var(--text-secondary (white text on bg) Detected text size 19.0px — treated as normal text Normal text ✓ PASS AA (4.5:1) ✓ PASS AAA (7:1) Large text ✓ PASS AA (3:1) ✓ PASS AAA (4.5:1)
offer-note, var(--text-faint (grey subtext on bg) Detected text size 13.0px — treated as normal text Normal text ✓ PASS AA (4.5:1) ✗ FAIL AAA (7:1) Large text ✓ PASS AA (3:1) ✓ PASS AAA (4.5:1)
lab-teaser, var(--accent-on (black text on green card) Contrast Ratio = 9.94 : 1 WCAG Standard Small Text /Large Text, UI Components & Graphical Objects AA Pass Pass AAA Pass Pass
.button-ghost (green cards & text on bg) Contrast Ratio = 14.93 : 1 Small Text / Large Text, UI Components, & Graphical Objects AA Pass Pass AAA Pass Pass
🦇 Headings / About
Headings (11) H1 On ne devient pas aveugle en éteignant la lumière. H2 L'humain H2 L'esprit H2 L'entité H3 Ce que je publie H3 Comment je travaille
-footer- H2 Suivez-moi H2 Mes autres projets H2 Plan du site H2 Accessibilité H3 Options d'accessibilité
Landmarks (8) banner navigation — “Navigation principale” navigation — “Plan du site” main contentinfo region — “L'humain” region — “L'esprit” region — “L'entité”
13. <button> L'humain 14. <button> L'esprit 15. <button> L'entité 16. <img> Agrandir : Pauline Chevalliot, une tasse de café à la main, assise près d'une fenêtre. Son chat se tient derrière elle. [invisible] 17. <img> Agrandir : Illustration au trait blanc sur fond noir : une étagère avec une horloge, des livres, un oiseau et un miroir. [invisible] 18. <a> déclaration d'accessibilité [invisible] → hidden in "entité"
-footer- 19. <a> GitHub 20. <a> LinkedIn 21. <a> Buy Me a Coffee 22. <a> Vesper Lab 23. <a> open-source 24. <a> Accueil 25. <a> À propos 26. <a> Le Lab 27. <a> Vesper Tools 28. <a> Projets 29. <a> Blog 30. <a> Contact 31. <a> Diagnostic et déclaration d'accessibilité 32. <button> A− 33. <button> Taille par défaut 34. <button> A+ 35. <button> Sombre 36. <button> Clair 37. <button> Système 38. <button> Activé 39. <button> Désactivé 40. <button> × [invisible]
Headings (15) H1 Ce qui se conçoit dans l'ombre finit par sortir au jour. H2 Ce à quoi je tiens H3 Adopter plusieurs points de vue H3 Avoir un impact H3 Faire passer le message H3 Penser une accessibilité plurielle H2 Mes dernières idées H3 Vesper Visible H3 Vesper Compass et Sonar H3 Essayer, évoluer, recommencer
-footer- H2 Suivez-moi H2 Mes autres projets H2 Plan du site H2 Accessibilité H3 Options d'accessibilité
Landmarks (7) banner navigation — “Navigation principale” navigation — “Plan du site” main contentinfo region — “Ce à quoi je tiens” region — “Mes dernières idées”
<a> Vesper Visible Un même site, deux pages : l'une pensée ac…
<a> Vesper Compass et Sonar Le référentiel WCAG 2.2, en franç…
<a> Essayer, évoluer, recommencer Évoluer, c'est bien. Mettre…
<a> GitHub
<a> LinkedIn
<a> Buy Me a Coffee
<a> Vesper Lab
<a> open-source
<a> Accueil
<a> À propos
<a> Le Lab
<a> Vesper Tools
<a> Projets
<a> Blog
<a> Contact
<a> Diagnostic et déclaration d'accessibilité
<button> A−
<button> Taille par défaut
<button> A+
<button> Sombre
<button> Clair
<button> Système
<button> Activé
<button> Désactivé
🦇 Headings / Contact
Headings (9) H1 Contacter le Lab H2 Suivre le travail H2 Écrire H2 S'abonner au flux RSS
-footer- H2 Suivez-moi H2 Mes autres projets H2 Plan du site H2 Accessibilité H3 Options d'accessibilité
Landmarks (8) banner navigation — “Navigation principale” navigation — “Plan du site” main contentinfo region — “Suivre le travail” region — “Écrire” region — “S'abonner au flux RSS”
🦇 Headings / Blog Hub
Headings (9) H1 Blog H2 Essayer, évoluer, recommencer H2 Et si vous lisiez votre CV les yeux fermés ? H2 Accessibilité PDF : 5 conseils qui font écho H2 Suivez-moi H2 Mes autres projets H2 Plan du site H2 Accessibilité H3 Options d'accessibilité
Landmarks (6) banner navigation — “Navigation principale” navigation — “Plan du site” main contentinfo search
🦇 headings / blog article
Headings (13) H1 Et si vous lisiez votre CV les yeux fermés ? - article name
H2 Sommaire - navigation
H2 "Ah oui, ça paraît logique" H2 ATS, qu'est-ce que c'est ? H2 André et Alice cherchent une job H2 André vs Alice H2 La veste rose H2 Ressources - blog article content
H2 Suivez-moi H2 Mes autres projets H2 Plan du site H2 Accessibilité H3 Options d'accessibilité - footer
Landmarks (7) banner navigation — “Navigation principale” navigation — “Sommaire” navigation — “Plan du site” main contentinfo region — “Ressources”
<a> mon article sur l'accessibilité des documents PDF
<img> Agrandir : Graphique illustrant quelles catégories les logiciels ATS utilisent pour attribuer un score à un CV. Les critères, selon leur ordre d'impact dans le score, sont : la recherche par mot-clef, puis si le domaine est adapté au poste, si les emplois passés sont adaptés, les réussites professionnelles, si le formattage du CV est adapté pour un logiciel ATS, le langage et les informations, et les informations personnelles en dernière position. [invisible]
1. <a> Aller au contenu 2. <a> Vesper Lab 3. <a> Accueil 4. <a> À propos 5. <a> Le Lab 6. <button> Sous-menu Le Lab 7. <a> Contact 8. <a> Vesper Tools [invisible] 9. <a> Projets [invisible] 10. <a> Blog [invisible] 11. <a> en 12. <a> Options d'accessibilité - header
13. <img> Agrandir : Vesper Toolkit 14. <a> Voir Vesper Toolkit sur GitHub 15. <button> Plus de détails sur Vesper Toolkit 16. <a> toolkit.vesperlab.dev [invisible] - card 1
17. <img> Agrandir : Vesper Library 18. <a> Voir Vesper Library sur GitHub 19. <button> Plus de détails sur Vesper Library 20. <a> library.vesperlab.dev [invisible] - card 2
21. <img> Agrandir : Vesper Compass et Sonar 22. <a> Voir Vesper Compass sur GitHub 23. <button> Plus de détails sur Vesper Compass 24. <a> compass.vesperlab.dev [invisible] - card 3
25. <img> Agrandir : Vesper AC Viewer 26. <a> Voir Vesper Viewer sur GitHub 27. <button> Plus de détails sur Vesper Viewer 28. <a> la page du Viewer [invisible] - card 4
29. <a> toolkit.vesperlab.dev [invisible] 30. <img> Agrandir : Vesper Visible 31. <a> Voir Vesper Visible sur GitHub 32. <button> Plus de détails sur Vesper Visible - card 5
HEADINGS H1 Diagnosis H2 Context H2 Shortcuts H2 Methodology H3 Pages tested H2 Resources H3 Web accessibility H3 The WCAG H3 Fixing findings H3 PDF export H3 Why an HTML document? H3 Appendices H2 Findings and recommendations H3 Interactive elements (links, buttons, form fields) show no visual keyboard focus indicator, or one that is insufficiently visible. Here, there is not visible focus around the clickable images. H2 Summary H2 Conformance by criterion (WCAG 2.2) H3 Perceivable H3 Operable H3 Understandable H3 Robust H2 Appendices H2 Accessibility statement H3 Conformance status H3 Scope of the evaluation H3 Non-accessible content H3 Feedback and contact information
LANDMARKS banner navigation — "Quick navigation" main contentinfo
Manual evaluation against WCAG 2.2, carried out using one or more browsers, screen readers, and audit assistance tools.
Non-accessible content
2.4.7 — Focus Visible : About : Lost at the img · Vesper Tools : no focus border around img · Projects : no focus border around img
Remediation plan
Fix planned by November 2, 2026: adding a visible focus outline on the clickable images of the Vesper Tools, Projects and About pages.
This statement will be updated once the fix has been verified.
Feedback and contact information
To report an accessibility issue or make a request about this site's content, contact:
Pauline Cvt, gérante — contact@vesperlab.dev
This report includes the accessibility statement rating. To this end, an initial audit was conducted on the website to generate a first draft of this report. That draft was then audited itself and added to the original report.
