<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Chaàbane LEMARED</title>
    <description>The latest articles on DEV Community by Chaàbane LEMARED (@chabane_lemared_4cf92157).</description>
    <link>https://dev.to/chabane_lemared_4cf92157</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3872549%2F75c3be73-1734-4552-a314-e0eff1dea0b5.png</url>
      <title>DEV Community: Chaàbane LEMARED</title>
      <link>https://dev.to/chabane_lemared_4cf92157</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/chabane_lemared_4cf92157"/>
    <language>en</language>
    <item>
      <title>How I automated 62% of Europe's RGAA accessibility criteria</title>
      <dc:creator>Chaàbane LEMARED</dc:creator>
      <pubDate>Fri, 10 Apr 2026 23:15:01 +0000</pubDate>
      <link>https://dev.to/chabane_lemared_4cf92157/how-i-automated-62-of-europes-rgaa-accessibility-criteria-3pc3</link>
      <guid>https://dev.to/chabane_lemared_4cf92157/how-i-automated-62-of-europes-rgaa-accessibility-criteria-3pc3</guid>
      <description>&lt;p&gt;In Europe, web accessibility became mandatory in June 2025 under the &lt;strong&gt;European Accessibility Act (EAA)&lt;/strong&gt;. But the EU doesn't define &lt;em&gt;how&lt;/em&gt; to test — each country has its own standard. The French standard is &lt;strong&gt;RGAA 4.1&lt;/strong&gt;: 106 criteria, published by the government, with precise test procedures.&lt;/p&gt;

&lt;p&gt;Every tool out there (Axe, WAVE, Lighthouse) speaks WCAG. None of them map to RGAA natively.&lt;/p&gt;

&lt;p&gt;So I built one.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem: RGAA ≠ WCAG
&lt;/h2&gt;

&lt;p&gt;RGAA 4.1 is &lt;em&gt;based on&lt;/em&gt; WCAG 2.1 AA, but it goes further:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;106 criteria&lt;/strong&gt; instead of 78, with specific test methodology&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;13 thematic areas&lt;/strong&gt; (images, colors, links, forms, navigation...)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Precise test procedures&lt;/strong&gt; — not just "what to achieve" but "how to verify"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When a public agency or a company under the EAA needs an audit, they need RGAA — not WCAG. And there was no SaaS tool for that.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's automatable?
&lt;/h2&gt;

&lt;p&gt;Out of 106 criteria, &lt;strong&gt;66 (62%) can be tested automatically&lt;/strong&gt;. The best coverage by theme:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mandatory elements&lt;/strong&gt; — 9/10 automatable (90%) — missing &lt;code&gt;lang&lt;/code&gt;, invalid HTML, page titles&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Navigation&lt;/strong&gt; — 8/11 automatable (73%) — skip links, landmarks, consistent nav&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Structure&lt;/strong&gt; — 3/4 automatable (75%) — heading hierarchy, lists, ARIA landmarks&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Colors&lt;/strong&gt; — 2/3 automatable (67%) — contrast ratios&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Forms&lt;/strong&gt; — 7/13 automatable (54%) — labels, autocomplete, error messages&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Images&lt;/strong&gt; — 5/9 automatable (56%) — alt text, decorative images&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The lowest: &lt;strong&gt;Multimedia&lt;/strong&gt; at 23% — most video/audio checks need human judgment.&lt;/p&gt;

&lt;p&gt;The highest ROI comes from &lt;strong&gt;mandatory elements&lt;/strong&gt; — 90% automatable. Missing &lt;code&gt;lang&lt;/code&gt; attributes, invalid HTML, missing page titles. Easy wins that affect every single page.&lt;/p&gt;

&lt;h2&gt;
  
  
  The architecture
&lt;/h2&gt;

&lt;p&gt;I used &lt;strong&gt;axe-core&lt;/strong&gt; as the detection engine, but added a critical layer on top:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. RGAA mapping
&lt;/h3&gt;

&lt;p&gt;Every axe-core rule is mapped to one or more RGAA criteria. This isn't a simple 1:1 — some WCAG success criteria map to multiple RGAA criteria, and vice versa.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example: axe rule "image-alt" maps to RGAA criteria 1.1 AND 1.2&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image-alt&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;rgaaCriteria&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1.1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1.2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="nx"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Images&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nx"&gt;testMethod&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;automatic&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The mapping is stored in a database with full referential integrity — criteria, themes, test methods, and the relationship to WCAG success criteria.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Pattern detection — the killer feature
&lt;/h3&gt;

