# Because accessibility is important: 10 quick wins for your website

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](https://www.bundesfachstelle-barrierefreiheit.de/DE/Fachwissen/Produkte-und-Dienstleistungen/Barrierefreiheitsstaerkungsgesetz/barrierefreiheitsstaerkungsgesetz_node.html))

## 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](https://www.bundesfachstelle-barrierefreiheit.de/DE/Fachwissen/Produkte-und-Dienstleistungen/Barrierefreiheitsstaerkungsgesetz/barrierefreiheitsstaerkungsgesetz_node.html))
- **Future-proof:** WCAG 2.2 is the current W3C standard and a solid guide for teams. ([W3C](https://www.w3.org/TR/WCAG22/))

## 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](https://www.w3.org/TR/WCAG22/))

### 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

```
Skip to content
...
```

```
.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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html))

### 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 `html`tag: `lang=‘en’` (or appropriate)

## Quick checks & helpful tools

- **Browser DevTools → Lighthouse (Accessibility)** or Googles [PageSpeed Insights](https://pagespeed.web.dev/analysis/https-martinkulawik-de/evbj3deg8i?form_factor=mobile) for an initial overview
- **A11y Check** from [Friendly Captcha](https://accessibilitycheck.friendlycaptcha.com/)
- **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](https://www.bundesfachstelle-barrierefreiheit.de/DE/Fachwissen/Produkte-und-Dienstleistungen/Barrierefreiheitsstaerkungsgesetz/barrierefreiheitsstaerkungsgesetz_node.html))
- **WCAG 2.2** is the current W3C standard and a good technical guide for teams and service providers ([W3C](https://www.w3.org/TR/WCAG22/))

## 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**.