I am trying to put outline on a font awsome while navigating with keyboard, but it is not working. I tried to add aria-hidden="true" tabindex="1" like suggested in another post but it still doesn´t work.
<div class="faContainer">
<a class="homeAnchor" href="" aria-hidden="true" tabindex="1">
<i class="fas fa-home fa-2x">
</i>
</a>
</div>
CSS
a:focus{
outline: 3px solid white;
}
tried also targeting i element
Few issues to address here:-
Never use positive tab index
A positive tab index disrupts the natural tabbing order, you want tabindex="0" in order to make something that isn't normally focusable able to accept focus. It is also not needed in your example as <a> elements are focusable by default.
aria-hidden has nothing to do with focus
aria-hidden is to do with the accessibility tree. By adding this attribute you are telling assistive technology (i.e. screen readers) to ignore this item. Remove this.
empty hrefs can get ignored
Your href="" attribute can be ignored in certain circumstances as it is not a valid hyperlink.
Add href="#" during testing if you do not know the URL you want to point it at currently.
If it is going to be used to make a change on the current page use a <button> element instead as that is semantically correct (i.e. it is going to work with a JavaScript function rather than function as a link).
how to find out why outline isn't working
The above CSS (on a dark theme) should work fine.
On Google Chrome -> Open developer tools (F12) -> inspect the element.
Top right you will see Filter :hov .cls +
Select :hov and click the :focus checkbox.
There will be a rule set that is over-riding your a:focus rule, either by being more specific (e.g. a.homeanchor:focus) or by using !important.
That rule is likely to be outline:0 or outline:none so you could also try doing a search within your CSS for those terms to identify the issue.
Related
I have build a dropdown menu that works a sweet as it gets.
Right click on an element, brings up he dropdown menu, i hover over the first choise, soo far so good, the font color and the background color changes as it should and the sub-menue opens. The problem is that when i hover over the sub-menu, the i "loose" the gray background color of the "parent"
Any ideas ?
<div id="contextMenu" class="dropdown-menu" role="menu" style="display: block; left: 997px; top: 438px;">
<ul class="dropdown-menu side" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;"><li class="dropdown-submenu"><i class="fa fa-paste" aria-hidden="true"></i> PARENT OPTION <ul class="dropdown-menu"> <li> <a tabindex="-1" data-url="/common/docitem/copymove/?document=247&dest=1&obj_table=companydocument&f=null" id="add_id_copy_p" style="cursor:pointer;" class="js-movecopy-docitem"> Siblin Option</a> </li>
First things first, you must include a code segment to make it easier to understand the issue, as #Paulie-d and #Rokibol Hasan mentioned. To be honest, this sounds like maybe you have conflicting CSS rules or lack of specificity, which results in your parent element being affected on :hover.
These would be the steps I would use to solve this:
Use the find function of your development IDE (CTRL + F) to find :hover elements. Avoid using very broad CSS selectors.
Make sure you have assigned the correct id and class attributes in the desired section of code.
Refresh your memory on CSS specificity. I provide you this website instead of Mozilla only because I do not know if you can handle it. If you are experienced, prefer this website.
Refresh your memory on CSS selectors.
At this point, go in your CSS and start commenting out and testing one by one sections of code that may affect the parent element you speak of.
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.
I'm trying to achieve this click effect in CSS. http://www.tomdwyerdesign.com/graphics/
I thought I could do it via the :focus selector but I've run into a little problem.
This is the HTML:
<a class="tile" href="#">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
and this is the CSS:
.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}
It doesn't seem to select it properly. Any one know why?
Thanks.
The problem is that a link is not necessarily focused when it's clicked, it's focused when you navigate to it. You can do this with the keyboard, or you could add a click handler to the link. Of course at that point, you're back into javascript, but it shows what's happening.
E.g.
<a class="tile" href="#" onclick="this.focus()">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Luckily, there is a better solution, and one that doesn't require javascript. If you add a tabindex to the link, clicking it will focus it even if the href is going nowhere. So...
<a class="tile" href="#" tabindex="0">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Should do what you want.
(your next problem is going to be that the background-image won't be visible in front of the src image - you're just going to get a stretched version of the thumbnail. But I think that's a different question)
:focus is only available on elements that receive keyboard input (i.e. form elements). You could try :active but it will only apply the CSS while the mouse button is down.
I don't know how strong the support of RadControls over here is, but it can't be worse than Telerik(there I'm lucky to get a response in 2-3 days), so I'm going to try here first.
Basically, I'm trying to do custom theming(using just CSS classes) throughout my application, so I tried setting the CSS classes needed on the telerik RadTab controls.
Well, when inspecting it in firebug, it adds an extra like 50 px of padding to each tab, which there seems to be no control over. This is their rendered markup
<li class="rtsLI rtsFirst">
<a href="#" class="rtsLink ui-state-default"> <!--This is the only place where I can put in my own custom CSS class-->
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">
Common Application
</span>
</span>
</span>
</a>
</li>
Now, I know you can't see the style classes, but according to Firebug, every class prefixed with "rts" has the line padding-left: 9px in the style sheet which would of course explain the extra padding problem. (Why do they need all this nesting anyway?!)
Anyway, I would like to remove that padding. How would you do this? Also, is there some way jquery could help to remove the padding?
If you know which setting you need to change for which classes, then the best thing to do would be to build an own style sheet with those instructions, and include it after the original stylesheet.
The important thing is to specify the classes exactly as you see them in the original style sheet, because the more specific a rule is, the more weight it has when the browser determines which settings overrule which.
This is slightly more work than doing a simple .className xyz { padding-left: 0px !important } but much, much better for maintenance. Plus, IE < 8 doesn't respect important.
I'm trying to make a "clickable" region.
<a
style="display: block"
href="http://stackoverflow.com">
StackOverflow
</a>
A is an inline element but the CSS made it a block.
If the above is valid, then the following should be valid too:
<a
style="display: block"
href="http://stackoverflow.com">
<div>Some DIV that links to StackOverflow</div>
</a>
But validator.w3.org shouldn't be flagging it as invalid (which it is right now).
If it is invalid, what would be the most proper way to make a block element "clickable" and redirects to an arbitrary page. I'm aware I can use JS onclick to achieve this behaviour, but how will Google see this?
The validator is correct - you can't put <div> inside <a>, no matter what you do afterwards with CSS.
The proper thing to do is what you did in your first code block - <a style="display: block;">
If you want something inside that you can do <a style="display: block;"><span style="display: block;">
Don't confuse valid HTML with valid CSS. It is valid to use the display css property to make inline elements block. It is not valid to put block HTML elements within inline ones.
It doesn't follow that the one being valid implies the other has to be. There are nesting rules for HTML, and div-within-anchor doesn't fit them, which is why validator.w3.org is giving you a hard time.
If you truly must have a div, rather than text, images or <span style="display: block">s, that's clickable, then yes, you will have to use an onclick event. Google will not understand or acknowledge the existence of the link. (You may be able to cope with this by having an anchor on something that anchors can apply to, in addition to the onclick div.)
Something I've done in the past with this sort of problem is invoke the click on the parent element (My example uses jQuery):
<div class="link">
Visit Google
</div>
$(".link").click(function(){
document.location = $(this).find("a:first").attr("href");
});
With styles you could make the entire area appear to be the link by setting the cursor, a roll-over state, etc.
First you need to know whether you want to use strict or transitional XHTML (frameset is not useful here). Then you look into the DTD (link) and you'll see that A cannot have a DIV inside.
Why don't you use an area tag for this? It is supposed to define the clickable area in an imagemap.
Google bots now follow simple javascript links, so using JS on the onClick event of your div is an option. Other search engine bots don't do that, but sooner or later they will.
More info in this article.