{"id":5500,"date":"2025-06-30T06:10:23","date_gmt":"2025-06-30T06:10:23","guid":{"rendered":"https:\/\/smartspokes.com\/?p=5500"},"modified":"2025-06-30T07:25:02","modified_gmt":"2025-06-30T07:25:02","slug":"is-your-website-accessible","status":"publish","type":"post","link":"https:\/\/smartspokes.com\/en\/is-your-website-accessible\/","title":{"rendered":"Is Your Website Truly Accessible? \u2013 3 + 1 Free Checks"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Check Your Website For Accessibility \u2013 Here's How In 15 Minutes<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Our voluntary accessibility statement is online \u2013 but theory isn’t enough. In this guide, we show you how you can test whether your website is accessible to everyone (without special software)<\/strong>.

The whole process takes less than 15 minutes and provides you with an immediate to-do list.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

1 | 5-Minute Check With Online Tools<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tWAVE<\/strong>\nWhat is being checked?<\/em>\nStructure, alternative text, ARIA roles, contrast\n\ud83d\udd17 wave.webaim.org<\/a>\n\nLighthouse (Chrome)<\/strong>\nWhat is being checked?<\/em>\nWCAG score (0\u2013100), performance & PWA\n\ud83d\udccd Start in Chrome DevTools under the \u201cLighthouse\u201d tab\n\nEXPERTE.de-Accessibility-Check<\/strong>\nWhat is being checked?<\/em>\nHeading hierarchy, contrast, forms\n\ud83d\udd17 experte.de\/barrierefreiheit<\/a>\n\nAktion-Mensch-Check-List<\/strong>\nWhat is being checked?<\/em>\nManual WCAG checkpoints as PDF\n\ud83d\udd17 aktion-mensch.de\/digital<\/a>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n
Tool<\/strong><\/td>\nWhat is being checked?<\/strong><\/td>\nLink<\/strong><\/td>\n<\/tr>\n<\/thead>\n
WAVE<\/strong><\/td>\nStructure, alternative text, ARIA roles, contrast<\/td>\nwave.webaim.org<\/a><\/td>\n<\/tr>\n
Lighthouse (Chrome)<\/strong><\/td>\nWCAG score (0\u2013100), performance & PWA<\/td>\nChrome DevTools \u2192 Reiter \u201eLighthouse\u201c<\/td>\n<\/tr>\n
EXPERTE.de-Accessibility-Check<\/strong><\/td>\nHeading hierarchy, contrast, forms<\/td>\nexperte.de\/barrierefreiheit\n<\/a><\/td>\n<\/tr>\n
Aktion-Mensch-Check-List<\/strong><\/td>\nManual WCAG checkpoints as PDF<\/td>\naktion-mensch.de\/digital<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Tip:<\/strong> Start with WAVE \u2013 the highlighting in the browser shows you where alt text or contrast is missing in seconds.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

2 | Reality Check With a Screen Reader (\u2248 5 Min.)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t1. Windows + Ctrl + Enter<\/strong> \u2192 Narrator starts.

2. Use H<\/strong> to jump through the headings.

3. Listen to see if buttons and links are named appropriately (no \u201clink 123\u201d).

4. CapsLock + M<\/strong> reads the focus position.

5. Windows + Ctrl + Enter<\/strong> exits Narrator.

Mac shortcut: Cmd + F5<\/strong> starts\/stops VoiceOver.

\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

3 | Test Keyboard Navigation (\u2248 5 min.)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\u2022 Tab forward \u2192 Is the order logical?

\u2022 Shift + Tab backward \u2192 Does every step work?

\u2022 Enter \/ Space \u2192 Does every button trigger something?

\u2022 Esc \u2192 Does it close modal dialogs?

If the visible focus (focus ring) is missing, keyboard navigation is technically possible but practically unusable.\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

4 | Common Stumbling Blocks And Quick Fixes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

1. Skip links are missing<\/strong>
Screen readers and keyboard users need a jump mark to the main content.
\ud83d\udca1 Insert <a href=\"#main\" class=\"skip-link\">Zum Inhalt<\/a><\/code> at the top of the page.<\/p>\n\n

2. Placeholder alt text<\/strong>
\u201cimage123.jpg\u201d does not say anything about the image.
\ud83d\udca1 Replace with: alt=\"Blaues Balkendiagramm Umsatz 2024\"<\/code><\/p>\n\n

3. Contrast near-limit case<\/strong>
Blue (#1B3A6B) on white is only WCAG AA at 14px \u2013 not AAA.
\ud83d\udca1 Either adjust the color (#143260) or increase the text size to at least 18px.<\/p>\n\n

4. Empty buttons or links<\/strong>
Example: <button><i class=\"icon\"><\/i><\/button><\/code> is not accessible.
\ud83d\udca1 Add: aria-label=\"Men\u00fc \u00f6ffnen\"<\/code><\/p>\n\n

5. Focus not visible<\/strong>
CSS: outline: none;<\/code> prevents keyboard focus.
\ud83d\udca1 Better: :focus { outline: 2px solid #1B3A6B; }<\/code><\/p>\n<\/section>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n
Problem<\/strong><\/td>\nExplanation<\/strong><\/td>\nQuick fix<\/strong><\/td>\n<\/tr>\n<\/thead>\n
Skip links missing<\/strong><\/td>\nSkip button \u201cSkip to content\u201d for screen readers and keyboard<\/td>\n<a href=”#main” class=”skip-link”>Skip to content<\/a> at page top<\/td>\n<\/tr>\n
Placeholder alt text<\/strong><\/td>\n\u201cimage123.jpg\u201d reveals nothing<\/td>\nMeaningful: alt=”Blue bar chart showing sales in 2024″<\/td>\n<\/tr>\n
Contrast near-limit case<\/strong><\/td>\nBlue #1B3A6B on white: at 14 px text only WCAG AA, not AAA<\/td>\nVariant #143260 or text size \u2265 18 px<\/td>\n<\/tr>\n
Empty buttons\/links<\/strong><\/td>\n<button><i class=”icon”><\/i><\/button><\/td>\naria-label=add “open menu”<\/td>\n<\/tr>\n
Focus not visible<\/strong><\/td>\noutline: none; in CSS<\/td>\nReactivate focus style: :focus { outline: 2px solid #1B3A6B; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

5 | Do I Need Professional Help?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Not every website needs an official accessibility audit \u2013 but almost every website can benefit from one.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

When Is A Professional Audit Mandatory?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tAs of June 28, 2025<\/strong> the\nBFSG <\/abbr>has been in force for certain public or private providers with a legal mandate. This includes, for example:\n
    \n \t
  • Banks and insurance companies<\/li>\n \t
  • Online shops & e-commerce platforms<\/li>\n \t
  • E-book providers<\/li>\n \t
  • Companies with digital customer interfaces, e.g., login areas or ticket systems<\/li>\n<\/ul>\n\u27a1\ufe0f The following applies here:<\/strong> A professional audit is strongly recommended to avoid fines and reputational risks.\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    When Is An Audit Still Useful?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\tEven if you are not legally obliged to do so, it is worth getting an outside perspective. Because: \n
      \n \t
    • Many smaller websites accidentally fail to meet important WCAG criteria \u2013 or fail to notice simple hurdles<\/li>\n \t
    • Usability for all means greater reach, longer visits, and less frustration \u2013 even for people without disabilities<\/li>\n \t
    • Accessibility has a positive effect on SEO (e.g., through better structure, clear labels, and optimized loading times)<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      CONCLUSION<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\tAccessibility is not rocket science. With three free checks and a little developer work, you can remove 80% of all barriers \u2013 and open up your content to up to 8 million potential users in Germany. Get started today \u2013 fifteen minutes is all it takes to take the first step. \n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      7 | FAQ \u2013 Quick Answers<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t

      Do I have to offer audio description? <\/h3><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\tOnly if your video contains visual information that would otherwise be inaccessible to blind users (e.g., slideshows without narration).\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t

      Does a color scheme alone comply with WCAG? <\/h3><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\tNo. Contrast is only one criterion. Structure, keyboard accessibility, and comprehensibility are equally important. \t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t

      How much does a WCAG audit cost? <\/h3><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\tDepending on the scope, from approx. \u20ac 1500. For small marketing websites, a half-day quick check plus developer briefing is often sufficient. \t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t