Zum Inhalt springen
BFSG compliance since 2025

Blog

WAI-ARIA: Role, State and Live Region in the Accessibility Tree1. Role (role)First rule: prefer native HTML over rolebuttonnatively focusablerole=tabno HTML equivalentlandmark | widget | document | abstractrole defines what an element is2. State and Propertyaria-expanded=falsearia-selected=truearia-checked=mixedaria-disabled=trueState changes via JavaScriptScreen reader says: collapsed / expanded3. Live Region: dynamic announcementaria-live=politewaits for a speech pausestatus message, result countaria-live=assertiveinterrupts immediatelycritical errors onlyrole=status / alertregion must exist in DOM firstotherwise no announcementCore rule: No ARIA is better than bad ARIA (W3C WAI)Test with real screen readers | do not rely on automation alone
WCAG Jun 3, 2026

Using ARIA Correctly: Roles, States, Live Regions

WAI-ARIA in practice: roles vs. native HTML, states like aria-expanded and aria-selected, live regions with polite and assertive plus the most common mistakes.

13 min read Read →
Accessible Form: Label, Error and ValidationContact FormName*Anna ExampleEmail*anna@example!Please enter a complete email address (domain missing)PhoneOptional - format: 0123 4567890Message*Submit* Required fieldCorrect Associationlabel for=emailinput id=emailaria-required=truearia-invalid=truearia-describedby=errautocomplete=emailrole=alertWCAG 2.2 Form Criteria3.3.1 Error Identification3.3.2 Labels or Instructions3.3.3 Error Suggestion1.3.5 Identify Input Purpose3.3.7 Redundant Entry3.3.8 Accessible Authentication
WCAG Jun 1, 2026

Accessible Forms: Labels, Errors and Validation

Accessible forms per WCAG 2.2: programmatic labels, required field marking, error messages with aria-describedby and role=alert, plus focus management.

13 min read 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
Barrierefreiheit May 25, 2026

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 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
Barrierefreiheit May 22, 2026

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 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
Barrierefreiheit May 19, 2026

Accessible Checkout for Shops

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

13 min read 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
Barrierefreiheit May 16, 2026

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 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
Barrierefreiheit May 13, 2026

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 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
Barrierefreiheit May 10, 2026

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 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
Barrierefreiheit May 7, 2026

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 Read →