I've always wondered how one could resolve the following scenario:
You have a navigation menu on a one-page website. When a navigation link is clicked it scrolls to that section of the website. However, the clicked navigation link has the outline of being clicked.
Is it possible to clear this outline after being clicked? Reset the look so it looks like it was never clicked at all. Without having to click on another element?
This CSS property you are referring to as the "dotted line" is the outline property of a "focus"ed DOM element.
You can read up about best practices for handling the outline of an element here: http://www.outlinenone.com/
As outlined on that site, if you must remove it, you can quickly do so by adding the following CSS declaration, however for accessibility it is recommended that you then create a replacement focus style if implementing the below:
:focus {
outline: 0;
}
Related
I'm mainly interested in the a11y aspects
So as you might be aware, sometimes you might wish to have a button that acts as an anchor.
These are 4 ways (I can think of) of approaching this issue:
1. Button inside an anchor element
<button>Button</button>
2. Anchor inside button element
<button>Button</button>
<!-- Also should it be a href or button onclick (?) -->
3. Anchor styled as a button (without a button element)
<a class="buttonLike" href="//redirection">Button</a>
4. Button acting as a redirection (without an anchor element):
const button = document.getElementById('button')
button.addEventListener('click', () => {
window.location.href = "//redirection"
})
<button id="button">Button</button>
I've tried to find an answer to this myself. Closest I could find was this excerpt:
According to the MDN anchor spec, which states the following:
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.
Unfortunately this doesn't help me too much. Basically all it states is you should not use the third approach (anchor styled as a button) if you don't mean to provide a real link to it, which is not what this question is about.
Is there any official WCAG on this subject matter that I was unable to find or?
Option 1 is not valid HTML.
Option 2 is not valid HTML.
Option 3 is the correct choice here.
Option 4 is semantically incorrect.
Semantics are one of if not the most important aspects of accessibility.
There are two things at play which dictate option 3.
The first is that an anchor should be used only to jump to sections and to navigate between pages.
The second is that a button should perform actions on the same page.
Now if you want to style a call to action link to look like a button that is fine but make sure you use the correct semantics, but make sure that CTA leads to a new page or it isn't semantically correct.
And although it is swearing on StackOverflow to mention SEO, a hyperlink rather than a JavaScript redirection will be far better.
The first and second rules of ARIA say:
1st rule : If you can use a native HTML element [...] then do so
2nd rule : Do not change native semantics, unless you really have to.
Interactive elements like a and button can't contain other interactive elements:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
So, as what you want to do is linking to a page, your third solution is obviously the only one correct.
I think you might have confused the "bogus" stagement which refers to your 4th example.
From my little experience with Accessibility and semantics there is no "one size fits all". It really depends on your priorities and the user experience you are aiming for.
A <button> gets all the accessibility goodies from the browser automatically: Being selected or pressed using the tab or spacebar/enter keys.
A <a> element is a link, links are meant to be used as links or anchors within a page.
Anchors are not as important in comparison to a button within a page. From a user experience point of view; a button is used by people to interact with a UI, either to confirm or make the UI do something. Pressing a button provides a different feedback compared to a link. Anchor links on the other hand help a user with finding content within a page.
Again, it really depends on what you are trying to do:
Is this a terms page or an article? Then list your anchor links without any button-like styling
Does this a link that has to look as a button so users find it easier to spot or interact? Then style it as a button without it being actually a <button>.
Working with WordPress, I have created a one page site that uses anchors in a custom menu to jump to specific parts of the page.
It jumps to the section of the page that I have specified, as intended. However, it is creating a very visible, blue selection box around the content that it is jumping to. I have not included code in the CSS file or any project files that should be adding a selection box. So my assumption is that it is being caused by Wordpress?
Is there a way to disable a selection box around the content that is being jumped to?
What is happening is you are getting the outline property add around your selection this happens on chrome alot when you click buttons or focus on something. Try adding a class similar to this
SELECTION:focus {outline:0;}
to the object that is being highlighted or anchortag without seeing the code and what it is doing its hard to pinpoint the exact class
I have set up a chart with a lot of links and it really bugs me when it shows where the link goes in the bottom left hand side of the browser whenever you hover on a link, like so:
Is it possible to remove this? any method will do as long as I can hide/remove it (HTML, CSS, JS etc..)
The status bar highlighting happens only when you use an <a> element with a set href.
If you use pure JavaScript to open your link, and don't assign a href attribute, nothing will turn up in the status bar.
I don't know how much control you have over the chart html, but if it renders <a> tags there's not much you can do.
You could try running javascript after the chart is renderred to attach onclick event handlers manually to all <a> tags and set href = '#'.
I had a similar problem that led me to this thread. I figured I'd post my solution here rather than start a new thread about it.
I have a WordPress site with complex menus, and those menus had subheadings which the theme rendered as <a> links with empty href values. The site manager didn't want the bottom corner to display as a link if those were hovered over, since they didn't work has a link anyway.
<a href="#" class=" no_link" style="cursor: default;" onclick="Javascript: return false;">
I tried removing the "#" under href but it still showed the site's root url on hover.
Since the anchor tag's class list already included no_link as a class, I simply added the following jQuery to the global JavaScript file:
$("a.no_link").removeAttr("href");
Note that the intention was to simply remove a link's address on hover if it wasn't supposed to be a functional link anyway.
Refer this link here :
http://www.experts-exchange.com/Web_Development/Miscellaneous/Q_21278295.html
However , if the chart is not under your control, then this may not nbe the way
As suggested in the link :
Pink Floyd
You can also use jQuery to bind the mouseover event on these anchor links without editing individual <a>
I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.
I had the same problem and found an easy workaround which I have used here
hover example
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.
We had this problem and changed the hover to clicks.
Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.
You will have to switch from hover to click event for this case. There's no workaround for that.
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device.
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.
Put this line of code inside your head tag like this:
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
element:hover, element:active { Your CSS }
Voila.
Effect I'm trying to achieve:
In Twitter's new redesign, they implemented a "sticky" dropdown menu for the account settings area.
Basically, when you click on your username in the black global nav bar at the top, a menu is toggled open and stays open until you click on one of the links or on your username name again to toggle it closed.
I'd like to achieve the exact same effect of a sticky menu with just CSS and HTML. I'm okay with using CSS3 features, but if this can be achieved without relying on CSS3, that's even better.
What I've tried so far
I can create the basic navigation menu with dropdown working with pure CSS and HTML, but only using the :hover pseudoclass. I tried out the :active pseudoclass, but unfortunately it doesn't "stick" and stay open.
Is this "sticky" dropdown effect even possible without relying on javascript? If it is not possible without relying on javascript, how should I handle this so it degrades gracefully?
I'm going off memory here as I cannot access Twitter from work. If I recall correctly, the same script is used on the main page to login. It creates a little popup type window that stays there even after moving the mouse.
If that's what you're talking about you can't achieve that with just CSS; it's a styling language, not a scripting language. The :hover/:active pseudo-class styles will all un-apply themselves as soon as that event stops.
The alternative with Javascript involved would be to make the button a link that leads you to an actual page. Then bind it's onclick to popup an absolutely positioned div that's hidden by default (return false within the onclick to prevent following the link). This div isn't hidden until whatever condition you want to hide it with, and it starts off hidden, so if they don't have Javascript they won't know what they're missing.
Use the pseudo class :focus instead of :active. You might also need to use tabindex="" in your HTML to make an element accept focus.
However, iOS touchscreens don't seem to recognize tabindex="".
It's possible to achieve with help of CSS use label in combination with input[type="checkbox"] and :checked pseudoselector to store state
See example at https://developer.mozilla.org/en/CSS/%3achecked