Router Link and Accessibility

Making apps that are accessible for everyone can be a challenge for many developers. If we don’t have any real issues using devices or seeing what’s on the display, it can be easy for us to overlook simple things that are really import for those of us who don’t have this luxury. So, we need to continually learn how we can be better at this and how we can leverage the tools we already have to help. In this video, I’ll show you how we can pretty easily make an existing breadcrumb list more accessible for everyone with a few directives from the Angular Router Module. Alright, let’s get to it.
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before (stackblitz.com/edit/stackblit...)
- After (stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
0:42 - The Demo Application
1:46 - The Existing Code
3:06 - Adding an “active” Class with the routerLinkActive Directive
4:41 - Adding “Active” State for Links Only When They are an “Exact Match” with the routerLinkActiveOptions input
6:48 - Adding ARIA for Enhanced Accessibility
7:06 - Adding the aria-current Attribute with the ariaCurrentWhenActive Input
7:59 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #accessibility #routing

[@blokche_dev]

It could also be an ordered list I guess?
Nice to see efforts put on accessibility. Thanks for sharing!