I have a responsive website, once the website reaches mobile width the menu gets hidden and only shown when you click the menu icon. This icon is hidden within the HTML until you reach this break point.
Question: what is the correct label that I should be giving the element?
I was thinking of adding aria-hidden="true" which is correct for desktop browsers but on mobile it's not hidden.
<a href="#" id="menu-phone" data-menu="mobile" title="Show Menu">
<span>Menu</span>
<i class="icon"></i>
</a>
aria-hidden="true" wouldn't be necessary because:
on desktop the link is already hidden in CSS (by display: none or visibility: hidden)
on mobile it's shown and must be perceived by screen readers and other ATs
I guess the element a > span is visually hidden (out of the viewport) and only the icon in i is shown on mobile? Then you could have the text "Show menu" in it and no other attributes, whether ARIA or #title would be necessary.
If "Menu" is shown, then yes the link title a[title="Show Menu"] is better for a more explicit link.
Beware: if you're using ARIA role landmarks (and you should), [role="navigation"] should be added to a container of both your navigation visible on desktop and this link that's the only visible part of your navigation on mobile. Otherwise the user will jump to an invisible nothing with no clue of where the navigation is and no clue either that there's a special link/button to show it again.
Same for skip links: it should point to an element placed before both the navigation and this link/button.
Related
I have a website that displays content based on items checked in a menu list. If the screen width gets too small the menu is rotated and hidden. Additionally, a burger button is displayed. If the burger button gets activated (checkbox as well), the menu is unhidden and the content is hidden.
Neither the content nor the menu have access to the checkbox behind the burger button, because they are children of a sibling of the burger button.
As a result, if a menu item was checked, the burger button is not unchecked, and the visitor needs to click on the burger button again to close the menu and see the content.
Somehow I need to find a hack to uncheck the burger button, if a different menu item was selected, or if a menu item was clicked.
JavaScript is not required yet and shall never be used.
I hope someone knows a hack to fix this - I am clueless in this case...
Thank you for your numerous comments.
The answer is quite simple: CSS3 can't do what I tried to achieve. There was no trick at all to get this done, not even involving the :target pseudo-class, because CSS can't manipulate and reset the URL anchor, neither can it untick the checkbox. That caused the menu staying visible after selecting the content as mentioned above.
As a result, I have rewritten the whole website (well, not the content to be precise).
There is a theoretically simple solution: Using sibling radio buttons for all controls.
This means:
I have one radio button for the burger menu. It accesses the following (sibling) <div> element with the adjacent sibling combinator (+) and toggles the burger menu on and off. (Which results in a changed visibility property.)
I have multiple radio buttons for the content. Succeeded by their respective content div analogously to (1.).
I have multiple labels all over the place that address these radio buttons by using their for attribute. Fortunately, the for attribute has multiplicity 1:n, so that it was possible to address the content <div>s by both, the <nav>-bar, displayed for high resolution devices, as well as the burger menu, displayed on low resolution devices on click on the burger button which is not visible for high resolution displays.
So as a result, I don't do any menu transformations, but have just duplicated the <label>s for these toggles and display either the <nav> bar or the burger button.
Downsides:
I lost the ability to keep the style of the <label>s for the currently active content changed while this content is displayed, since these <label> elements are not siblings of their corresponding checkbox/radio anymore, but on :hover there is an effect.
It is not possible to have the burger menu displayed leaving the current content displayed as well in the background. Both are and need to be in the same radio button group, which means that the burger menu is displayed instead of other content until a label is clicked in the burger menu.
Why am I even doing this (Benefits):
From my perspective, running scripts on a visitors machine is like highjacking their compute power on their device in their sphere and by forcing them to activate JavaScript or other stuff, exposing them to serious risks that could be avoided. So as a result, I consider the unnecessary use of JavaScript as an unethical act.
With this hiding technique of the content I am able to transfer all the content to the visitor a single time and allow for a perfect experience once the content is loaded.
I am trying to make a scrollbar appear only when a user hovers over the component. The problem is that the scrollable element has a cutoff on the side of it when it is hovered compared to when it is not, like in the video below
This is the css I am using to make the scrollbar appear when it is hovered over
.scroll-on-hover:hover {
overflow-y: scroll !important;
}
And then it's applied like
<div style="position: fixed;" class="scroll-on-hover">
<nav style="background-color: navy; height: 100%;" >
...
</nav>
</div>
It happens because you are forcing it to show the scroll bar.
It is the expected behavior, a scroll bar will always occupy and overlap the content.
As you say:
I am trying to make a scrollbar appear only when a user hovers over the component. ...
There are two problems:
By making it just scrollable or not, you are not showing or hidding the elements.
The :hover works only on desktops, mobile cannot do that.
For the first problem, I encourage you to use "play" with display, translate, or any other prop that actually can hide and show the elements.
For the second, a similar approach can be :active, it's when you click and touch on mobile, instead of :hover that works only for the desktop mouse.
Edit
What you are looking for, is not a native scroll bar, it is a div, actually a lot of them and a huge peace of functionality.
Facebook is making a mimic of a scroll bar, a custom one, and for sure it's way more complex than an overflow-y style.
I created a "one-page scroll" responsive site. In the navigation items I added the following code to make the page jump to that specific section:
// For example the contact menu
Contact
// Then in the contact section I added this
<a name="contact"></a>
This works perfectly in the full width website.
However, since my site is responsive, in the mobile view, when I click on "benefits" for example, it does jump to the benefits section, but it adds the height of the menu. Is there a way to not get all that height?
You can view the page here.
I'm having trouble trying to figure out why via mobile (iPhone, iPad, etc.), the sub-cateogories on my nav menu won't open. I have installed here: http://thebrlab.com/ugo-mozie/index.html Here is the original example demo of the nav menu http://thebrlab.com/ugo-mozie/menu.html (which works well when I tap the headers on mobile)
The reason that it won't work is because the device can't sense whether you are hovering over it. It only senses when you touch it and it is non-clickable
Seeing as the link goes nowhere remove the href off the a tag and if you want to have a pointing cursor (clickable content) add this css rule:
cursor: pointer;
This way it will work on mobile and the page won't keep refreshing when you accidentally click it
Two pages, one with <a href='some_url#some_name'>, and second, on some_url, with <a name='some_name'>.
So after clicking on URL1, page 2 loads, and URL2 is on the top of the the page.
Now about the problem: this URL2 hidden under twitter-bootstrap's top menu, which have fixed position.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I'm tried both Firefox and Opera, it seems no browser dependency.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I guess you are referring to the link in the navigation span on the left of each page. If you look at the css, specifically the docs.css file, which contains the style rules for the documentation website, you'll find out that every section has a padding and that's why they don't appear below the navbar.
As you can see the section does start hidden by the navbar, but the padding moves the content down so it became visible.
Hope this helps.