Topic: mdb-side-nav Logo accessibility
as I get used to using MDBV I am getting a feeling that accessibility of any sort doesn't seem to be a thought.
in this example a basic Alt tag for an image wasnt thought of for the logo of the mdb-side-nav. a logoClass was added but nothing for an Alt text
Is this something that can be added in. as well as more accessibility as a whole.
Expected behavior
<mdb-side-nav slim :isCollapsed="collapsed" :OpenedFromOutside.sync="toggle" mask="strong" logo="/assets/images/logo.png" logoSn logoAlt="Image Alt text" logoClass="example-class" :sideNavClass="adminSideNav" ref="sideNav" fixed waves darkWaves>
This would render as
<a data-v-4f39a386="" href="#" class="pl-0"><img data-v-4f39a386="" src="/assets/images/logo.png" alt="Image Alt text" class="example-class"><!----></a>
Actual behavior
<mdb-side-nav slim :isCollapsed="collapsed" :OpenedFromOutside.sync="toggle" mask="strong" logo="/assets/images/logo.png" logoSn logoClass="example-class" :sideNavClass="adminSideNav" ref="sideNav" fixed waves darkWaves>
this renders as
<a data-v-4f39a386="" href="#" class="pl-0"><img data-v-4f39a386="" src="/assets/images/logo.png" class="example-class"><!----></a>
Resources (screenshots, code snippets etc.)
I fail to see where this is fixed? The issue was in
<mdb-side-nav slim :isCollapsed="collapsed" :OpenedFromOutside.sync="toggle" mask="strong" logo="/assets/images/logo.png" logoSn logoClass="example-class" :sideNavClass="adminSideNav" ref="sideNav" fixed waves darkWaves>
Where it lacks a logoAlt.
your link directs me to the Navbar not the SideNav. Looking at the API for the sideNav I dont see anything to do with a logo Alt
Still on this page You can check that keyboard accessibility for regular sidenav works also with logo: https://vue.mdbootstrap.com/#/navigation/pro/sidenav. The issue exisits in slim sidenav which will be updated soon.
Best regards
I was referring to the lack of an ALT tag on the LOGO prop for "mdb-side-nav". I never mentioned Keyboard accessibility in this
My suggestion was just adding another prop to it to accept say LogoAlt=""
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: 6.1.0
- Device: desktop
- Browser: All
- OS: Any
- Provided sample code: No
- Provided link: No
Devinec premium commented 5 years ago
What would be nice as well is some way to toggle the logo if slim is used. so a smaller version of the image can be used