Skip to content
BFSG compliance since 2025

Practice & implementation

Accessibility is created in everyday work: in components, editorial templates, documents and test routines. This category collects articles from implementation — accessible navigation, dialogs and carousels, alternative texts and image descriptions, captions and transcripts, tables and data visualisations, PDF documents and native apps. Added to this are topics such as screen reader testing, assistive technologies, plain language and involving people with disabilities in evaluation. We also cover the organisational side: training for editors and developers, acceptance criteria in tenders, documenting test results and dealing with legacy content that cannot be reworked all at once. It is equally about recording test results so they remain traceable at the next change instead of getting lost when the project ends.

One Interface, Two Platforms Made AccessibleiOS · VoiceOverBuy now„Buy now,button“Tap target 44 ptAText up to 200 %Android · TalkBackBuy now„Buy now,button“Tap target 48 dpAText up to 200 %Shared StandardEN 301 549 · Chapter 11WCAG 2.1 · Level AAbinding since 2025applies to both platformsFour Duties for Every AppScreen reader labelsVoiceOver, TalkBackTap targets44 pt / 48 dpContrast and text4.5:1 · up to 200 %No gesture-only useSingle-pointer path

Accessible Apps: BFSG Rules for iOS and Android

The BFSG now covers native apps too. What iOS and Android apps must meet for WCAG 2.1 AA and EN 301 549: labels, tap targets, contrast and focus order.

14 min read
Accessibility as an Editorial Process: Gates, Not Rework1Image uploadAlt text mandatoryor mark decorativeWCAG 1.1.1 met1.1.12StructureHeadings H1 to H3no skipped levelsWCAG 1.3.1 / 2.4.61.3.13Link textdescriptive targetsno "click here"WCAG 2.4.4 met2.4.44PDF and languagetagged PDF, plainlanguage where neededEN 301 549 metPDF/UAPublishaccessible from day oneSpot check and monitoring: no re-barrieringTraining matrix: who learns what on the editorial teamRoleFocus of the trainingCadenceEditorsAlt text, link text, heading structureOnboardingSubject authorsPlain and easy-to-read language, tablesTwice a yearDesign and layoutContrast, image types, tagged PDFsTwice a yearAccountable leadsBFSG duties, statement, feedbackYearlyMissing alt text on 55.5 percent and skipped headings on 39 percent of home pages (WebAIM Million, 2025)

Accessible Content: Training for Your Editorial Team

Accessibility is an ongoing editorial process: train alt text, link text, headings and accessible PDFs in the team to prevent the gradual re-barriering of your site.

13 min read
Accessible Navigation: Skip Links, Menus and FocusWCAG 2.4.1 Bypass Blocks (A) | 2.4.3 Focus Order (A) | 4.1.2 Name Role Value (A) | 2.4.7 Focus Visible (AA)1. Skip LinkSkip to main contentFirst focusable linkVisible only on :focushref="#main" -> <main tabindex="-1">saves up to 20 tab stops2. Navigation<nav aria-label="Main menu">aria-currentaria-expandedArrow keysEsc closesDisclosure pattern over role=menuLandmark recognised by screen readers3. Visible FocusFocused element:focus-visible, contrast 3:1min. 2px, no bare outline:none2.4.11 Focus Not Obscured (AA)Logical focus order via TabSkip LinkNavigationMain contentFormFooter71.6% of screen reader users first navigate by headings (WebAIM 2024)Skip Links, Landmarks und sichtbarer Fokus ergaenzen einander zu einer barrierefreien Navigation

Accessible Navigation: Skip Links, Menus and Focus

Accessible navigation per WCAG 2.2: skip links, accessible menus with ARIA, aria-current, landmarks and visible focus management in practice.

14 min read
BFSG 2025: Legal Requirements OverviewAccessibility Strengthening Act (BFSG) - In Effect Since June 28, 2025Who Is Affected?E-Commerce ProvidersService ProvidersBanks, TelecommunicationsWhat Is Required?WCAG 2.2 AA ConformanceAccessible DocumentsAccessibility StatementWhat Penalties?Fines up to 100,000 EURSales ProhibitionsCease-and-Desist RiskFirst StepsConduct Status AnalysisPrioritize BarriersCreate Action PlanBFSG Timeline2021Enacted06/2025In Effect2025+Market SurveillanceOngoingFinesAffected IndustriesE-Commerce and Online ShopsBanking ServicesTelecommunicationsPassenger TransportBFSG Compliance ChecklistWCAG 2.2 AuditAccessibility StatementFeedback MechanismRegular TestingFines up to 100,000 EUR | Sales Ban | Cease-and-Desist | Market Surveillance by Authorities

