Is your enterprise Angular application accessible? — Better it is, before June 2025.
Open AI Dall-e-2 generated scene image
If your enterprise application is not compliant with the Web Content Accessibility Guidelines (WCAG), your company might be sued with serious penalties that may reach 250k EUR, depending on the business and the country. In France, for example, the government websites are witnessing an active audit and mitigation process. As indicated in this official statement, any non-compliant public website can be subject to up to 50k EUR.
Disability: stricter obligations for the accessibility of administrative sites
Accessibility is a secondary interest for most developers, especially in small start-ups and non normative contexts. This is no longer tolerated at scale. The EU has published the new legal act that will force enterprises with significant digital presence to meet the inclusiveness rules by June 28th 2025. This is bad news for non accessible websites ~ Read more about the new legislation here:
Directive – 2019/882 – EN – EUR-Lex
The good news is that if you are using Angular, you can benefit from battery-included accessibility utilities and services that help save your company from being sued and make your digital presence as inclusive as possible.
After you read this article head over to your applications and see how many gaps you will need to fill (hopefully not too much), before the aforementioned deadline.
In today’s blog we will see where Angular stands when it comes to accessibility rules/standards.
Angular Component Development Kit and a11y
There is no value in repeating what’s already in the documentation here:
What you should know (and probably remember rather) is that this package (@angular/cdk/a11y) is very handy at two levels of accessibility:
Keyboard navigationAssistive technology (like screen-readers).
Among the utilities that, I personally find very useful to use, are FocusMonitor and LiveAnnouncer. On the FocusMonitor service, you can have a look at this brilliant stackblitz example.
https://medium.com/media/53a9426e4a62d91edaea351aa5658fc2/href
Explore the rest of the utilities by running npm i @angular/cdk in your project and see what the embedded a11y services can offer to you from the docs!
Angular ESLint plugin accessibility rules that you should add to your app
In big enterprise projects, especially multi-app / library workspaces like Lerna or Nx monorepos, which are very popular within the frontend communities today, there is nothing better than an early feedback.
When you have dozens or hundreds of developers pushing code on a daily basis, some accessibility attributes or even semantic HTML standards can slip through the code-review process.
Adding linting rules either in CI or before, in your library or application linting configuration file, will ensure that developers will catch the accessibility bug in their IDE before it lands in high environments and gets caught by QAs or in production and gets experienced by your customers. The latter would not be a good day for your customers with disabilities (not to mention being reported in an official audit report thatgets translated into a penalty).
All those scenarios are strong arguments to enforce accessibility in your workspace via a set of rules that will stand guards on your codebase’s health frontiers.
Angular ESLint plugin team did a great job crafting a set of rules that are very handy to use and easy to add to your Angular codebase, here is the list:
“rules”: {
“@angular-eslint/template/accessibility-alt-text”: 2,
“@angular-eslint/template/accessibility-elements-content”: 2,
“@angular-eslint/template/accessibility-label-for”: 2,
“@angular-eslint/template/no-positive-tabindex”: 2,
“@angular-eslint/template/accessibility-table-scope”: 2,
“@angular-eslint/template/accessibility-valid-aria”: 2,
“@angular-eslint/template/click-events-have-key-events”: 2,
“@angular-eslint/template/mouse-events-have-key-events”: 2,
“@angular-eslint/template/no-autofocus”: 2,
“@angular-eslint/template/no-distracting-elements”: 2
}
You can scale down to 1 to signify “warn” and 0 to signify “Off”. Scale 2 means “error” when an issue is detected.
Check the implementation details of every single rule in the plugin repository on github here:
angular-eslint/packages/eslint-plugin-template/src/rules at main · angular-eslint/angular-eslint
Hands on Angular interactive training and an evergreen accessibility course
By adding the rules above most of the potential accessibility defects in your application should be detected during component authoring stage. Yet, the baseline is to always follow semantic HTML and proper styling standards to avoid having accessibility problems in your applications.
The well known Guidance from Chrome Developer Relations’ website (aka, web.dev) offers an interesting, comprehensive, yet free, high quality course (articles and video learning materials) on accessibility standards that you should definitely have a look at and pass it to your developers/teams to benefit from it !
Here is the link to the learning material journey:
That course is presumably the best high quality accessibility content you can find for free on the internet. It’s not specific to Angular. It is a valuable asset to any web developer whatever the technology your company is using.
You might be wondering: Is there any practical Angular specific course/content that puts accessibility concepts in action that my team (or myself) can benefit from?
The answer is: Yes!
Head over to the following repository under Google Code Lab:
That repository represents the codebase of an interactive learning application that will take, roughly, one hour of your time. It’s a brilliant demonstration of how you can fix different accessibility bugs in an Angular application. There is a support for different natural languages under the Google Lab website.
Here is the multi-stage interactive app that you can play with to brush up your a11y skills as a web developer who cares about inclusiveness and does not want his company to be sued for significant money while knowledge is free.
Build more accessible Angular apps | Google Codelabs
Conclusion
An excellent CX (Customer eXperience) is a reflection of an excellent DX (Developer eXperience). If you are working at scale, leveraging tools to automate such tedious tasks would be your optimal choice.
Many technologies like Storybook, Cypress and Playright are very useful in this regard. If you do not want to go that far, Angular itself has so much to offer when it comes to a11y.
By looking at Angular’s landscape we find that the platform offers a set of tools that is composed of a linting plugin for better component authoring DX and an embedded a11y package under Angular CDK that has various powerful services out-of-the box for custom components authors. Such tools make Angular stand out as a mature web development technology.
Angular’s accessibility rules and tools are great, but developers should acquire knowledge to mitigate a11y bugs. The learning materials offered by the Angular team under the Google Code Lab application as well as the free valuable training material under the Guidance from Chrome Developer Relations’ website (web.dev) make the justification of pushing non accessible features to production, not to mention being sued for significant amounts of money, while knowledge on accessibility is free, absolute.
Is your enterprise Angular application accessible? — Better it’s, before June 2025. was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.