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
Смотрите видео Router link accessibility features онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Brian Treese 07 Июнь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 23 раз и оно понравилось людям.