Martin Kulawik

Digital Communications

Explosion sprengt mehrere Betonbarrieren auf einer Straße; Trümmer und Staub wirbeln auf, Gegenlicht der tiefen Sonne, orange-weiße Absperrbänder, keine Personen sichtbar.

|

Because accessibility is important: 10 quick wins for your website

  • Deutsch

Accessibility is not just a ‘nice to have’. It ensures that more people can use your content – regardless of device, situation or limitations. In addition to a better user experience, it also benefits SEO, conversion rate and brand trust. What’s more, new legal requirements for many digital offerings (BFSG / implementation of the European Accessibility Act) have come into force in Germany on 28 June 2025. Optimising now means you’ll be on the safe side. (Federal Accessibility Agency)

Why it matters

  • Greater reach & revenue: Accessible websites are easier for everyone to use – and perform measurably better.
  • Fewer abandonments: Clear structure, good contrast, understandable forms = less frustration.
  • Legal certainty: Accessible online offerings are mandatory for many products and services. Details depend on the specific offering. (Federal Accessibility Agency)
  • Future-proof: WCAG 2.2 is the current W3C standard and a solid guide for teams. (W3C)

10 quick wins you can tackle today

1) Meaningful alternative text for images

What it does: Screen readers understand images; Google does too

  • Describe purpose rather than appearance (‘Logo of …’ only if necessary)
  • Exclude decorative images with alt=""
  • Quick test: Check the image in the code or briefly activate the screen reader

2) Sufficient colour contrast

What it achieves: Text and buttons are legible under all conditions

  • Target values (WCAG AA guideline): 4.5:1 for normal text; 3:1 for large text
  • Check contrasts with a checker (e.g. in the browser DevTool or external tools)

3) Keyboard operation & visible focus

What it achieves: Usable without a mouse – important for many users (and tests)

  • Using Tab to navigate the page: are all interactive elements accessible?
  • Focus clearly visible (do not hide with outline: none)
  • Drop-down menus must not obscure the focus. (WCAG 2.2: ‘Focus not obscured (Minimum)’) (W3C)

4) Clear heading hierarchy

Benefits: Structure becomes understandable – for users and assistive technologies

  • Structure content logically (h1 → h2 → h3 …)
  • Do not use headings solely for visual purposes

5) Meaningful link texts

Benefits: Links are understandable in context

  • Instead of ‘click here’: ‘Download price list’, ‘View project’
  • Specify multiple, similar links (e.g. ‘Offer – Web design’)

6) Forms with labels & clear error messages

Benefits: Faster input, fewer abandonments

  • Each field has a visible label (not just a placeholder)
  • Explain errors in plain text and provide a solution
  • Groupings (e.g. radio buttons) with fieldset/legend

7) Subtitles & transcripts for media

Benefits: Videos can be used in noisy/quiet environments and without audio

  • Add subtitles, provide transcripts
  • No autoplay; always offer start/pause controls

8) ‘Skip to content’ link & logical focus order

Benefits: Users jump directly to the main area at the beginning

<a class="skip-link" href="#main">Skip to content</a>
<main id="main">...</main>
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:0;top:0;padding:.5rem;}
  • Navigation elements first, then main content, then footer – this keeps the focus path logical

9) Sufficient touch targets (also for mouse/touch pen)

What it achieves: Fewer misclicks, better mobile operation

  • Interactive targets are at least 24×24 CSS pixels or have the appropriate spacing (WCAG 2.2: ‘Target Size (Minimum)’) (W3C)

10) Set semantics & language correctly

What it does: Assistive technologies understand the page more reliably

  • Real elements instead of div tinkering: button instead of clickable div, nav/main/footer as landmarks
  • Page language in the htmltag: lang=‘en’ (or appropriate)

Quick checks & helpful tools

  • Browser DevTools → Lighthouse (Accessibility) or Googles PageSpeed Insights for an initial overview
  • A11y Check from Friendly Captcha
  • Screen reader quick test (macOS: VoiceOver, Windows: NVDA)
  • Contrast check (e.g. in DevTool or with your own checker)

Legal background (brief & understandable)

  • In Germany, the Accessibility Enhancement Act (BFSG) – national implementation of the European Accessibility Act – has been in force since 28 June 2025, with requirements for digital consumer services (e.g. e-commerce), among other things. Whether and how you are affected depends on the specific service you offer. (Federal Accessibility Agency)
  • WCAG 2.2 is the current W3C standard and a good technical guide for teams and service providers (W3C)

Conclusion

Accessibility improves user experience, reach and conversion and reduces legal risks. The ten quick wins above can often be implemented in existing pages without redesign. Start with two or three points (e.g. contrast, focus, forms) and build on that. If you like, I can help you with a short accessibility check of your site and a concrete action plan.

Weitere Beiträge