Accessible websites: the basics and the BFSG

Why it matters

Accessibility does not only help people with disabilities, but everyone: in bright sunlight, when using one hand, on a slow connection. It improves readability and structure, and often findability as well.

The BFSG

The law implements a European directive and has applied since 28 June 2025 to certain products and services, including online shops and other consumer services in electronic commerce. Micro-enterprises (fewer than ten employees and annual turnover or balance sheet total of no more than two million euros) are exempt for services. You should have a lawyer check whether and how the BFSG affects you.

Technical basis

The benchmark is the Web Content Accessibility Guidelines (WCAG). Key points:

• Sufficient colour contrast
• Alternative text for images
• Keyboard operation, visible focus
• Clear heading structure
• Labelled form fields
• Scalable text, no content conveyed by colour alone
• Subtitles or transcripts for videos

How to get started

1. Use automated testing tools to find the most common defects.
2. Navigate through the page using the keyboard.
3. Test the most important processes (contact, purchase) with a screen reader.
4. Fix the defects and provide an accessibility statement where required.

Common shortcomings in practice

• Too little contrast: Light grey text on white looks stylish but is hard to read. The WCAG require a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
• Links that say nothing: “Click here” tells a screen reader, which reads links out as a list, nothing. Better is link text that names the destination.
• Missing focus: Anyone navigating only with the Tab key must be able to see where they are. A removed focus outline is a widespread mistake.
• Forms without labels: Placeholders disappear as you type; a real label stays.
• Content only on hover: What only appears when you hover over it is often unreachable by keyboard or touch.

Myth versus fact

Myth: An overlay plugin that adds a button makes any page accessible. Fact: Such add-on tools can offer individual settings, but as a rule they do not fix the underlying defects in structure and code, and specialists do not regard them as a substitute for a clean implementation.

Practical example: checking an enquiry form

Take a contact form with four fields. Press only the Tab key: does the focus move in a sensible order, is it visible, and can the form be submitted with the Enter key? Then deliberately trigger an error, such as an invalid email address. Is the error explained in words at the field, not just by a red border? These two minutes often reveal more than a long test report.

Decision aid: how much effort is appropriate?

If you run an online shop for consumers and are not a micro-enterprise, you should clarify your BFSG obligations promptly and have the site checked systematically. If you have a pure business-card website, the legal position is usually less strict, but the basic rules (contrast, structure, keyboard) are still worthwhile, because they cost little if you take them into account from the start. Rebuilding a finished shop afterwards is much more laborious than planning it to be accessible from the beginning. A clean heading hierarchy is part of that structure.

Accessibility in everyday editorial work

A site only stays accessible if new content is done properly too. So adopt three fixed habits: every new image gets alternative text, or deliberately none if it is purely decoration. Every heading is at the right level, not chosen by font size. Every video gets subtitles or a transcript. On top of that, do not forget documents such as PDF files: they too should contain headings, reading order and alternative text, otherwise the barrier simply remains elsewhere. These habits cost minutes per article, but save extensive rework.

We build websites to be accessible from the start; see Websites and Alt text.