This article will get you started into Accessibility in Angular, right on time for the European Accessibility Act (EAA) which will become effective on June 28th 2025, but more on that later. We'll cover the history of Web Accessibility, the Web Content Accessibility Guidelines (WCAG), and of course the EAA itself. So make sure to follow it to be prepared for the EAA and to learn how to make your Angular Apps more accessible.
The article is intended for developers, product owners, and anyone interested in making their Angular Apps more accessible. It's also the first edition kicking of our A11y blog series, which will cover topics such as:
- Web Accessibility Introduction (this post): An overview of the history, statistics and regulatory framework of Web Accessibility.
- Accessibility Testing Tools: My top picks for testing your Angular app for accessibility issues.
- Accessible Angular Routes: Quick wins to enhance your app's accessibility using the Angular Router.
- ARIA roles and attributes: Best practices for implementing WAI-ARIA roles and attributes in Angular.
- Accessible Angular Forms: Guidelines for building Angular forms that everyone can use.
- Enhancing A11y with CDK: Exploring some elements of the Angular CDK a11y package.
Brief History of Web Accessibility
Tim Berners-Lee, the inventor of the World Wide Web, envisioned it as a platform for universal access regardless of physical or cognitive abilities.
The term accessibility (short A11y, like I18n) refers to the design of products, devices, services, or environments for people with disabilities.
Disability Statistics
While estimates suggest that one in four individuals in the EU has some form of disability, finding exact data is challenging. Therefore, we focus on Germany using the numbers of the Statistische Bundesamt (Federal Statistical Office of Germany) from 2023:
- 7.86m people (9.4% of the pop.) in Germany have a severe disability
- 1.85m people (2.2% of the pop.) have problems with cerebral disorders, mental and psychological disabilities
- 1.63m people (2.0% of the pop.) have problems with mobility impairments
- 329k people (0.4% of the pop.) are considered blind or have severe vision impairment
- 324k people (0.4% of the pop.) are considered deaf or have severe hearing impairment
Although this data is specific to Germany, they offer insight into the broader prevalence of disabilities across Europe.
However, I think it's important to note that good A11y practices benefit not only people with disabilities but everybody.
For example, captions on videos help non-native speakers and those in noisy environments.
Here is an image by Microsoft showing the benefits of A11y for all kinds of circumstances:
W3C and the Web Accessibility Initiative (WAI)
In 1997, the World Wide Web Consortium (W3C) launched the Web Accessibility Initiative (WAI) to systematically address accessibility issues.
The WAI develops guidelines, called Web Content Accessibility Guidelines (WCAG) – version 1.0 released in 1999 – and continues to provide resources to make the web more accessible.
Web Content Accessibility Guidelines (WCAG)
The WCAG guidelines offer an internationally recognized framework for creating accessible web content and applications. The latest version, WCAG 2.2, was published in December 2023. Both WCAG 2.1 and 2.2 are widely adopted in regulatory standards across Europe and North America.
For a deep dive, check out the WCAG 2.2 Quick Reference. Here are some key points:
The Four Principles
The WCAG 2.2 guidelines are built and structured on four core principles that form the foundation for creating accessible digital content:
- 👀 Perceivable: Information must be presented in ways that users can perceive.
- 🕹️ Operable: Interface components must be operable across various devices and inputs.
- 🧠 Understandable: Content and navigation should be clear and easy to comprehend.
- 🛡️ Robust: Content must work reliably with current and future technologies, including assistive devices.
Illustration source.
Levels of Conformance
WCAG defines three levels of conformance:
- 🥉 Level A: The minimum level. It addresses the essential A11y features required for basic interaction. While meeting Level A ensures that essential content is accessible, some barriers may still exist.
- 🥈 Level AA: Building upon Level A, this level targets the most significant and common barriers. It enhances the UX by improving readability, navigation, and overall usability, and is widely regarded as the standard for many legal and organizational requirements (EAA!).
- 🥇 Level AAA: Representing the highest standard of A11y, includes the most rigorous criteria. Although achieving AAA ensures maximum accessibility, it may not be feasible for all types of content and is typically applied to specialized cases where the highest level of A11y is required.
So our recommendation (well and the lawmakers also have that opinion) is to aim for Level AA compliance, as it strikes a balance between A11y and practicality (aka affordability).
European Accessibility Act (EAA)
The European Accessibility Act (EAA) is a new (actually it's from 2019) EU directive that has to be fully implemented by June 28th 2025.
Based upon the mentioned WCAG 2.2, the EAA sets clear rules to ensure that web applications, websites, and other online services are accessible to everyone, including people with disabilities.
In essence, digital tools must be designed to remove barriers, allowing all users to access information and services without difficulty.
By focusing on web applications, the EAA pushes businesses and developers to create user-friendly, accessible online experiences.
The law helps people with disabilities have the same opportunities and also encourages innovation in web design and development.
In short, the EAA is a key step toward making the internet a more inclusive and in the end, more enjoyable space for all.
The EAA source (hint: don't follow this link): https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32019L0882
National Implementation of the EU Directive
While we won’t cover every detail here, here are some examples of national implementations of the EAA. Interestingly, even though Switzerland is not an EU member, they were the first country implementing the EAA into national law 😀
- 🇨🇭 Switzerland: Accessibility Standard 3.0 (eCH-0059) – June 2020
- Official Website: ech.ch/en/standards/ech-0059/ (German / French)
- 🇩🇪 Germany Barrierefreiheitsstärkungsgesetz (BFSG) – July 2022
- Private website about the BFSG: bfsg-gesetz.de (German)
- 🇦🇹 Austria: Barrierefreiheitsgesetz (BaFG) – July 2023
- Austrian camber of commerce: About the BaFG (German)
Affected online services include
The EAA impacts a variety of digital services, including
- 📚 E-books: Digital (e.g. academic) books that enable the circulation and consultation of a mostly textual and graphical intellectual work.
- 🛒 E-commerce: Retail websites and mobile applications that facilitate online transactions are required to meet accessibility standards.
- 🏦 Online banking: Online and mobile banking platforms must be accessible, ensuring that financial services are usable for everyone.
- 🚌 Public & transportation services: In some cases, the Act also touches on digital services in areas like transport (e.g., online ticketing and check-in services) and audiovisual media services. However, note that public sector websites and mobile apps are governed by a different EU directive (the Web Accessibility Directive).
Although the EAA covers many services, there are areas where its application may still be ambiguous or unclear. For example, the EAA does not explicitly mention Angular or JavaScript frameworks, but it does require that certain web applications and websites are accessible to everyone.
Make sure to follow our A11y blog series to be prepared for the EAA and to learn how to make your Angular Apps more accessible.
Accessibility Workshop
For those looking to deepen their Angular expertise, we offer a range of workshops – both in English and German:
- ♿ Accessibility Workshop
- 📈 Best Practices Workshop (including accessibility related topics)
- 🚀 Performance Workshop
Conclusion
In this post, we explored the fundamentals of web accessibility — from its history and key statistics to the regulatory landscape, including the upcoming European Accessibility Act.
Whether you’re a developer, designer, or business owner, understanding and implementing accessibility best practices is essential for creating inclusive Angular Apps for everyone.
This blog post was written by Alexander Thalhammer. Follow me on Linkedin, X or giThub.