Improve page navigation and accessibility
bl-aire opened this issue · 0 comments
When one hears about building accessible websites, it is easy to think it only entails creating sites people with visual impairments or other disabilities can access.
This is part of it but accessibility entails much more than this. According to W3C,
The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability.
When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. Going by this, users who access a site with their mobile phones should also experience ease during navigation and wayfinding.
My idea:
Currently, Jupyter’s homepage is very responsive but I am proposing that the hamburger menu (in the mobile view) changes when clicked to show users that they have to click on the same spot to collapse/close the menu. I believe this will aid navigation but I am very open to corrections.
How it can be achieved:
This can be achieved with CSS animation if the opacity of the menu’s second bar is set to zero while the first and third bars are rotated by 45 degrees clockwise and anti clockwise respectively to form an X when the hamburger menu is clicked.
A simple project built using HTML, CSS and Bootstrap to illustrate this can be seen below:
- Sourcecode: https://github.com/bl-aire/ServiceNow
- Live demo: https://servicenow.vercel.app/