Question 42969 in Html Question posted in
Some basic documentation can be found here.

What will the role of anchor tag in tabs with ul li structure – Html

I am working on lighthouse fixes. I made tab with following structure:

<ul class="nav ms-5" role="tablist">
  <li role="tab">
    <a role="tab" class="tjs-tab__link text-dark active" href="#couponcode" data-bs-toggle="tab">Coupon Code</a>
  </li>
  <li role="tab">
    <a role="tab" class="tjs-tab__link text-dark" href="#giftcards" data-bs-toggle="tab">Gift Cards</a>
  </li>
</ul>

Firstly, I detected lighthouses issues (ARIA) related to tabs and i fixed them by adding role to <ul> and <li> and those issues were fixed but now lighthouse report issue of anchor tag as screenshot: https://www.screencast.com/t/pj0eAQPu3

I also added role="tab in it does not resolve my issue. Could please let me know what role exactly needed by anchor tag?

Thanks in advance!

I tried a lot to fix this by adding role="tab but could make it and i also searched on net MDN docs but they have no example of tabs with anchor tag.

Tags:

2

Answers


  1. 0

    I would recommend following the "Tabs design pattern". If you look at the example in that pattern, they have buttons instead of links. That allows the user to press SPACE or ENTER on the tab to activate it.

    Simplified, it looks like:

    <div role="tablist">
  <button role="tab">tab one text</button>
  <button role="tab">tab two text</button>
  <button role="tab">tab three text</button>
</div>

    (There’s other important stuff you need in the code such as aria-selected as well as the role=tabpanel sections but I removed those for simplicity. You can look at the example to get all that info.)

    In your code example, the <li> is not keyboard focusable because a listitem is not natively focusable. You’d need a tabindex="0" on it. But having tabindex just allows you to tab to it and does not provide any behavior. You’d need keyboard event handlers to allow ENTER/SPACE to select it. I suppose that’s what your link is for but now you’d have two focusable elements for each tab – the <li> and the <a>. Now it’s getting complicated. I would recommend following the established design pattern mentioned earlier.

    As a side note, Lighthouse, the accessibility checker built into Chrome, uses the axe engine. It’s not actually accurate for Lighthouse to flag your <a role="tab"> as invalid. The error it’s giving you is saying elements with a role="tab" must be a direct child of an element with role="tablist". In your code example, the link with the tab role is a "grandchild" of the tablist instead of a child. However, the official spec for role="tab" says:

    Authors MUST ensure elements with role tab are contained in, or owned by, an element with the role tablist.

    "Contained in" does not mean it has to be a direct child. It could be a grandchild or great-grandchild, etc.

    So technically, your code is following the spec, although you actually have double tab roles. One on the <li> and one on the <a>. You’re allowed to do that but is probably not what you intended. Your code now has 4 tabs instead of 2.

    Login or Signup to reply.
  2. 0

    In a tabs structure implemented with unordered list <ul> and list items <li>, the anchor tag <a> is typically used to provide the clickable tab labels. The <a> tag’s href attribute is set to a corresponding unique identifier of the content section that the tab opens when clicked. This identifier is usually an HTML id attribute assigned to the content section.

    For example, consider the following HTML code that implements a simple tabs structure with two tabs:

    <ul class="tabs">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
</ul>

<div id="tab1" class="tab-content">Content for Tab 1 goes here</div>
<div id="tab2" class="tab-content">Content for Tab 2 goes here</div>

    In this code, the <a> tags serve as the clickable labels for the tabs, while the href attribute is set to the corresponding id of the content section. When the user clicks on a tab, the browser scrolls to the content section identified by the id, and that section becomes visible.

    Overall, the <a> tag is a key part of implementing clickable tabs with unordered list and list item structure, and it enables users to interact with the tabs and view the corresponding content sections.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search