&lt;p&gt;This is what makes the tool actually useful. Instead of reporting:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"287 images without alt text across 50 pages"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;...it detects &lt;strong&gt;patterns&lt;/strong&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Your product images use the same component — fixing the alt attribute in this one place resolves 287 violations across 50 pages."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;One fix = hundreds of pages fixed.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This is the difference between a 500-line CSV dump and an actionable plan. The pattern detection works by comparing the DOM structure of each violation — same CSS selector, same component hierarchy, same violation type → same pattern.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Multi-page scanning
&lt;/h3&gt;

&lt;p&gt;Real audits aren't one page. A proper RGAA audit requires testing a representative sample: homepage, contact page, login flow, content pages.&lt;/p&gt;

&lt;p&gt;The tool:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Crawls the site and discovers pages&lt;/li&gt;
&lt;li&gt;Detects page templates via &lt;strong&gt;DOM fingerprinting&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Avoids scanning duplicate pages (e.g., 200 product pages with the same template → scan one, extrapolate)&lt;/li&gt;
&lt;li&gt;Supports &lt;strong&gt;authenticated pages&lt;/strong&gt; (dashboard, admin, settings)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The stack
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Nuxt 3&lt;/strong&gt; — SSR for marketing, SPA for dashboard&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;axe-core + Puppeteer&lt;/strong&gt; — headless accessibility scanning&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prisma + PostgreSQL&lt;/strong&gt; — audit data, users, subscriptions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Stripe&lt;/strong&gt; — billing (Free → Enterprise tiers)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;OpenAI&lt;/strong&gt; — AI-powered fix suggestions adapted to the detected framework (Vue, React, Angular, WordPress)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  CI/CD integration
&lt;/h2&gt;

&lt;p&gt;An audit tool is only useful if it's part of the development workflow:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub Action&lt;/strong&gt; — runs RGAA checks on every PR:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;rgaaudit/action@v1&lt;/span&gt;
  &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ env.STAGING_URL }}&lt;/span&gt;
    &lt;span class="na"&gt;threshold&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="m"&gt;75&lt;/span&gt;
    &lt;span class="na"&gt;api-key&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.RGAA_KEY }}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the score drops below the threshold, the PR is blocked.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;REST API&lt;/strong&gt; — for Jenkins, GitLab CI, or custom pipelines:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-X&lt;/span&gt; POST https://rgaaudit.fr/api/ci/scan &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"X-API-Key: sk_..."&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s1"&gt;'{"url": "https://staging.mysite.com"}'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;MCP Server&lt;/strong&gt; — run audits from Claude Code, Cursor, or Copilot:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx @rgaaudit/mcp-server
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; rgaa_audit https://mysite.com
&lt;span class="c"&gt;# Score RGAA: 72/100&lt;/span&gt;
&lt;span class="c"&gt;# Patterns detected: 6&lt;/span&gt;
&lt;span class="c"&gt;# Priority fixes: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What I learned
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;62% automation is the sweet spot.&lt;/strong&gt; It handles the repetitive checks (contrast, alt text, heading structure) and frees up expert time for the 38% that requires human judgment — semantic relevance, keyboard navigation quality, screen reader experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pattern grouping changes everything.&lt;/strong&gt; Developers don't want a list of 500 violations. They want to know: "Fix this one component, and 200 pages are fixed." That's the insight that turns an audit report into an action plan.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Local standards are a real market gap.&lt;/strong&gt; Every international tool speaks WCAG. Europe has 27 countries, many with their own accessibility standards. There's room for localized tools that speak the language auditors and regulators actually use.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;The tool is live at &lt;a href="https://rgaaudit.fr" rel="noopener noreferrer"&gt;rgaaudit.fr&lt;/a&gt; — free tier available (3 audits/month, 15 pages). The MCP server is on npm: &lt;code&gt;@rgaaudit/mcp-server&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;If you're dealing with European accessibility requirements, or just curious about how RGAA compares to WCAG, I'd love your feedback.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;The European Accessibility Act is in effect since June 2025. If you sell digital products or services in the EU, accessibility compliance is now mandatory.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>a11y</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