BFSG 2025: Key Facts for Companies

The German Accessibility Strengthening Act has been in effect since June 2025. Who is affected, which deadlines apply, and what first steps are needed.

14 min read
WCAG 2.2: New Success Criteria in DetailWCAG 2.2 - Published October 2023 - 9 New Success CriteriaFocus Not Obscured2.4.11 (AA) / 2.4.12 (AAA)Focus must not be obscuredSticky headers, modals, overlaysDragging Movements2.5.7 (AA)Alternative to drag-and-dropSliders, sorting, file uploadRedundant Entry3.3.7 (A)No duplicate data entryAutofill, carry-over, checkboxAdditional AA Criteria2.4.13 Focus Appearance2.5.8 Target Size3.2.6 Consistent Help3.3.8 Accessible AuthConformance LevelsLevel ALevel AALevel AAABFSG requires at least AA conformancePractical Relevance of New CriteriaMobile use optimizedCognitive barriers reducedMotor impairments addressedTouch interaction improvedFrom WCAG 2.1 to 2.2: 9 New Criteria | 6 at AA Level | 3 at A/AAA LevelFocus Management | Touch Targets | Drag Alternatives | Authentication | Help Consistency | Input Reduction

WCAG 2.2: Implementing the New Success Criteria

WCAG 2.2 introduces nine new success criteria. Focus Not Obscured, Dragging Movements and Redundant Entry explained with practical guidance.

13 min read
Accessible Checkout: Inclusive Order Process1. Cart2. Address3. Payment4. ConfirmationAccessible Form FieldsFirst Name *JohnEmail *john@example.comZIP Code *Please enter a valid ZIP codelabel + aria-describedby + aria-invalid + autocompleteAccessible Payment SelectionCredit CardSEPA Direct DebitPurchase on Accountrole=radiogroup + aria-checked + keyboard navigationCheckout Accessibility RequirementsAll fields labeledInline error messagesKeyboard operableScreen reader optimizedAutocomplete attributesaria-live regionsSkip linksProgress indicatorResult: Higher Conversion Through Accessible Checkout+12% Conversion Rate71% fewer form errors15% of population reached

Accessible Checkout for Shops

Accessible checkout process: Usable payment forms, error handling, address fields and progress indicators for online shops.

13 min read
Screen Reader Optimization: Semantic Page Structurerole=banner | Navigation Bar | Skip Link: Jump to ContentLandmarksrole=bannerrole=navigationrole=mainrole=complementaryrole=contentinforole=searchScreen reader navigationjump between landmarksrole=mainh1: Page Title (once per page)Introductory text with semantic markuph2: Section HeadingParagraph text (p elements, not div)img alt=DescriptionDecorative: alt=emptyaria-live=politeDynamic contentHeading Hierarchy: h1 - h2 - h3 - h4Never skip levelsARIA Rolesaria-labelaria-describedbyaria-expandedaria-hiddenaria-currentaria-liveFirst rule: Prefernative HTML!Test with screen readers on Windows, macOS, iOS and Androidrole=contentinfo | Footer with Contact, Links and Accessibility Statement

Screen Reader Optimization: Making Your Website Readable

Screen reader optimization for websites: ARIA landmarks, roles, live regions, semantic HTML and screen reader testing across all platforms.

14 min read
Color Contrast: WCAG Requirements OverviewText Contrast (1.4.3)4.5:1 MinimumNormal text (under 18pt)3:1 Large TextFrom 18pt or 14pt boldNon-Text (1.4.11)3:1 MinimumButtons, icons, form fieldsFocus indicatorsButtonInputEnhanced (1.4.6)7:1 AAAHighest contrast requirementOptimal for all users4.5:1 for large text (AAA)Contrast Examples12.6:1 Pass4.9:1 Pass3.2:1 Border2.1:1 Fail1.3:1 FailDark Mode ContrastsLight text on dark background: 4.5:1Focus indicators: 3:1 to backgroundTestingAutomated contrast checkingBrowser developer tools | manual audit48.6% of all websites violate contrast requirements (WebAIM, 2024)Text 4.5:1 | Large Text 3:1 | UI Components 3:1 | Enhanced 7:1 | Focus 3:1

