Topic: How to add ARIA attributes to a component
Mike Barlow asked 5 years ago
I'm trying to add some aria attributes and alt attributes to the header section of the mdb-side-nav component (See below). Is there an easy way to do this or do I need to override the component with one of my own (and if so how would I go about that):
<div data-v-5b9dec4c="" class="white-skin deep-purple-skin">
<div data-v-4a2dcd94="" data-v-5b9dec4c="">
<div data-v-4a2dcd94="" class="side-nav wide fixed sn-bg-4">
<div data-v-4a2dcd94="" class="ps" style="width: 100%; height: 100%;">
<ul data-v-4a2dcd94="" class="custom-scrollbar list-unstyled">
<li data-v-4a2dcd94="" class="logo-sn ripple-parent">
<div data-v-4a2dcd94="" class="text-center">
<a data-v-4a2dcd94="" href="MySite.com" class="pl-0"
I want to add an aria-label to this anchor tag
>
<img data-v-4a2dcd94="" src="My.svg.png" class=""
I want to add a alt attribute to this img tag
>
<!---->
</a>
</div>
</li>
</ul>
TIA MikeB
Magdalena Dembna staff premium answered 5 years ago
You can use aria
attributes to our components but it will always apply to the wrapper - so getting into the inner structure won't be possible in this case. We cannot encourage destructuring our components - it will cause difficulties with maintenance. You can try to select this element and set an attribute with javascript like in the example shown below:
[SELECTED ELEMENT].setAttribute('aria-disabled', true);
. Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.7.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No