I have noticed on webkit browsers that anchor elements do not receive focus when clicked. Inputs and divs (with tabindex set) do. Of course, tabbing will set focus to an anchor, as will javascript .focus().
My questions: Why does this happen? and does anyone know any tricks to make an anchor receive focus upon click?
I think you should add tabindex to anchor tag.
Following link will help: tabindex usage
Related
I was wondering, can you make an element that is not an anchor (<a>) tag (for ex. <div>, <span>, etc.) behave like an anchor tag? (Link to page on click).
Or, are there any other elements that behave the same?
Only partially.
You can give any tag a tabindex to make it focusable.
You can give any tag a click event listener that sets location.href.
You can't make anything other than a real link react to :link and :visited in CSS
That leaves aside issues of getting (for example) screen readers to recognise the element as a link and annouce it to the user, and for search engines to recognize it as a link and follow it, and the JS simply failing.
In short: If you want a link, then use a real link. HTML is a semantic markup language. Use the semantics it comes with. Don't try to fake the behaviour that comes with the semantics using other elements.
I've grid with several boxes in (<div>). Each box has inside a list with couple/ several links (simple ul li list with <a> elements). This link list is hidden, it shows only on hover.
It works really fine, but I have accessibility issue, namely, I can't get into any list element with "tab" key (box <div> works ok, it get focus, so the list is showing up), it is just skipping to next box element. I've tried with adding tabindex on each box and each list element inside, but it seems that this is not the solution.
Is there any CSS/ HTML solution for that? I can of course write simple JS, that will check where is focus and if focus has parent with focus option, but I would like to avoid it if possible.
How did you hide the link list? Using display: none or using visibility: hidden. (And that you apply this only to the list elements or also to the div? From your description, I guess it applies only to the list elements.) Content that is hidden using display: none is not keyboard accessible.
In order to make the list appear on hover, are you using a JavaScript event handler or CSS? If you are using JavaScript, you probably need to add an event listener that responds to keyboard events (e.g. onfocus, but as mentioned above, content hidden with display: none won't receive focus). In CSS, I always recommend adding the :focus pseudo-class whenever :hover is used (unless you want different styles for these things).
You may need to write some JavaScript that toggles the visibility of the lists when a parent div receives focus. (If you have tabindex on the div elements, as you say, they should already be able to receive focus.)
I have a rough idea that it hops from <input> to <input> but is there any documentation for it? My purpose was to look for a way to set focus only in css.
If by "focus" you mean the focused element when tabbing through elements in a rendered page, then the tabindex=nn attribute defines the tabbing order.
According to the W3C Documentation
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA
See also Creating Logical Tab Order with the Tabindex Attribute
So I was able to get my page working just fine with the NDVA screen reader, however, when testing in JAWS, it tabs to the span, but doesn't read the text.
<span tabindex="0" title="whatever">whatever</span>
UPDATE:
What I am trying to achieve is a I have a few elements which expand/collapse certain sections of the site I'm building. These functional elements, however are not links.
Reponse to #discojoe (thanks for the response)
Adding a TABINDEX="0" attribute will insert the SPAN/DIV element into tabbing list in natural order (whereas by default, they're usually not added to the tabbing list). This allows screen readers to tab to that element, and is working just fine. Specifically, my problems is JAWS will just tab to that element, it just doesn't read it.
I agree, using TABINDEX="n" (where n > 0) is a bad thing which messes with the natural order of the tabbing list, and I am not doing that.
Also, you can use TABINDEX="-1" to remove an element from the tabbing list if it's placed in there by default (example an A or INPUT tag).
I have already tried using tags, however, when user hits enter on this link (to trigger the onclick event), it does something (not quite reloading, but kinda re-initializing) to the page which delays the animation associated with that element. I find that to be a bad experience to both normal and disabled users.
using the # tag in the A tag adds the hash tag to the page title in IE.
Additionally, using A tags makes the screen reader read out "LINK" before/after each element, and since they're not actually links, I feel this is negative impact on accessibility.
I would first want to know why you are using a span element and not a standard a href element? What is it you are wanting to achieve? It may help if you can provide more context\code.
I've just tried this and am getting the same issue; whilst I can arrow through the document and have a span read out to me, I cannot then tab to it and have it read out.
Using something instead like
Whatever
works fine.
There are additional problems around using the tabindex attribute, specifally for keyboard users. On a page that users the tabindex attribute, the tab focus order will first of all go through all of the elements with tabindex specified, and then run through all the elements without it, in source code order.
A good general rule is to either use tabindex for all keyboard accessible elements, or for none of them, to get around this problem.
I realise in this case, you are likely using tabindex to just provide keyboard accessibility for this one item, so this issue may be irrelavant if you use the a href approach mentioned, but I wanted to mention it for completeness
First of all, reading "link" before such elements does not impact accessibility in a negative way, I'd say, it's quite opposite: you warn the user that he/she can click the element in such a manner.
Here you have a couple options:
Use quite a lot of ARIA: add the link role to your span elements, properly code your expanding/collapsing menus (with corresponding ARIA roles and states).
Use <a href="#" as suggested by #discojoe but add event.preventDefault() (in jQuery) or return false; (in vanilla) so the page would not reinitialize.
If you need more suggestions, please post some code or a link to your page.
Use anchor tag for screen reading simple text related works. You can simply do :-
<a href="javascript:void(0);" title="What you want to be read by jaws></a>
That's it. I tested it with JAWS.
Is it possible to cancel an <a href="..."> from being tabstopped in any browser? I would like to do this without Javascript.
Some browsers support the tabindex="-1" attribute, but not all of them, since this is not a standard behaviour.
Modern, HTML5 compliant, browsers support the [tabindex] attribute, where a value of -1 will prevent the element from being tabbed to.
If the value is a negative integer
The user agent must allow the element to be focused, but should not allow the element to be reached using sequential focus navigation.
You could apply a JQuery handler to the element you want to target multiple elements with no tab stop.
$(document).ready(function () {
$('.class').attr('tabindex', '-1');
});
Would be one way to do it....
I think you could do this by javascript, you override the window.onkeypress or onkeydown, trap the tab button, and set the focus at the desired order.
Remove the href attribute from your anchor tag