Accessibility websites with TYPO3 | WCAG, BFSG & BITV 2.0

Did you know that only around 3% of all websites worldwide are fully accessible? Surprising, isn't it? That means millions of people are excluded from online experiences.

In light of this gap, TYPO3 has decided to make web accessibility a priority. TYPO3 Accessibility provides features and tools that help developers create websites that everyone can easily navigate and enjoy.

Isn't that exactly the kind of web and progress we all need?Let's get started and make the web accessible for everyone!

In the EU and Germany, several legal frameworks are based on the WCAG.

1. BFSG (Barrierefreiheitsstärkungsgesetz)

The Barrierefreiheitsstärkungsgesetz (BFSG) is the national implementation of the EAA in Germany. The BFSG was passed in July 2021. It aims to make digital products and services more accessible for people with disabilities.

This is particularly important in the private sector, where accessibility has often been ignored to date. Until now, accessibility regulations in Germany mainly applied to websites and services in the public sector (in accordance with BITV 2.0). With the BFSG, private companies are now also obliged to comply.

2 EN 301 549

This is the European standard for the accessibility of ICT products and services, including websites and mobile applications. It is based on the WCAG standards and will (soon) apply to public and private digital services throughout the EU.

3. BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung)

BITV 2.0 is the national accessibility regulation for public sector websites in Germany. It refers to the WCAG and EN 301 549 standards.

4. European Accessibility Act (EAA)

The EAA is an EU law that ensures that digital products and services are accessible to all. This includes websites, software and other devices.

The BFSG (Barrierefreiheitsstärkungsgesetz) is the official German law transposing the EAA into German law.

The BFSG comes into force on June 28, 2025. It stipulates that many digital products and services must be accessible to people with disabilities.

Why the BFSG is important for your company:

• Legal requirement: companies offering digital products or services in Germany and across Europe must comply with the BFSG standard.
• Broader reach: The law now also applies to public sector and government websites. It includes private companies, manufacturers, service providers and online retailers.
• Usability: By complying with the BFSG, your business can reach millions of people with disabilities, improve the overall user experience and promote digital equality.
• Who is excluded: Small businesses with fewer than 10 employees and an annual turnover of less than €2 million. They are exempt, but larger companies must comply.

Here are some points you should consider when implementing:

1. Select an Accessible Template

Start with an accessible template. The Bootstrap package for TYPO3 is a good choice. It complies with the most important accessibility standards, making your website easier to navigate for everyone. It offers:

• Logical arrangement of headings.
• Helpful roles and landmarks for screen readers.
• Simple keyboard navigation.
• Clear, visible labels on forms and error messages.

2. Add Helpful Extensions

Extensions are like add-ons that add new functionality to your TYPO3 website. Some extensions offer ways to improve the functionality of your website to make it more accessible:

• Accessible CAPTCHA: Makes forms easier to use for everyone.
• T3AI: Improves your content, making it more readable for search engines and screen readers.
• Mask or container: Creates more appealing layouts that follow a design and logic.

3. Organize Your Content Clearly

Accessible websites not only look good, they are also well organized:

• Use TYPO3's content tools to add headings, lists and tables.
• Always add descriptive alt text for images, captions for videos and clear labels for links.
• Keep your web pages consistent so visitors know what to expect.
• Use TYPO3's "Text & Media" to display words and images together that make sense to screen readers.

4. Fix common Accessibility Errors

TYPO3 gives you the ability to control your content, but that also means you need to watch out for errors:

