diff --git a/src/implementations/twig/components/tabs/__snapshots__/tabs.test.js.snap b/src/implementations/twig/components/tabs/__snapshots__/tabs.test.js.snap
index f97c6189058..0c23888faf9 100644
--- a/src/implementations/twig/components/tabs/__snapshots__/tabs.test.js.snap
+++ b/src/implementations/twig/components/tabs/__snapshots__/tabs.test.js.snap
@@ -6,6 +6,7 @@ exports[`Tabs Default renders correctly 1`] = `
     class="ecl-tabs"
     data-ecl-auto-init="Tabs"
     data-ecl-tabs="true"
+    role="tablist"
   >
     <div
       class="ecl-tabs__container"
@@ -17,8 +18,10 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
           >
             Item 1 label
           </a>
@@ -27,8 +30,11 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 2 label
           </a>
@@ -37,8 +43,11 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 3 label
           </a>
@@ -47,8 +56,11 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="true"
             class="ecl-link ecl-tabs__link ecl-tabs__link--active"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 4 label
           </a>
@@ -57,8 +69,11 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 5 label
           </a>
@@ -67,8 +82,11 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 6 with a very long label
           </a>
@@ -77,8 +95,11 @@ exports[`Tabs Default renders correctly 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 7 label
           </a>
@@ -88,6 +109,7 @@ exports[`Tabs Default renders correctly 1`] = `
         >
           <button
             class="ecl-button ecl-button--secondary ecl-tabs__toggle"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -164,6 +186,7 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
     data-ecl-tabs="true"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
+    role="tablist"
   >
     <div
       class="ecl-tabs__container"
@@ -175,8 +198,10 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
           >
             Item 1 label
           </a>
@@ -185,8 +210,11 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 2 label
           </a>
@@ -195,8 +223,11 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 3 label
           </a>
@@ -205,8 +236,11 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="true"
             class="ecl-link ecl-tabs__link ecl-tabs__link--active"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 4 label
           </a>
@@ -215,8 +249,11 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 5 label
           </a>
@@ -225,8 +262,11 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 6 with a very long label
           </a>
@@ -235,8 +275,11 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 7 label
           </a>
@@ -246,6 +289,7 @@ exports[`Tabs Default renders correctly with extra attributes 1`] = `
         >
           <button
             class="ecl-button ecl-button--secondary ecl-tabs__toggle"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -320,6 +364,7 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
     class="ecl-tabs custom-class custom-class--test"
     data-ecl-auto-init="Tabs"
     data-ecl-tabs="true"
+    role="tablist"
   >
     <div
       class="ecl-tabs__container"
@@ -331,8 +376,10 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
           >
             Item 1 label
           </a>
@@ -341,8 +388,11 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 2 label
           </a>
@@ -351,8 +401,11 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 3 label
           </a>
@@ -361,8 +414,11 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="true"
             class="ecl-link ecl-tabs__link ecl-tabs__link--active"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 4 label
           </a>
@@ -371,8 +427,11 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 5 label
           </a>
@@ -381,8 +440,11 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 6 with a very long label
           </a>
@@ -391,8 +453,11 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
           class="ecl-tabs__item"
         >
           <a
+            aria-selected="false"
             class="ecl-link ecl-tabs__link"
             href="/example"
+            role="tab"
+            tabindex="-1"
           >
             Item 7 label
           </a>
