CODEWITHSUNDEEP
htmlfocusaccessibilitywai-aria
Brice Joosten
Brice Joosten

Reputation: 144

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...

Upvotes: 2

Views: 8736

Answers (2)

Josh
Josh

Reputation: 4322

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:

Upvotes: 2

slugolicious
slugolicious

Reputation: 17535

In general, if you use semantic html (meaning you use a <table> element when you have a table, a <ul> when you have a list, an <h2> when you have a heading, etc), then you should not need any ARIA attributes. In fact, the first rule of ARIA is to not use ARIA.

ARIA should only be used to fill in gaps where either semantic html is not available or there's a reason you can't use semantic html (such as for styling purposes, you have to use a <div> with CSS rather than a native <button>).

However, most of your question was about tabindex, which technically isn't an ARIA attribute. Tabindex has been around for a long time. The doc on tabindex explains the 4 types of values:

  • no value
  • negative value
  • 0 value
  • positive value

I won't explain the differences unless you need it because in your case you should not need tabindex at all. You don't want to make non-interactive elements keyboard focusable. You mentioned moving the focus to the header, footer, main, etc. None of those are interactive elements so they should not receive focus.

If your menu is using links (<a>) or buttons (<button>), then they will already be keyboard focusable with the tab key and tabindex won't be needed.

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

I'm not sure what you mean by "focuses on the tag".

In your screenshot, if real links are being used, then the "natural" tab order would be:

  1. Accueil
  2. Produits
  3. Services
  4. Contact
  5. Découvir ce service
  6. Découvir ce service
  7. Découvir ce service

and you wouldn't need any extra code for it to work.

Upvotes: 1

Related Questions