Router link accessibility features
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.
------------------------------------------------------------------------------
👕 Be the coolest developer in the room with these Angular tees! (https://www.teepublic.com/user/dev-drip)
------------------------------------------------------------------------------
🔗 Demo Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://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 #angulartutorial #accessibility
Watch video Router link accessibility features online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 07 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 23 once and liked it people.