@@ -402,6 +467,7 @@ exports[`Tabs Default renders correctly with extra class names 1`] = `
         >
           <button
             class="ecl-button ecl-button--secondary ecl-tabs__toggle"
+            tabindex="-1"
             type="button"
           >
             <span
diff --git a/src/implementations/twig/components/tabs/tabs.html.twig b/src/implementations/twig/components/tabs/tabs.html.twig
index 3d7f0b00b78..c6d8d32d394 100644
--- a/src/implementations/twig/components/tabs/tabs.html.twig
+++ b/src/implementations/twig/components/tabs/tabs.html.twig
@@ -33,7 +33,8 @@
 {% set _css_class = 'ecl-tabs' %}
 {% set _extra_attributes = [
   'data-ecl-tabs="true"',
-  'data-ecl-auto-init="Tabs"']|join(' ')
+  'data-ecl-auto-init="Tabs"',
+  'role="tablist"']|join(' ')
 %}
 
 {# Internal logic - Process properties #}
@@ -62,24 +63,35 @@
 <nav class="{{ _css_class }}"{{ _extra_attributes|raw }}>
   <div class="ecl-tabs__container">
     <ul class="ecl-tabs__list">
-    {% for _item in _items %}
-      {% if _item.path is not empty %}
-        <li class="ecl-tabs__item">
-        {% set _item_extra_classes = 'ecl-tabs__link' %}
-        {% if _item.is_current is defined and _item.is_current is not empty %}
-          {% set _item_extra_classes = _item_extra_classes ~ ' ecl-tabs__link--active' %}
+      {% for _item in _items %}
+        {% if _item.path is not empty %}
+          <li class="ecl-tabs__item">
+          {% set _item_extra_classes = 'ecl-tabs__link' %}
+          {% set _item_extra_attributes = [{ name: 'role', value: 'tab' }] %}
+          {% if loop.index != 1 %}
+            {% set _item_extra_attributes = _item_extra_attributes|merge([{ name: 'tabindex', value: '-1' }]) %}
+          {% endif %}
+          {% if _item.is_current is defined and _item.is_current is not empty %}
+            {% set _item_extra_classes = _item_extra_classes ~ ' ecl-tabs__link--active' %}
+            {% set _item_extra_attributes = _item_extra_attributes|merge([{ name: 'aria-selected', value: 'true' }]) %}
+          {% else %}
+            {% set _item_extra_attributes = _item_extra_attributes|merge([{ name: 'aria-selected', value: 'false' }]) %}
+          {% endif %}
+          {% if _menu is not empty %}
+            {% set extra_attributes = extra_attributes|merge([{ name: 'data-ecl-has-menu' }]) %}
+          {% endif %}
+          {% include '@ecl/link/link.html.twig' with {
+            link: {
+              label: _item.label,
+              path: _item.path,
+            },
+            extra_classes: _item_extra_classes,
+            extra_attributes: _item_extra_attributes,
+          } only %}
+          </li>
         {% endif %}
-        {% include '@ecl/link/link.html.twig' with {
-          link: {
-            label: _item.label,
-            path: _item.path,
-          },
-          extra_classes: _item_extra_classes,
-        } only %}
-        </li>
-      {% endif %}
-    {% endfor %}
-    <li class="ecl-tabs__item ecl-tabs__item--more">
+      {% endfor %}
+      <li class="ecl-tabs__item ecl-tabs__item--more">
         {% include '@ecl/button/button.html.twig' with {
           label: _more_label,
           variant: 'secondary',
@@ -92,6 +104,7 @@
             transform: 'rotate-180'
           },
           extra_classes: 'ecl-tabs__toggle',
+          extra_attributes: [{ name: 'tabindex', value: '-1' }],
         } only %}
       </li>
     </ul>
diff --git a/src/implementations/vanilla/components/tabs/tabs.js b/src/implementations/vanilla/components/tabs/tabs.js
index 209eaeb2aee..87cbd409dcc 100644
--- a/src/implementations/vanilla/components/tabs/tabs.js
+++ b/src/implementations/vanilla/components/tabs/tabs.js
@@ -77,13 +77,21 @@ export class Tabs {
     this.buttonNextSize = 0;
     this.index = 0;
     this.total = 0;
+    this.tabsKey = [];
+    this.firstTab = null;
+    this.lastTab = null;
     this.direction = 'ltr';
+    this.isMobile = false;
 
     // Bind `this` for use in callbacks
     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.closeMoreDropdown = this.closeMoreDropdown.bind(this);
     this.shiftTabs = this.shiftTabs.bind(this);
+    this.handleKeyboardOnTabs = this.handleKeyboardOnTabs.bind(this);
+    this.moveFocus = this.moveFocus.bind(this);
+    this.arrowFocusToTab = this.arrowFocusToTab.bind(this);
+    this.tabsKeyEvents = this.tabsKeyEvents.bind(this);
   }
 
   /**
@@ -112,14 +120,14 @@ export class Tabs {
         '.ecl-tabs__dropdown .ecl-tabs__item',
         this.element
       );
-
-      this.handleResize();
     }
 
     if (this.btnNext) {
       this.buttonNextSize = this.btnNext.getBoundingClientRect().width;
     }
 
+    this.handleResize();
+
     // Bind events
     if (this.attachClickListener && this.moreButton) {
       this.moreButton.addEventListener('click', this.handleClickOnToggle);
@@ -170,6 +178,11 @@ export class Tabs {
     if (this.attachResizeListener) {
       window.removeEventListener('resize', this.handleResize);
     }
+    if (this.tabsKey) {
+      this.tabsKey.forEach((item) => {
+        item.addEventListener('keydown', this.handleKeyboardOnTabs);
+      });
+    }
     if (this.element) {
       this.element.removeAttribute('data-ecl-auto-initialized');
     }
@@ -251,6 +264,7 @@ export class Tabs {
     );
 
     if (vw <= 480) {
+      this.isMobile = true;
       this.index = 1;
       this.list.style.transitionDuration = '0.4s';
       this.shiftTabs(this.index);
@@ -265,9 +279,11 @@ export class Tabs {
       this.list.style.width = `${listWidth}px`;
       this.btnNext.style.display = 'block';
       this.btnPrev.style.display = 'none';
+      this.tabsKeyEvents();
       return;
     }
 
+    this.isMobile = false;
     // Behaviors for Tablet and desktop format (More button)
     this.btnNext.style.display = 'none';
     this.btnPrev.style.display = 'none';
@@ -318,10 +334,38 @@ export class Tabs {
         }
       });
     }
+
+    this.tabsKeyEvents();
+  }
+
+  /**
+   * Bind key events on tabs for accessibility.
+   */
+  tabsKeyEvents() {
+    this.tabsKey = [];
+    this.listItems.forEach((item, index, array) => {
+      let tab = null;
+      if (item.getAttribute('aria-hidden') === 'false') {
+        tab = queryOne('.ecl-tabs__link', item);
+      } else {
+        const dropdownItem = this.dropdownItems[index];
+        tab = queryOne('.ecl-tabs__link', dropdownItem);
+      }
+      tab.addEventListener('keydown', this.handleKeyboardOnTabs);
+      this.tabsKey.push(tab);
+
+      if (index === 0) {
+        this.firstTab = tab;
+      }
+      if (index === array.length - 1) {
+        this.lastTab = tab;
+      }
+    });
   }
 
   /**
    * Close the dropdown.
+   * @param {Event} e
    */
   closeMoreDropdown(e) {
     let el = e.target;
@@ -334,6 +378,73 @@ export class Tabs {
     this.moreButton.setAttribute('aria-expanded', false);
     this.dropdown.classList.remove('ecl-tabs__dropdown--show');
   }
+
+  /**
+   * @param {Event} e
+   */
+  handleKeyboardOnTabs(e) {
+    const tgt = e.currentTarget;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        this.arrowFocusToTab(tgt, 'prev');
+        break;
+
+      case 'ArrowRight':
+        this.arrowFocusToTab(tgt, 'next');
+        break;
+
+      case 'Home':
+        this.moveFocus(this.firstTab);
+        break;
+
+      case 'End':
+        this.moveFocus(this.lastTab);
+        break;
+
+      default:
+    }
+  }
+
+  /**
+   * @param {HTMLElement} currentTab tab element
+   */
+  moveFocus(currentTab) {
+    if (currentTab.closest('.ecl-tabs__dropdown')) {
+      this.moreButton.setAttribute('aria-expanded', true);
+      this.dropdown.classList.add('ecl-tabs__dropdown--show');
+    } else {
+      this.moreButton.setAttribute('aria-expanded', false);
+      this.dropdown.classList.remove('ecl-tabs__dropdown--show');
+    }
+    currentTab.focus();
+  }
+
+  /**
+   * @param {HTMLElement} currentTab tab element
+   * @param {string} direction key arrow direction
+   */
+  arrowFocusToTab(currentTab, direction) {
+    let index = this.tabsKey.indexOf(currentTab);
+    index = direction === 'next' ? index + 1 : index - 1;
+
+    const startTab = direction === 'next' ? this.firstTab : this.lastTab;
+    const endTab = direction === 'next' ? this.lastTab : this.firstTab;
+
+    if (this.isMobile) {
+      if (currentTab !== endTab) {
+        this.moveFocus(this.tabsKey[index]);
+        this.shiftTabs(direction);
+      }
+      return;
+    }
+
+    if (currentTab === endTab) {
+      this.moveFocus(startTab);
+    } else {
+      this.moveFocus(this.tabsKey[index]);
+    }
+  }
 }
 
 export default Tabs;