search

foundeo / cfdocs

Repository for the cfdocs.org site.
https://cfdocs.org/
Other
180 stars 342 forks source link

Website Bootstrap Menu Accessibility Issues #1495

Open JamoCA opened 2 years ago

JamoCA commented 2 years ago

The website menu doesn't appear to be accessible on mobile devices or when using a desktop viewport that isn't opened full screen. You can only knowingly access options that are visible and within the browser's viewport. Keyboard focus + tabbing works, but doesn't identify anything focused that is hidden beneath the viewport height

pfreitag commented 2 years ago

Thanks @JamoCA - I have fixed it on desktop, mobile issue still needs to be fixed

JamoCA commented 2 years ago

Ahh... much, much better! Sometimes I develop on a 26" monitor and I tend not to open up my reference browsers to full height.

FYI: I was going to download the project and contribute, but I don't use Bootstrap. (I've used SmartMenus. It requires jQuery, easy to implement, works on all devices/screens and is Section 508 compliant.)

shaedrich commented 2 years ago

The question is: Does such a huge menu even make sense for mobile users? How would you browse the side as a mobile user? What would be neat in terms of mobile usability?

pfreitag commented 2 years ago

@shaedrich - that is a good point, it doesn't make sense to have such a huge menu for the mobile users.

JamoCA commented 2 years ago

Another accessible menu option: We've used mmenu.js for smaller screens & mobile devices. Even if you use a menu with many options, the menu choices are collapsed/expandable and are filterable.

If you used this, the menu options would be consistent for all users and you wouldn't have to provide two different experiences.