Search code examples
htmlfocusaccessibilitywai-aria

ARIA : how to focus on every element I want?

I'm trying to learn accessibility with WAI-ARIA and all this kind of stuff but I'm really lost, I went for the official documentations on W3C and MDN but couldn't have precise idea about how to proceed.


This is my Website (don't mind top left blue and red stuff, it's NVDA focusing). screen capture of the developer's website

I don't know yet if I'm on the right track, how to proceed and if it's good way or not but I would like, when entering in document, that when I press TAB key, it focuses on the tag and when I press TAB again, it goes down into the header, so here the navbrand, then navmenu and when I press TAB again while on navmenu, that it goes down into it. In fact, I would like a kind of tabulation navigation that will be able to focus on "every" important division (here : header, main, footer, each section of main, each card of section, each text of each card, etc...)

For know, to give you a visual hint of what's happening, when I'm at the document's root and that I press TAB key, it will directly go at first link of the navigation.

Could someone light my way ? Am I planning things good or not ? If yes, how to proceed ? (Even if not good, how to proceed ?)


Thanks a lot for your time.


N.B.: I've hearded that it's bad thing to use tab-index > 0 and tried tab-index = 0 and even -1 and it doesn't work and I don't know if it's bad practice or not because may corrupt the DOM order or I don't know...

Solution

  • It sounds like what you need is a good primer on keyboard accessibility.

    The correct behavior for tabbing is to move focus through the interactive portions of the webpage (e.g. buttons, links, form inputs, etc.).

    Tabbing generally does not and should not set focus on non-interactive sectioning elements (e.g. header, main, footer, nav, etc.) or on static content, like paragraphs, lists, divs, spans, etc.

    If you want to improve accessibility of navigation on your page, then you may want to consider the following:

    • Using HTML5 elements that already have implicit ARIA roles mapped, where possible
    • Implementing landmark roles where implicit roles are not appropriate
    • Implementing skip links so that repetitive navigation can be bypassed
    • Ensure that your focus indicator is easily visible and not hidden by CSS

    tabindex should typically be avoided unless you really know what you're doing and have a very good reason for using it. Generally, the reading order should follow the visual ordering of the page, which should also follow the DOM ordering.

    Additional Resources: