{"id":135722,"date":"2025-11-01T09:34:17","date_gmt":"2025-11-01T08:34:17","guid":{"rendered":"https:\/\/netzwerk.design\/?post_type=blog&#038;p=135722"},"modified":"2026-05-10T09:43:28","modified_gmt":"2026-05-10T07:43:28","slug":"implementing-bfsg-2025-in-wordpress-check-the-12-points","status":"publish","type":"blog","link":"https:\/\/netzwerk.design\/en\/blog\/bfsg-2025-in-wordpress-umsetzen-12-punkte-pruefen\/","title":{"rendered":"Implementing BFSG 2025 in WordPress: Always check these 12 points"},"content":{"rendered":"<p class=\"gb-text content-area\">Anyone who has read the first article now knows: <strong>Does this apply to me - yes \/ no - and why at all?<\/strong><\/p>\n\n\n\n<p class=\"gb-text-4f4bc9c4\"><span class=\"gb-shape\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"1em\" height=\"1em\" viewbox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M4.5 3A1.5 1.5 0 0 0 3 4.5v6A1.5 1.5 0 0 0 4.5 12H6v1H4.5A2.5 2.5 0 0 1 2 10.5v-6A2.5 2.5 0 0 1 4.5 2h6A2.5 2.5 0 0 1 13 4.5v6a2.5 2.5 0 0 1-2.5 2.5H9v-1h1.5a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 10.5 3zm5 4H11v1H9.5A1.5 1.5 0 0 0 8 9.5v6A1.5 1.5 0 0 0 9.5 17h6a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 15.5 8H14V7h1.5A2.5 2.5 0 0 1 18 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-6A2.5 2.5 0 0 1 7 15.5v-6A2.5 2.5 0 0 1 9.5 7\"><\/path><\/svg><\/span><span class=\"gb-text\"><a href=\"https:\/\/netzwerk.design\/en\/blog\/accessibility-which-websites-are-affected\/\">Accessibility: Does the new BFSG affect my website?<\/a><\/span><\/p>\n\n\n\n<p class=\"gb-text\">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 <strong>GeneratePress<\/strong> (GP) and <strong>GenerateBlocks<\/strong> (GB), because we use it to realise all our customer projects.<\/p>\n\n\n\n<p class=\"gb-text\">Target: <strong>barrier-free, easy to use, as close as possible to BFSG\/WCAG - without compromising the design.<\/strong><\/p>\n\n\n\n<h2 id=\"1-klare-struktur-im-template\" class=\"gb-text\">1. clear structure in the template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Accessibility does not start with contrast, but with structure.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One page \u2192 <strong>one H1<\/strong> (in the template, not in the content multiple times).<\/li>\n\n\n\n<li>Below H2\/H3 cleanly staggered.<\/li>\n\n\n\n<li>No \u201eempty\u201c containers just for distance - better <code>gap<\/code> utilise.<\/li>\n\n\n\n<li>Go through the page template in the source code once and check the order: Body \u2192 Skip-Link Header \u2192 Content \u2192 Footer. <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Why?<\/strong> Screen readers read in order, not by appearance.<\/p>\n\n\n\n<h2 id=\"2-skiplink-sichtbar-lassen\" class=\"gb-text\">2. leave the skip link visible<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">GeneratePress comes with a skip link - as do many themes. However, this is often \u201edesigned away\u201c.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check: \u201eSkip to content\u201c appears when you press the <strong>Tab<\/strong>-button starts?<\/li>\n\n\n\n<li>If not: add a small CSS rule so that the link is visible with the focus.<\/li>\n\n\n\n<li>Please do not delete - this is one of the easiest accessibility wins ever.<\/li>\n<\/ul>\n\n\n\n<p class=\"gb-text\">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 \u201asave\u2018 the skip link there again.<\/p>\n\n\n\n<h2 id=\"3-navigation-amp-offcanvas\" class=\"gb-text\">3. navigation &amp; off-canvas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most of the problems are not in the content, but in the menu.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Does the mobile menu open via the keyboard?<\/li>\n\n\n\n<li>Can you get out again (ESC)?<\/li>\n\n\n\n<li>If the menu button has a <strong>talking aria label<\/strong> (\u201eOpen menu\u201c instead of just icon)?<\/li>\n\n\n\n<li>If a separate off-canvas is built using GB: Keep the focus in the off-canvas as long as it is open.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Mnemonic:<\/strong> If you cannot operate it with the keyboard alone, it is not accessible.<\/p>\n\n\n\n<h2 id=\"4-kontraste-amp-farbvarianten\" class=\"gb-text\">4. contrasts &amp; colour variations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here, pretty corporate designs are often thrown out.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check all global colours created in the theme once.<\/li>\n\n\n\n<li>Test buttons in all states (hover, focus, disabled).<\/li>\n\n\n\n<li>Text on image must be protected with an overlay.<\/li>\n\n\n\n<li>If a corporate green tone is too light: <strong>Alternative \u201ebarrier-free\u201c colour<\/strong> define.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"5-formulare-kontakt-newsletter-checkout\" class=\"gb-text\">5. forms (contact, newsletter, checkout)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Forms are to BFSG what titles are to SEO: <strong>You can't do without it.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Every field needs a proper <strong>Label<\/strong>, not just placeholders.<\/li>\n\n\n\n<li>Mark mandatory fields with more than just colour.<\/li>\n\n\n\n<li>Output error messages where they occur - and connect them via ARIA.<\/li>\n\n\n\n<li>In WooCommerce: Error messages and notes are available, but not always ideally labelled \u2192 can be customised in a child theme.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"6-medien-bilder-icons-svg\" class=\"gb-text\">6. media: images, icons, SVG<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In WordPress, you can add many images \u201equickly\u201c.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Images get their alt text from the media centre - so keep it clean there.<\/li>\n\n\n\n<li>Decorative icons, arrows, accordion symbols: <code>aria-hidden=\"true\" focusable=\"false\"<\/code> \u2192 otherwise the screen reader will blather on about everything.<\/li>\n\n\n\n<li>Large image areas (hero, header) \u2192 Do not simply overlay text without checking the contrast.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"7-accordion-tabs-faq\" class=\"gb-text\">7. accordion, tabs, FAQ<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You work a lot with accordions - perfectly okay, but:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Button needs <code>aria-expanded<\/code> and this must be set to <code>true<\/code> jump.<\/li>\n\n\n\n<li>Content needs <code>aria-controls<\/code> or a clear allocation.<\/li>\n\n\n\n<li>Keypad: Open\/close with <strong>Enter<\/strong> or <strong>Space<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"8-loops-listen-eventausgaben\" class=\"gb-text\">8. loops, lists, event outputs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You have many dynamic outputs via GenerateBlocks - dates, events, products.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make the sequence logical: <strong>Date \u2192 Title \u2192 Location \u2192 Action<\/strong> (not mixed up).<\/li>\n\n\n\n<li>If you use colours for \u201esold out\u201c or \u201eonly 3 seats left\u201c: <strong>always with text.<\/strong><\/li>\n\n\n\n<li>Use tables only for tabular data - not for layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This means that even someone with a screen reader can access the information that you have designed so beautifully in the front end.<\/p>\n\n\n\n<h2 id=\"9-woocommerce-amp-elektronischer-geschaftsverkehr\" class=\"gb-text\">9 WooCommerce &amp; \u201eelectronic commerce\u201c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As soon as something is sold or booked, people take a closer look.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It must be possible to select variants using the keyboard - especially if you enter your own texts (\u201eSelect an event\u201c).<\/li>\n\n\n\n<li>Information texts (\u201e2 places left\u201c) not only in colour, but as plain text.<\/li>\n\n\n\n<li>Error messages in the checkout must be legible and unambiguous.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"10-fokusstile-nicht-killen\" class=\"gb-text\">10. do not kill focus styles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Very popular: <code>outline: none;<\/code> - and then you wonder.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All interactive elements must be visible in the focus.<\/li>\n\n\n\n<li>If you don't like the default \u2192 define your own focus style (e.g. 1px outline in the accent colour).<\/li>\n\n\n\n<li>Pull through in global styles, not just on one side.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is one of the quickest ways to show \u201ewe have thought about accessibility\u201c.<\/p>\n\n\n\n<h2 id=\"11-animationen-slider-effekte\" class=\"gb-text\">11. animations, sliders, effects<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beautiful is allowed - but controllable.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Autoplay sliders need a way to stop.<\/li>\n\n\n\n<li>Avoid long fade-in animations.<\/li>\n\n\n\n<li><code>prefers-reduced-motion<\/code> so that users with restrictions don't go crazy.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is particularly important for presentation pages with a lot of image material.<\/p>\n\n\n\n<h2 id=\"12-redaktion-amp-b2bkennzeichnung\" class=\"gb-text\">12. editing &amp; B2B labelling<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">BFSG is not just technology, it is also <strong>Clearly identify the target group<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want to refer to B2B: clearly indicate this in the footer\/imprint (\u201eThis offer is aimed exclusively at companies\u201c).<\/li>\n\n\n\n<li>Editors receive a small checklist: Alt text, link texts, contrast, barrier-free downloads.<\/li>\n\n\n\n<li>In this way, you can prevent the page from being technically barrier-free - and everything from being broken again with the next post.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"bonus-nd-accessibility-einsetzen\" class=\"gb-text\">Bonus: Use ND Accessibility<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We have our own little tool for precisely this \u201elet's-make-it-better\u201c step: <strong>\u201eND Accessibility\u201c<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It doesn't do magic and it doesn't replace structural accessibility - but it does provide users with tools:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Font size adjustment<\/strong> (larger\/smaller)<\/li>\n\n\n\n<li><strong>Greyscale display<\/strong><\/li>\n\n\n\n<li><strong>Link underlining<\/strong> for clear recognisability<\/li>\n\n\n\n<li><strong>Contrast reinforcements<\/strong> for weaker eyes<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>You can try out the tool here on the site<\/strong> (see bottom left corner).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is how you show: \u201eWe get it - and we give you options.\u201c<\/p>\n\n\n\n<h2 id=\"fazit\" class=\"gb-text\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you're not sure which of these 12 places are actually causing a problem with your website:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>I can create a BFSG\/accessibility check for your WordPress site - especially for GeneratePress\/GenerateBlocks setups.<\/strong><\/p>\n\n\n\n<a class=\"gb-text button-cta\" href=\"\/en\/contact\/\">Contact<\/a>","protected":false},"excerpt":{"rendered":"<p>If you want to make your website future-proof in terms of accessibility, in this article we look at the most important points in WordPress for this.<\/p>","protected":false},"featured_media":135808,"template":"","meta":{"_acf_changed":false,"_seopress_titles_title":"%%post_title%%","_seopress_titles_desc":"Wenn Sie Ihre Website hinsichtlich Barrierefreiheit zukunftssicher machen wollen, dann schauen wir uns in diesem Artikel die wichtigsten Punkte in WordPress an.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"_nd_vani_enabled":false,"footnotes":""},"class_list":["post-135722","blog","type-blog","status-publish","has-post-thumbnail","hentry","infinite-scroll-item"],"acf":[],"_links":{"self":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog\/135722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/types\/blog"}],"version-history":[{"count":0,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog\/135722\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media\/135808"}],"wp:attachment":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media?parent=135722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}