search

Orange-OpenSource / Orange-Boosted-Bootstrap

Orange Boosted is an accessible, ergonomic and Orange branded framework based on Bootstrap
https://boosted.orange.com/
MIT License
193 stars 56 forks source link

Skip Navigation Links #1694

Open julien-deramond opened 1 year ago

julien-deramond commented 1 year ago

Note: this issue is the result of https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/1334, https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/138 and IRL discussions

Skip Navigation Links is already in place in the Boosted documentation. However, the evolution of the global headers broke the rendering when it is minimized:

Screenshot 2022-12-12 at 08 51 36

Improving the actual rendering

One possible way of tackling it would be to make the background of the links opaque instead of being semi-transparent.

But IMHO, the way Bootstrap handles it is better with a dedicated bar on top of the main nav:

Screenshot from 2022-06-23 16-10-56

Improving the interactions

As mentioned by @Aniort, when the "skip bar" is hidden it can be triggered only with the keyboard for the moment. But users with pointing/mouse devices, zoom enabled, and so on, could benefit of this functionality as well.

Idea 1 (by @Aniort):

Most of the time, skip links are hidden if you don't use the keyboard but it's unusable when you use a mouse. So we need to have skip links:

some more functionalities to add compare to supra-bar:

  • these skip links are useful for mobile user so the suprabar should remain visible on small screens
  • even if the suprabar disappear when scrolling down, perhaps on click, the suprabar must disappear too

Idea 2:

Whatever if the header is minimized or not, provide a "semi hidden" visual element that can display one or multiple elements.

An example (not very user friendly) can be found in our Storybook deployed website where there is an area still visible and accessible via both keyboard and mouse:

2022-12-15 12 16 20

Idea 3:

Mix of idea 1 and 2. Add an icon in the global header that allows to display a "skip bar" (like a supra bar) that would be on top of a supra bar or main nav depending on the websites.

Idea from @Lausselloic: store the state in local storage to keep the context

Not only a "skip bar" but an "A11y bar"

If it becomes a "skip bar", let's go further and create an "a11y bar" that could contain more than just skip links. We could add other functionalities by adding some actions on the right of this bar dedicated to a11y.

It makes us think of Orange Confort+ whose some features could maybe be extracted. Such a bar with a11y features, in Boosted, could be propagated in all websites at Orange and the World would be better 😄 ⚠️ Orange Confort+ has a GPL2 license!

Improving the development experience

Still IMHO, ODS should add it as a component or module, and Bootstrap as well (tried something in https://github.com/twbs/bootstrap/pull/37629). And ODS should describe the behavior somewhere:

isabellechanclou commented 1 year ago

Be aware that we have on the same topic:

Aniort commented 1 year ago

hello, as I told you in #138 we should think of displaying skip links when users are on the top of the page and all the points of the issue, ready to discuss

julien-deramond commented 1 year ago

Thanks all I'm going to merge the 3 issues to discuss all of that together :)