Color Contrast and Accessibility: More Than 4.5:1

Understanding and implementing WCAG contrast requirements: tools, dark mode, focus indicators and non-text contrast for accessible websites.

12 min read
Accessibility by Design: Build It In, Do Not Bolt It OnRemediation cost across project phasesCostConceptDesignDevelopmentOperationFrom the startRetrofitted laterClear roles, one shared goalUXUX and designContrast, focus, design tokensDevDevelopmentSemantics, keyboard, ARIA statesEdEditorialAlt text, structure, plain languageDefinition of Done: accessible means finishedShift-Left: accessibility across the whole process1ConceptDefine audiencesand requirements2Design tokensContrast and focusin the system3DevelopmentSemantics, keyboard,ARIA from day one4Definition of DoneAccessible as anacceptance criterion5OperationMonitoring andeditorial routine

Accessibility by Design: Build It In From the Start

Build accessibility in early instead of retrofitting it: the cost advantage of shift-left, clear roles, design tokens and a Definition of Done for the BFSG.

12 min read
Keyboard Navigation: Full Operability Without a MouseWCAG 2.1.1 Keyboard (A) | 2.1.2 No Keyboard Trap (A) | 2.4.7 Focus Visible (AA)Tab NavigationTabNavigate forwardShift+TabBackwardLogical order = DOM orderInteractionEnterActivate link/buttonSpaceCheckbox/ButtonArrow keys for radio buttons, tabs, menusSpecial ActionsEscClose modalArrowsNavigate within widgetsHome/End for start/end of listsFocus Order of a Typical Web PageSkip LinkLogo/HomeNav LinksMain ContentFormsFooterAvoid Keyboard TrapsUser must be able to leave every elementVisible Focus Indicator:focus-visible with 3:1 contrastTab | Shift+Tab | Enter | Space | Escape | Arrow Keys | Home | End | Page Up | Page Down

Keyboard Navigation: Every Function Without a Mouse

Keyboard navigation for accessible websites: tab order, focus management, skip links, keyboard traps and custom widgets.

13 min read
Accessible PDFs: Document Accessibility per PDF/UAPDF Structure (Tag Tree)DocumentH1: TitleSect: SectionP: ParagraphFigureTags define structure and reading orderH1-H6, P, Table, Figure, List, Link, FormPDF/UA RequirementsComplete tag tree (no untagged content)Correct reading orderAlt text for all imagesDocument language definedTables with header associationCreation Paths for Accessible PDFsWord with StylesInDesign with TagsHTML to PDFRetroactive TaggingBasic structure automaticFull controlProgrammaticAcrobat ProTesting ToolsPAC 2024 (PDF Accessibility Checker)Acrobat Pro Accessibility CheckStandardsPDF/UA-1 (ISO 14289-1)PDF/UA-2 (ISO 14289-2, 2024)Tagged PDFs | Reading Order | Alt Text | Table Headers | Forms | Document Language | Bookmarks

Accessible PDFs: Document Accessibility per PDF/UA

Creating accessible PDFs: tagged PDFs, reading order, alt text, tables and forms tested and implemented per the PDF/UA standard.

12 min read
Accessibility Testing: Automated and Manual MethodsAutomated TestsCover 30-40% of WCAG criteriaBrowser CheckBrowser developer toolsDOM Rule CheckWCAG rule baseContrast ScanColor and UI contrastCI/CD TestsPipeline integrationManual TestsCover the remaining 60-70%Keyboard TestTab, Enter, EscapeScreen ReaderWindows, macOS, iOSCognitive TestComprehensibilityUser TestingAffected UsersProfessional WCAG Audit = Automated + Manual + User TestingOnly the combination covers all WCAG 2.2 success criteriaContrast TestingAutomated + browser developer toolsText 4.5:1 | UI 3:1 | Focus 3:1Structure TestingHeading hierarchy, landmarksARIA attributes, semanticsInteraction TestingForms, navigation, modalsFocus management, live regionsResult: Prioritized Action PlanCritical: Fix immediatelySerious: Plan short-termModerate: Implement mid-term

Accessibility Testing: Methods and Approaches

Website accessibility testing: automated and manual testing methods, keyboard and screen reader testing and the professional WCAG audit at a glance.

13 min read