Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: mdb-side-nav Logo accessibility

Devinec premium asked 5 years ago


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.)


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


Mikołaj Smoleński staff answered 4 years ago


Sorry for the inconvenience. I'm adding it to our list of requests.

Best regards


Devinec premium answered 4 years ago


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=""


Mikołaj Smoleński staff answered 4 years ago


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


Devinec premium answered 4 years ago


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


Mikołaj Smoleński staff answered 5 years ago


Yes, the issue was fixed: https://vue.mdbootstrap.com/#/navigation/navbar

Best regards.


Devinec premium answered 5 years ago


Has this been addressed yet?


Mikołaj Smoleński staff answered 5 years ago


Thanks for letting us know about the issue.

We'll fix it soon.

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.1.0
  • Device: desktop
  • Browser: All
  • OS: Any
  • Provided sample code: No
  • Provided link: No