• Don't forget to add alt text to images.
• Make sure your headings are clearly structured (don't jump from a heading to a subheading without an intermediate step).
• Avoid links that just say "click here"; instead, describe what the link does.
• Don't overload your pages with too many moving elements or auto-playing videos.

The front end is the face of your website, what users see, interact with and rely on to access your content. For people who use assistive technologies, the front end can either be helpful or not. Assistive technologies include screen readers, voice control and keyboard navigation.

1. Certified, Accessible Templates

• Since 2023 the TYPO3 Bootstrap package is officially accessible and has been certified by BIK for All tested.
• It is based on the Bootstrap CSS framework and offers suitable landmarks, keyboard support, ARIA roles, a contrast-friendly user interface and a semantic structure.

2. Frontend Core Features for Accessibility

• TYPO3 generates structured content and clean HTML (using Fluid templates). This allows administrators or editors to easily add accessibility features such as alt texts, captions, ARIA roles and properties, and jump links.
• Responsive behavior, scalable fonts, mobile-first rendering and fast loading enable usability and perceptibility criteria to be met.

3. Required Accessibility Extensions

Content & Editor Tools

• CKEditor abbr Plugin: Adds <abbr> tags with tooltips for acronyms.
• a11y Check: Checks your content for accessibility issues during editing so that you can identify them immediately.

Navigation & Interaction

• Easy Accesskeys: Allows users to jump to important areas (such as menus or forms) using keyboard shortcuts.
• All in One Accessibility: Adds a front-end toolbar that provides screen reader support, contrast tools and text resizing.
• accessibility4typo3: Site-wide frontend improvements for a more user-friendly experience.

Media Support

• Accessible video player: Enables subtitles, keyboard control and multiple video formats.
• Voice Reader TTS: Converts written content to speech to enable browsing with your ears (requires a license).

AI-Powered Accessibility

• T3AA: Generates alt text with AI, checks color contrast and provides voice control features.

[Source: https://extensions.typo3.org/]

4. Interaction‑Focused Features

• ARIA roles and landmarks: Helps screen readers identify navigation, main content, banners and interactive components. Templates can embed aria-label, aria-expanded and correct roles.
• Keyboard navigation and focus management: TYPO3 templates and extensions help with tab order. They also provide visible focus indicators. Additionally, there are skip links for faster navigation.

5. Content‑Level Support

• Editors can use TYPO3 forms to add alt text, correct link labels and headings in logical order. The system can implement these as mandatory fields.
• Semantic HTML elements(<main>, <nav>, <aside>) are explicitly recommended by Fluid template structures.

6. Media accessibility

• Accessible video players with MediaElement.js enable subtitles, audio descriptions, keyboard control and support for multiple formats.
• Some extensions, such as voice-over tools, convert content into audio or podcast formats for blind or visually impaired users.

TYPO3 takes the accessibility of the backend seriously. From version 11, the system has many new functions. These changes make editing easier and are particularly helpful for users with visual impairments.

Real-World Testing: Accessibility in TYPO3 v11

In the year 2021 TYPO3 tested the user-friendliness of its backend. The company worked with two blind users. The tests focused on version 11.5.1 to check its accessibility.

1. Matthias Henke, Editor at DRK Clinics Berlin

Matthias Henke, who has been blind since the age of 15, uses the screen reader JAWS and a Braille display to manage all digital content at DRK Kliniken. During his tests with TYPO3 v. 11.5.1, he was able to create pages and upload files with relative ease.

Of course, the unfamiliar functions also pose a challenge, such as missing labels in the page tree or untranslated elements whose meaning was never communicated.

Sometimes he needed support or had to find his way through trial and error to complete tasks that were supposed to be simple.

Key Takeaways:

• The TYPO3 backend is accessible for trained screen reader users.
• There are built-in accessibility features, but onboarding and documentation are key factors.

2. Dennis Westphal, Accessibility Tester

Dennis Westphal, founder of Usability and blind screen reader user, tested the backend of TYPO3 for usability. He identified issues such as unlabeled fields, silent error messages and unclear navigation that affected the user experience.

Note that in a digital environment, there are no "mundane" tasks. Activities such as logging in or creating content require some prior knowledge. You should first learn about the workflow. Without this knowledge, you can only guess.

Key Takeaways:

• Missing labels and inconsistent feedback cause friction for new or trained users.
• Keyboard and screen reader support needs to be carefully thought through to create opportunities for smoother workflows.

Editorial Workflow That Supports Accessibility

Beyond the user interface, TYPO3 supports an editorial system that enables structured content creation processes that follow accessibility best practices:

• Editors can easily assign alt text, headings and semantic layout blocks.
• Extensions can validate content or implement accessibility rules during editing.
• Custom roles and permissions can include accessibility checks before publishing.

Once your TYPO3 website is accessible, the real work begins: creating content that stays accessible every day.

Here are some points to keep in mind when creating accessible content in TYPO3:

1. Use Headings Correctly

It is recommended to start with an H1 heading for the page title. Use H2 for main sections and H3 for subsections. Do not skip heading levels. TYPO3 helps you to keep your headings in a good structure and order.

2. Add Alt Text to Images

Images should also have a short, meaningful alt text so that everyone knows what function they have. Only skip the alt text for decorative images. Add longer descriptions to complex graphics. TYPO3 makes this easy.

3. Make Audio and Video Accessible

Add subtitles to videos and transcripts to audio recordings. Describe important visual details verbally. Avoid sudden sounds or visual changes that can be distracting. TYPO3 has media tools that allow the use of accessibility features.

4. Use Clear and Simple Language

Use short sentences with everyday words. Define and explain all technical terms. For urgent or important content, create an easy-to-read version to improve comprehension.

5. Ensure Good Color Contrast

The text must be easy to read against the background. Always adhere to contrast rules and avoid overlaying text over images unless it is clearly recognizable. TYPO3 templates often have built-in standards. Test this with WAVE or similar software.

6. Use Descriptive Link Text

Links must explain where they lead. Avoid ambiguous words such as "click here". Use descriptive terms such as "Download PDF guide" or "Learn more about TYPO3 features".

Run a free check now with the TYPO3 Accessibility Checker and get clear, actionable results in seconds.

No setup. No tech problems. Just clear results.

Creating an accessible website is an ongoing activity that starts with planning. TYPO3 is an excellent CMS with a solid foundation for creating accessible websites, but your responsibility as a developer doesn't end there.

When you're working on your next website, remember that it's more than just a website. You are creating a place for ALL, a place where everyone is welcome to engage.

Accessibility is never complete, but remember that every little bit counts, and every time you help improve access for one person, you have made a contribution to accessibility.

Accessibility is never 'finished', but every step forward makes a real difference!

Now is the time to act. Waiting could cost you users, trust and compliance.
Start making your website accessible today, not someday.

Let NITSAN help you make your TYPO3 website permanently accessible!