{"id":15312,"date":"2023-02-22T12:23:59","date_gmt":"2023-02-22T10:23:59","guid":{"rendered":"https:\/\/web-mate.gr\/accessible-website-wcag-espa\/"},"modified":"2026-10-29T13:36:44","modified_gmt":"2026-10-29T11:36:44","slug":"accessible-website-wcag-espa","status":"publish","type":"post","link":"https:\/\/web-mate.gr\/en\/accessible-website-wcag-espa\/","title":{"rendered":"Accessible Websites with WCAG 2.1 AA &#038; 2.2 for NSRF (ESPA) Programmes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A website for people with disabilities must comply with the WCAG 2.1 AA standard, which is the legal requirement under European Directive 2016\/2102 and for NSRF (ESPA) funding programmes. Since October 2023, WCAG 2.2 has also been in force (recommended for future-proof projects). WCAG 2.0 is now outdated and does NOT cover modern requirements (mobile, cognitive disabilities, low vision). In this guide you will find: the 4 POUR principles, a comparison of the A\/AA\/AAA levels, a 12-step checklist, legal obligations and fines, and how to run an audit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>July 2026 update:<\/strong> for private businesses, accessibility is now <strong>mandatory since 28\/6\/2025<\/strong> under Greek Law 4994\/2022, with fines of up to \u20ac100,000. See the details: <a href=\"https:\/\/web-mate.gr\/en\/website-accessibility-law-4994-2022-fines\/\">Fines of up to \u20ac100,000: what applies to websites and e-shops<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Need your site checked and fixed? See our <a href=\"https:\/\/web-mate.gr\/en\/yphresies\/website-accessibility-wcag\/\">WCAG 2.1 AA Website Accessibility<\/a> service or ask for a quote.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In all <strong>NSRF (ESPA)<\/strong>  funding programmes, a basic requirement is that any website built must comply with the <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener\">WCAG 2.1 AA standard for people with disabilities<\/a>.  &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Having such a website makes access easier for people with disabilities, who can navigate your website easily. A website built for easy access by <strong>people with disabilities<\/strong> doesn&#8217;t have to be ugly or have fewer features than other websites that don&#8217;t follow the standards.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, the standards set certain limits that stop web designers from giving free rein to their imagination, yet even within these limits websites can look stunning. <\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1738238062965\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What are the requirements for an accessible website under the WCAG 2.1 AA standard<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The answer is complex, but correct contrast, error-free code and a website that passes the WAVE (WebAIM) check at AA level are a good start on the road to success. <\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">NSRF (ESPA) or LEADER programmes usually require websites to be at least bilingual. Take great care, because every page of the website must pass the accessibility check with the https:\/\/wave.webaim.org\/ tool  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All WCAG criteria are grouped into 4 principles. Every WCAG-related page MUST include them.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Principle<\/strong><\/th><th><strong>Meaning<\/strong><\/th><th><strong>Example criterion<\/strong><\/th><\/tr><\/thead><tbody><tr><td>Perceivable<\/td><td>Information must be perceivable<\/td><td>Alt text on images, captions on video, color contrast 4.5:1<\/td><\/tr><tr><td>Operable<\/td><td>The page must be navigable without a mouse<\/td><td>Keyboard navigation, enough time, no seizure-inducing content<\/td><\/tr><tr><td>Understandable<\/td><td>Content and controls must be clear<\/td><td>Plain language, predictable navigation, error identification<\/td><\/tr><tr><td>Robust<\/td><td>Compatibility with assistive technologies<\/td><td>Valid HTML, correct ARIA labels, name\/role\/value for every element<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A vs AA vs AAA Levels<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Level<\/strong><\/th><th><strong>What it means<\/strong><\/th><th><strong>When you need it<\/strong><\/th><\/tr><\/thead><tbody><tr><td>Level A<\/td><td>Basic: minimum compliance<\/td><td>Not enough for NSRF (ESPA) or the public sector<\/td><\/tr><tr><td>Level AA<\/td><td>Industry standard: required by the EU\/NSRF (ESPA)<\/td><td>\u2705 All private and subsidised websites<\/td><\/tr><tr><td>Level AAA<\/td><td>Highest compliance: not practical for everything<\/td><td>Government, healthcare, education<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Examples of websites built for people with disabilities<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s better to talk through examples and give an idea of what we mean when we call a website beautiful or ugly. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/02\/istoselida-site-gia-espa-amea.jpg\" alt=\"- Web-Mate\" class=\"wp-image-1652\" title=\"- Web-Mate\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The website for <a href=\"https:\/\/sunsetperamos.gr\/\" target=\"_blank\" rel=\"noopener\">Sunset Peramos rooms to let<\/a> is objectively a beautiful website with an availability enquiry feature, and at the same time it meets the <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener\">specifications for people with disabilities.<\/a> We should also point out that this website is bilingual, optimised for mobile devices and built on <a href=\"https:\/\/web-mate.gr\/en\/wordpress-website-development\/\">wordpress<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/02\/site-istoselida-espa-amea.jpg\" alt=\"- Web-Mate\" class=\"wp-image-1653\" title=\"- Web-Mate\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Another example of a website built to these standards is the website of <a href=\"https:\/\/lizakalfa.gr\/\" target=\"_blank\" rel=\"noopener\">Liza Kalfa, a psychologist in Katerini<\/a>. Her website is accessible to people with disabilities, yet its look and functionality remain at a high level. Despite the limits set by the standards, this site has nothing to envy in other psychologists&#8217; <strong>websites<\/strong> .<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What does a site need to meet the rules\/guidelines for people with disabilities?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There are&nbsp;<strong>3 WCAG levels<\/strong>:&nbsp;A, AA and AAA. For your website to reach the highest level, it must do the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide text alternatives for non-text content. <\/li>\n\n\n\n<li>Provide captions and other alternatives for multimedia. <\/li>\n\n\n\n<li>Create content that can be presented in different ways, including by assistive technologies, without losing its meaning. <\/li>\n\n\n\n<li>Make it easier for users to see and hear content. <\/li>\n\n\n\n<li>Make all functionality available from a keyboard. <\/li>\n\n\n\n<li>Give users enough time to read and use the content. <\/li>\n\n\n\n<li>Do not use content that causes seizures. <\/li>\n\n\n\n<li>Help users navigate and find content. <\/li>\n\n\n\n<li>Make text readable and understandable. Make content appear and operate in predictable ways.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Some of the basics a website must follow to comply with the rules above are valid HTML with no errors and strong colour contrast. If the site is going to be checked for NSRF (ESPA) or LEADER funding, the authorities provide a list of tools that must be used to produce certificates stamped by the website&#8217;s developer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">NSRF (ESPA) compliance checklist<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>#<\/strong><\/th><th><strong>WCAG 2.1 AA requirement<\/strong><\/th><th><strong>What it means in practice<\/strong><\/th><\/tr><\/thead><tbody><tr><td>1<\/td><td>Color contrast \u2265 4.5:1 (text)<\/td><td>No light grey on white<\/td><\/tr><tr><td>2<\/td><td>Alt text on all images<\/td><td>Descriptive, not &#8220;image1.jpg&#8221;<\/td><\/tr><tr><td>3<\/td><td>Keyboard navigation<\/td><td>All controls reachable with Tab<\/td><\/tr><tr><td>4<\/td><td>Visible focus indicator<\/td><td>You can see where you are when using the keyboard<\/td><\/tr><tr><td>5<\/td><td>Semantic HTML (h1, h2, nav, main)<\/td><td>No &#8220;divitis&#8221;<\/td><\/tr><tr><td>6<\/td><td>ARIA labels where needed<\/td><td>On custom controls \/ icons<\/td><\/tr><tr><td>7<\/td><td>Form labels &amp; error messages<\/td><td>Every input has a label, errors are clear<\/td><\/tr><tr><td>8<\/td><td>Captions\/transcripts on video<\/td><td>Subtitles on all media content<\/td><\/tr><tr><td>9<\/td><td>Resizable text up to 200%<\/td><td>Layout doesn&#8217;t break when zoomed<\/td><\/tr><tr><td>10<\/td><td>Reflow at 320px width<\/td><td>Mobile-friendly, no horizontal scroll<\/td><\/tr><tr><td>11<\/td><td>Lang attribute in the HTML<\/td><td>&lt;html lang=&#8221;el&#8221;&gt;<\/td><\/tr><tr><td>12<\/td><td>Accessibility statement page<\/td><td>States the level of compliance<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to make your website WCAG 2.1 AA compliant in 12 steps<\/h2>\n\n\n<div id=\"rank-math-howto\" class=\"rank-math-block\" >\n<div class=\"rank-math-howto-description\">\n\n<p>Step-by-step checklist for WCAG 2.1 AA compliance, the legally required standard for NSRF (ESPA) programmes and public-sector websites in Greece. Covers color contrast, keyboard navigation, semantic HTML, ARIA labels, mobile reflow and the accessibility statement.<\/p>\n\n<\/div>\n<p class=\"rank-math-howto-duration\"><strong>PT4W<\/strong> <span><\/span><\/p>\n<div class=\"rank-math-steps \">\n<div id=\"howto-step-1778058233290\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Color contrast audit<\/h3>\n<div class=\"rank-math-step-content \"><p>Check that all text on the page has a contrast ratio of at least 4.5:1 against the background (3:1 for large text over 18pt). Use the WebAIM Contrast Checker (webaim.org\/resources\/contrastchecker\/) to test colours. Fix every case where light grey text sits on a white background.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058244188\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Alt text on all images<\/h3>\n<div class=\"rank-math-step-content \"><p>Add descriptive alt text to every image on the site. The alt text should describe what the image shows and what it does. For decorative images with no meaning, use an empty alt=&#8221;&#8221;. Avoid generic text such as &#8220;image1.jpg&#8221; or &#8220;banner.png&#8221;. Pay particular attention to logos, icons and product images.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058254960\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Keyboard navigation<\/h3>\n<div class=\"rank-math-step-content \"><p>Try navigating the whole page using only the keyboard (Tab to move, Enter or Space to click). All interactive elements (links, buttons, forms, menus) must be reachable. Fix elements that can only be activated with a mouse (hover-only menus, custom dropdowns).<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058264740\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Visible focus indicator<\/h3>\n<div class=\"rank-math-step-content \"><p>Add CSS :focus styles to all interactive elements so it is clear which element the user is on when navigating with the keyboard. The outline should be at least 2px thick and have a contrast of \u22653:1 with the background. Don&#8217;t remove the browser&#8217;s default outline without adding your own.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058273649\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Semantic HTML<\/h3>\n<div class=\"rank-math-step-content \"><p>Replace generic divs with semantic HTML5 elements: &lt;header&gt; for the header, &lt;nav&gt; for navigation, &lt;main&gt; for the main content, &lt;article&gt; for articles, &lt;aside&gt; for the sidebar, &lt;footer&gt; for the footer. Use a correct heading hierarchy (one H1 per page, then H2, H3 in logical order).<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058283882\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">ARIA labels and roles<\/h3>\n<div class=\"rank-math-step-content \"><p>Add aria-label, aria-labelledby or aria-describedby to custom controls, icon-only buttons and interactive widgets. Example: &lt;button aria-label=&#8221;Close menu&#8221;&gt;\u00d7&lt;\/button&gt;. For custom dropdowns or modals, use the right ARIA roles (role=&#8221;dialog&#8221;, role=&#8221;menu&#8221;, aria-expanded etc.).<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058296026\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Form labels and error handling<\/h3>\n<div class=\"rank-math-step-content \"><p>Every &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; must have a matching &lt;label&gt; (via for\/id or by wrapping). Error messages must be accessible via aria-describedby and appear close to the field with the problem. Use aria-required and aria-invalid where needed.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058305107\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Captions and transcripts for media<\/h3>\n<div class=\"rank-math-step-content \"><p>All videos on the page must have closed captions (CC) in the page language (Greek, for a Greek site). Audio content (podcasts, voice-overs) needs a text transcript. Auto-generated captions from YouTube\/Facebook are usually not accurate enough, so they need reviewing.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058314721\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Resizable text up to 200%<\/h3>\n<div class=\"rank-math-step-content \"><p>Try zooming the page up to 200% (Ctrl + plus, or zoom through the browser settings). The layout must not break, text must not be cut off and controls must keep working. Avoid fixed pixel sizes; use rem or em for font-size.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058325504\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Mobile reflow at 320px<\/h3>\n<div class=\"rank-math-step-content \"><p>Test the page at a 320px viewport width (the smallest smartphone size). There must be no horizontal scroll, and all controls must be touch-friendly (min 44x44px target size for WCAG 2.1, 24&#215;24 for 2.2). The menu must switch to a mobile-friendly version.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058335693\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Lang attribute in the HTML<\/h3>\n<div class=\"rank-math-step-content \"><p>Make sure the &lt;html&gt; tag has the right lang attribute: &lt;html lang=&#8221;el&#8221;&gt; for Greek content. If you have a multilingual site, each language must have its own lang. For an inline change of language within a paragraph, use &lt;span lang=&#8221;en&#8221;&gt;English text&lt;\/span&gt;.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-1778058345427\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Accessibility statement page<\/h3>\n<div class=\"rank-math-step-content \"><p>Create a page at \/accessibility-statement (or \/dilosi-prosvasimotitas) stating: the WCAG compliance level (e.g. WCAG 2.1 AA), known exceptions, contact details for reporting accessibility problems, and the date of the last check. This is mandatory for compliance with Greek Law 4727\/2020.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n\n<h3 class=\"wp-block-heading\">Why build a website to the WCAG 2.1 AA standard?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Making your site comply with WCAG 2.1 AA brings a host of advantages, both for users and for your business itself.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apart from your corporate and social responsibility towards people with disabilities, following the standards is also good for your website itself. When the standards are followed, you get a bonus from <a href=\"https:\/\/web-mate.gr\/en\/seo-vs-google-ads\/\">search engines <\/a>when it comes to promoting your website on them. Below is an example of a website for an <a href=\"https:\/\/maxairidou.com\/\" target=\"_blank\" rel=\"noopener\">accountant in Kavala<\/a> that follows the accessibility standards and has been rewarded by <a href=\"https:\/\/web-mate.gr\/en\/google-ads-advertising-guide\/\">google<\/a> . Of course, the website is fully functional and <a href=\"https:\/\/web-mate.gr\/en\/website-speed-optimisation\/\">optimised for speed<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/web-mate.gr\/wp-content\/uploads\/2023\/02\/amea-wcag-2-espa.jpg\" alt=\"- Web-Mate\" class=\"wp-image-1654\" title=\"- Web-Mate\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The ease of access that comes from following the rules makes for happy users, and happy users are happy customers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How much does a website for people with disabilities cost?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A website for people with disabilities built to the WCAG 2.1 AA standard costs the same as a normal <a href=\"https:\/\/web-mate.gr\/en\/\">website<\/a> or <a href=\"https:\/\/web-mate.gr\/en\/what-is-an-eshop-and-how-it-works\/\">e-shop<\/a> ; depending on the client&#8217;s requirements it can cost from 1500 to 5000 euros (perhaps more, depending on what the client asks for). The only extra cost is the work needed to check the website with the right tools, so that the right certificates can be produced if the business joins an NSRF (ESPA) programme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At Web-Mate we have built hundreds of <a href=\"https:\/\/web-mate.gr\/en\/\">websites<\/a> to all of the above, both for our clients and for fellow developers who can&#8217;t take on this demanding process. If you want a website that meets all the specifications above, talk to us!<\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1778057731045\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What fines do you risk without WCAG 2.1 AA<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Careful: there are two separate regimes, and they are often confused. For private businesses, Greek Law 4994\/2022 (implementing the European Accessibility Act) applies: compliance has been mandatory since 28\/6\/2025, with administrative fines of up to \u20ac100,000, compliance orders and the possibility of the service being suspended. Law 4727\/2020 covers the public sector. For NSRF (ESPA) funding: if the site fails the final compliance check, the grant may be cancelled and the money may have to be repaid.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058020969\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Which WCAG standard applies to accessible websites today?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Since 2018, WCAG 2.1 at level AA has applied, and it is legally required by European Directive 2016\/2102 and NSRF (ESPA) programmes. Since October 2023 there has also been WCAG 2.2, with 9 additional criteria: optional, but recommended for future-proof projects. WCAG 2.0 is now outdated.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058032519\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What are the WCAG POUR principles?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>POUR are the 4 fundamental principles of WCAG: Perceivable: information must be perceivable through alt text, captions and sufficient contrast. Operable: the page must work without a mouse (keyboard navigation). Understandable: content and controls must be clear, with plain language and predictable navigation. Robust: compatibility with assistive technologies through valid HTML and correct ARIA labels.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058040949\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is the difference between WCAG levels A, AA and AAA?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Level A is the basic level of compliance (minimum) and is not enough for NSRF (ESPA). Level AA is the industry standard and the level legally required by the European Union; all NSRF (ESPA)-funded websites must meet it. Level AAA is the highest compliance and is recommended for government, healthcare and education websites, though it is not always achievable for all the content on a page.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058055482\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Is WCAG 2.0 enough for NSRF (ESPA) programmes?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Careful: there are two separate regimes, and they are often confused. For private businesses, Greek Law 4994\/2022 (implementing the European Accessibility Act) applies: compliance has been mandatory since 28\/6\/2025, with administrative fines of up to \u20ac100,000, compliance orders and the possibility of the service being suspended. Law 4727\/2020 covers the public sector. For NSRF (ESPA) funding: if the site fails the final compliance check, the grant may be cancelled and the money may have to be repaid.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058067557\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What are the basic WCAG 2.1 AA requirements?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The 12 most critical WCAG 2.1 AA requirements are: color contrast of 4.5:1 for text, alt text on all images, keyboard navigation, a visible focus indicator, semantic HTML, correct ARIA labels, form labels and clear error messages, captions or transcripts on video, resizable text up to 200%, mobile reflow at 320px with no horizontal scroll, a correct lang attribute in the HTML, and a dedicated accessibility statement page.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058078316\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I check whether my website is WCAG-compliant?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Use the following tools: WAVE from WebAIM (wave.webaim.org), the axe DevTools Chrome extension, the Lighthouse Accessibility audit in Chrome DevTools, and the WCAG-EM Report Tool. Full certification needs a manual audit by a specialist and testing with real users with disabilities or with assistive technologies such as screen readers.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058094873\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How much does a WCAG 2.1 AA compliant website cost?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Careful: there are two separate regimes, and they are often confused. For private businesses, Greek Law 4994\/2022 (implementing the European Accessibility Act) applies: compliance has been mandatory since 28\/6\/2025, with administrative fines of up to \u20ac100,000, compliance orders and the possibility of the service being suspended. Law 4727\/2020 covers the public sector. For NSRF (ESPA) funding: if the site fails the final compliance check, the grant may be cancelled and the money may have to be repaid.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058139952\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is the difference between WCAG 2.1 and 2.2?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>WCAG 2.2 (October 2023) adds 9 new criteria to 2.1, focusing on: focus appearance (a visible focus with specific contrast), dragging movements (alternatives to drag-and-drop), target size (a minimum of 24&#215;24 pixels for clickable elements) and cognitive accessibility improvements. 2.1 remains the legal requirement, while 2.2 is recommended for new projects that want future-proof compliance.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1778058157649\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How long does it take to make my website WCAG-compliant?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>For a new website built from scratch to WCAG 2.1 AA: 4-8 weeks (15-20% more time than a non-compliant build). To retrofit an existing site: 2-6 weeks, depending on its size and how far it is from compliance. The audit and remediation plan alone take 1-2 weeks.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:79px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\t<div class=\"button-code\">\n\t<a href=\"\/epikoinwnia\"><div class=\"default-button type-comp2 animate theme-white undefined\"><div class=\"button-background\"><div class=\"left\"><\/div><div class=\"center\"><\/div><div class=\"right\"><\/div><\/div><div class=\"text\">\u039c\u0399\u039b\u0397\u03a3\u03a4\u0395 \u039c\u0391\u0396\u0399 \u039c\u0391\u03a3<\/div><div class=\"plus-icon\"><\/div><\/div><\/a>\n\t<\/div>\n\t\n\n\n\n<div style=\"height:79px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A website for people with disabilities must comply with the WCAG 2.1 AA standard, which is the legal requirement under European Directive 2016\/2102 and for NSRF (ESPA) funding programmes. Since October 2023, WCAG 2.2 has also been in force (recommended for future-proof projects). WCAG 2.0 is now outdated and does NOT cover modern requirements (mobile, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9633,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","rank_math_title":"Accessible Websites: WCAG 2.1 AA for ESPA Funding | WebMate","rank_math_description":"Accessible websites to WCAG 2.1 AA for NSRF (ESPA) programmes in Greece: POUR principles, 12-step checklist, cost, fines and the accessibility statement.","rank_math_focus_keyword":"wcag 2.1 aa website"},"categories":[238,248],"tags":[],"class_list":["post-15312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-mate-en","category-website-programming"],"_links":{"self":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts\/15312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/comments?post=15312"}],"version-history":[{"count":1,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts\/15312\/revisions"}],"predecessor-version":[{"id":15479,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/posts\/15312\/revisions\/15479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/media\/9633"}],"wp:attachment":[{"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/media?parent=15312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/categories?post=15312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web-mate.gr\/en\/wp-json\/wp\/v2\/tags?post=15312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}