How to add links to tabbing order when they're made visible with CSS?


Tags: javascript,html,css,drop-down-menu,accessibility

Problem :

Links that are subject to display: none aren't in the default tabbing order. However, when they're revealed - e.g. CSS for a drop-down menu reveals a sub-menu when a parent link gains focus - they still aren't in the tabbing order. Presumably JavaScript is required, but simply setting tabindex="0" does nothing.



Solution :

The problem here is that as soon as you tab off the "Top level page with child" link, the CSS is updated and the parent of the anchor becomes display:none before the anchor can receive focus. You will need to use JavaScript to solve this problem and delay the change in the CSS using a timeout until you can determine whether the loss of focus has resulted in the focus shifting to the child element.

Setting tabindex="0" when the parent is display:none will not help, display:none means that the content might as well not be in the document.


    CSS Howto..

    How to stack divs from top to bottom in CSS

    On DropDown/HTML Select Show Modal PopUp

    How to stop grunt compass task compiling sass files intended for include

    How to use variable in CSS? [duplicate]

    how to add a css style property dynamically in JSF

    AJAX Call returns JSON, how to render properly formatted data

    How to target CSS link with JavaScript

    Pagination: How to display a long text as book pages?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How can I use the key name instead of value in map-get?

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    how to create multiple instance of a css class?

    Knockout - How to bind outer container css from set of checkboxes?

    How to integrate many CSS files

    How to implement CSS multi-level drop down menu with different classes?

    How to centre a div vertically and horizontallly?

    How well do you need to know HTML before delving into CSS?

    How to use google font

    How to hide the 2nd and 4th table row using css or jquery?

    How to scale div from jquery css

    How to remove flexbox default padding/margin/pagemargin?

    CSS - How to address only parents and not children

    How do I edit the code of a WordPress site?

    how do I use the :valid and :invalid selectors for css?

    How to CSS select each first div without class after div with class?

    How to make CSS column not be forced down

    Why are items showing up in my instead of [closed]

    How to scroll beyond fixed position elements on a page with TOC without using JS?

    How to fill 100% of an absolutely positioned div? (IE7+) [duplicate]

    how to use inline css in master pages