Implementing BFSG 2025 in WordPress: 12 points that I always check

Anyone who has read the first article now knows: Does this apply to me - yes / no - and why at all?

Accessibility: Does the new BFSG affect my website?

Here we go one level deeper: If your website is affected or you simply want to make it future-proof, then we look at exactly these points in WordPress. I'll show you with the help of GeneratePress (GP) and GenerateBlocks (GB), because we use it to realise all our customer projects.

Target: barrier-free, easy to use, as close as possible to BFSG/WCAG - without compromising the design.

1. clear structure in the template

Accessibility does not start with contrast, but with structure.

One page → one H1 (in the template, not in the content multiple times).
Below H2/H3 cleanly staggered.
No „empty“ containers just for distance - better gap utilise.
Go through the page template in the source code once and check the order: Body → Skip-Link Header → Content → Footer.

Why? Screen readers read in order, not by appearance.

2. leave the skip link visible

GeneratePress comes with a skip link - as do many themes. However, this is often „designed away“.

Check: „Skip to content“ appears when you press the Tab-button starts?
If not: add a small CSS rule so that the link is visible with the focus.
Please do not delete - this is one of the easiest accessibility wins ever.

Important: The skip link is at the top of the body before the header and refers to the content area (#content). If you place your own layout container in front of it (e.g. off-canvas, notice bar), you must ‚save‘ the skip link there again.

Most of the problems are not in the content, but in the menu.

Does the mobile menu open via the keyboard?
Can you get out again (ESC)?
If the menu button has a talking aria label („Open menu“ instead of just icon)?
If a separate off-canvas is built using GB: Keep the focus in the off-canvas as long as it is open.

Mnemonic: If you cannot operate it with the keyboard alone, it is not accessible.

4. contrasts & colour variations

Here, pretty corporate designs are often thrown out.

Check all global colours created in the theme once.
Test buttons in all states (hover, focus, disabled).
Text on image must be protected with an overlay.
If a corporate green tone is too light: Alternative „barrier-free“ colour define.

Forms are to BFSG what titles are to SEO: You can't do without it.

Every field needs a proper Label, not just placeholders.
Mark mandatory fields with more than just colour.
Output error messages where they occur - and connect them via ARIA.
In WooCommerce: Error messages and notes are available, but not always ideally labelled → can be customised in a child theme.

6. media: images, icons, SVG

In WordPress, you can add many images „quickly“.

Images get their alt text from the media centre - so keep it clean there.
Decorative icons, arrows, accordion symbols: aria-hidden="true" focusable="false" → otherwise the screen reader will blather on about everything.
Large image areas (hero, header) → Do not simply overlay text without checking the contrast.

7. accordion, tabs, FAQ

You work a lot with accordions - perfectly okay, but:

Button needs aria-expanded and this must be set to true jump.
Content needs aria-controls or a clear allocation.
Keypad: Open/close with Enter or Space.

8. loops, lists, event outputs

You have many dynamic outputs via GenerateBlocks - dates, events, products.

Make the sequence logical: Date → Title → Location → Action (not mixed up).
If you use colours for „sold out“ or „only 3 seats left“: always with text.
Use tables only for tabular data - not for layout.

This means that even someone with a screen reader can access the information that you have designed so beautifully in the front end.

9 WooCommerce & „electronic commerce“

As soon as something is sold or booked, people take a closer look.

It must be possible to select variants using the keyboard - especially if you enter your own texts („Select an event“).
Information texts („2 places left“) not only in colour, but as plain text.
Error messages in the checkout must be legible and unambiguous.

10. do not kill focus styles

Very popular: outline: none; - and then you wonder.

All interactive elements must be visible in the focus.
If you don't like the default → define your own focus style (e.g. 1px outline in the accent colour).
Pull through in global styles, not just on one side.

This is one of the quickest ways to show „we have thought about accessibility“.

11. animations, sliders, effects

Beautiful is allowed - but controllable.

Autoplay sliders need a way to stop.
Avoid long fade-in animations.
prefers-reduced-motion so that users with restrictions don't go crazy.

This is particularly important for presentation pages with a lot of image material.

12. editing & B2B labelling

BFSG is not just technology, it is also Clearly identify the target group.

If you want to refer to B2B: clearly indicate this in the footer/imprint („This offer is aimed exclusively at companies“).
Editors receive a small checklist: Alt text, link texts, contrast, barrier-free downloads.
In this way, you can prevent the page from being technically barrier-free - and everything from being broken again with the next post.

Bonus: Use ND Accessibility

We have our own little tool for precisely this „let's-make-it-better“ step: „ND Accessibility“.

It doesn't do magic and it doesn't replace structural accessibility - but it does provide users with tools:

Font size adjustment (larger/smaller)
Greyscale display
Link underlining for clear recognisability
Contrast reinforcements for weaker eyes

You can try out the tool here on the site (see bottom left corner).

This is how you show: „We get it - and we give you options.“

Conclusion

If you're not sure which of these 12 places are actually causing a problem with your website:

I can create a BFSG/accessibility check for your WordPress site - especially for GeneratePress/GenerateBlocks setups.