From 32bd370c6b45fdeb4187781879c2e4119bf13209 Mon Sep 17 00:00:00 2001
From: Paul Bauriegel <paul.bauriegel@web.de>
Date: Tue, 29 Oct 2024 10:30:34 +0100
Subject: [PATCH] Feature - Improve Accessibility for Screenreaders (#5634)

# Improve Accessibility for Screenreaders - Description & some structure
via Aria-Attributes

We are currently in the internal review in Deutsche Telekom how to
enable people with disabilities for our annotation process. One key-part
will be better usability with screen-readers. This PR tries to enable
basic functionality via aria attributes.
I tried to not touch the current HTML structure too much, but it might
make sense to change some of the aria-role="button" to actual html
button.
This would be the first of a couple of PR that we are proposing. In
future PR we would also want to add a MR for a high contrast mode, and
some optimizations for keyboard navigation for blind people.

Scope of this one: Description & some structure via Aria-Attributes.

- For a lot of icons in buttons: I added aria-hidden="true" as there are
not relevant for the screenreader
- The buttons and many other UI elements got a screenreader description
via aria-label
- For some items I added a aria-role such as role="button" or
role="table"
- There are some additional aria attributes such as:
    - aria-expanded for collapse panel & drop-down menues
    - or aria-multiselectable for multi-select labels

Next steps - one at a time:
- Aria Labels are not multi-lingual yet.
- It does not fix the tabindex order or general problems with keyboard
navigation for blind people.
- high contrast mode fixes
- Skip links for Screenreaders
- Alt Text for Image Field

We will most likely receive more feedback in our internal review process
that we will also try to integrate then.

**Type of change**

- New feature (non-breaking change which adds functionality)

**How Has This Been Tested**
Local Frontend Build w. Firefox tested w. VoiceOver

**Checklist**

- I added relevant documentation
- I followed the style guidelines of this project
- I did a self-review of my code
- I made corresponding changes to the documentation
- I confirm My changes generate no new warnings
- I have added tests that prove my fix is effective or that my feature
works
- I have added relevant notes to the CHANGELOG.md file (See
https://keepachangelog.com/)

---------

Co-authored-by: Paul Bauriegel <paul.bauriegel@telekom.de>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Leire <leire@argilla.io>
---
 .../base/base-badge/BaseIconWithBadge.vue     |  1 +
 .../base/base-breadcrumbs/BaseBreadcrumbs.vue |  2 +-
 .../BaseCollapsablePanel.vue                  | 15 ++++++++---
 .../base/base-dropdown/BaseDropdown.vue       |  2 ++
 .../components/base/base-icon/BaseIcon.vue    |  1 +
 .../base/base-progress/BaseLinearProgress.vue |  4 ++-
 .../base-resizable/HorizontalResizable.vue    |  2 +-
 .../base/base-resizable/VerticalResizable.vue |  2 +-
 .../base/base-search-bar/BaseSearchBar.vue    |  4 ++-
 .../base/base-table/BaseTableInfo.vue         | 27 +++++++++++++------
 .../base/base-table/TableFiltrableColumn.vue  |  3 ++-
 .../base-topbar-brand/BaseTopbarBrand.vue     |  4 +--
 .../RecordFeedbackTaskAndQuestionnaire.vue    |  2 ++
 .../container/fields/RecordMenu.vue           |  6 +++--
 .../container/fields/RecordStatus.vue         |  3 ++-
 .../SpanAnnotationTextField.vue               |  9 ++++---
 .../components/EntityComponent.vue            |  2 +-
 .../container/mode/BulkAnnotation.vue         |  3 ++-
 .../container/mode/FocusAnnotation.vue        |  2 +-
 .../container/questions/QuestionsForm.vue     |  1 +
 .../questions/form/Questions.component.vue    |  6 +++--
 .../DndSelection.component.vue                |  4 ++-
 .../rating/RatingMonoSelection.component.vue  |  4 ++-
 .../LabelSelection.component.vue              |  6 +++++
 .../QuestionHeader.component.vue              |  4 ++-
 .../search-label/SearchLabel.component.vue    |  4 ++-
 .../questions/form/span/EntityLabelBadge.vue  |  2 +-
 .../span/EntityLabelSelection.component.vue   |  4 +++
 .../questions/form/span/SpanComponent.vue     |  4 +--
 .../form/text-area/TextAreaContents.vue       |  1 +
 .../view-config/RecordsViewConfig.vue         |  3 ++-
 .../header/RadioButtonsSelect.base.vue        |  2 +-
 .../annotation/header/StatusFilter.vue        |  2 ++
 .../header/ToggleAnnotationType.vue           |  6 +++--
 .../header/filters/FilterButton.vue           |  3 ++-
 .../header/header-bar/HeaderFeedbackTask.vue  |  2 +-
 .../header/metadata-filter/MetadataFilter.vue |  2 +-
 .../responses-filter/ResponsesFilter.vue      |  2 +-
 .../search-bar-filter/SearchBarFilter.vue     |  7 ++---
 .../header/sort-filter/SortSelectorItem.vue   |  1 +
 .../suggestion-filter/SuggestionFilter.vue    |  2 +-
 .../annotation/pagination/Pagination.vue      | 10 +++++--
 .../pagination/PaginationFeedbackTask.vue     |  4 +--
 .../annotation/progress/TeamProgress.vue      |  6 ++++-
 .../components/features/global/AppHeader.vue  |  2 ++
 .../global/user/UserAvatarTooltip.vue         |  4 +--
 .../directives/required-field.directive.js    |  1 +
 47 files changed, 136 insertions(+), 57 deletions(-)

diff --git a/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue b/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue
index bdda84b146..dda5024534 100644
--- a/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue
+++ b/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue
@@ -20,6 +20,7 @@
         :width="badgeSize"
         :height="badgeSize"
         :color="iconColor"
+        :aria-label="icon + ' icon'"
       />
     </i>
   </BaseButton>
diff --git a/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue b/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
index 62d9872c85..fa70a8a243 100644
--- a/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
+++ b/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div class="breadcrumbs">
-    <ul>
+    <ul role="navigation">
       <li v-for="breadcrumb in filteredBreadcrumbs" :key="breadcrumb.name">
         <nuxt-link
           class="breadcrumbs__item"
diff --git a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
index b0cf46d029..be999a18fb 100644
--- a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
+++ b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
@@ -2,11 +2,16 @@
   <div
     class="panel"
     :class="[
-      !isExpanded ? '--collapsed' : undefined,
-      hideOnDesktop ? '--mobile' : undefined,
-    ]"
+    !isExpanded ? '--collapsed' : undefined,
+    hideOnDesktop ? '--mobile' : undefined,
+  ]"
   >
-    <BaseButton class="panel__header" @click="toggleExpand(isExpanded)">
+    <BaseButton
+      class="panel__header"
+      @click="toggleExpand(isExpanded)"
+      :aria-expanded="isExpanded ? 'true' : 'false'"
+      :aria-label="isExpanded ? 'Collapse Panel' : 'Expand Panel'"
+    >
       <div class="panel__header__container">
         <slot v-if="!isExpanded" name="panelHeader" />
         <div v-else style="width: 100%; text-align: left">
@@ -17,6 +22,7 @@
           :name="isExpanded ? 'chevron-down' : 'chevron-right'"
           width="12"
           height="12"
+          aria-hidden="true"
         />
       </div>
     </BaseButton>
@@ -60,6 +66,7 @@ export default {
   &__header {
     overflow: visible;
     color: var(--fg-secondary);
+
     &__container {
       width: 100%;
       display: flex;
diff --git a/argilla-frontend/components/base/base-dropdown/BaseDropdown.vue b/argilla-frontend/components/base/base-dropdown/BaseDropdown.vue
index a9672494e5..b1626dd0df 100644
--- a/argilla-frontend/components/base/base-dropdown/BaseDropdown.vue
+++ b/argilla-frontend/components/base/base-dropdown/BaseDropdown.vue
@@ -23,6 +23,8 @@
       events: ['mousedown'],
       handler: onClose,
     }"
+    role="button"
+    aria-haspopup="menu"
   >
     <div class="dropdown__header" @click="onClick">
       <slot name="dropdown-header" />
diff --git a/argilla-frontend/components/base/base-icon/BaseIcon.vue b/argilla-frontend/components/base/base-icon/BaseIcon.vue
index be8707e530..945327b78b 100644
--- a/argilla-frontend/components/base/base-icon/BaseIcon.vue
+++ b/argilla-frontend/components/base/base-icon/BaseIcon.vue
@@ -4,6 +4,7 @@
     :width="iconWidth"
     :height="iconHeight"
     :color="iconColor"
+    aria-hidden="true"
   />
 </template>
 
diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
index af224ddcbb..ed9eb83abc 100644
--- a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
+++ b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
@@ -6,6 +6,8 @@
           v-for="(range, index) in filteredProgressRanges"
           :key="range.name"
           role="progressbar"
+          :aria-valuenow="getPercentage(range.value)"
+          :aria-label="range.name"
           :class="[
             'progress__range',
             showTooltip ? 'progress__range--with-tooltip' : null,
@@ -17,7 +19,7 @@
           @mouseenter="hoveredRange = range"
           @mouseleave="hoveredRange = null"
         >
-          <div class="progress__bar" :style="{ background: range.color }"></div>
+        <div class="progress__bar" :style="{ background: range.color }"></div>
         </div>
       </div>
       <template v-if="showTooltip && !!hoveredRange">
diff --git a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
index fa8a5b7874..5a29f50305 100644
--- a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
+++ b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
@@ -4,7 +4,7 @@
       <slot name="up" />
     </div>
 
-    <div class="resizable__bar" ref="resizableBar">
+    <div class="resizable__bar" ref="resizableBar" role="separator">
       <div class="resizable__bar__inner" />
     </div>
 
diff --git a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
index a8314c71f2..8b07513408 100644
--- a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
+++ b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
@@ -2,7 +2,7 @@
   <div class="resizable" :class="resizing ? '--v-resizing' : ''">
     <div class="resizable__left"><slot name="left" /></div>
 
-    <div class="resizable__bar" ref="resizableBar">
+    <div class="resizable__bar" ref="resizableBar" role="separator">
       <div class="resizable__bar__inner" />
     </div>
 
diff --git a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
index a1fdc1266b..dde37d0dcc 100644
--- a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
+++ b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
@@ -17,9 +17,10 @@
 
 <template>
   <base-input-container class="search-area" :class="filter ? 'active' : null">
-    <svgicon name="search" width="20" height="20" color="#acacac" />
+    <svgicon name="search" width="20" height="20" color="#acacac" aria-hidden="true" />
     <base-input
       class="search-area__input"
+      role="search"
       v-model="filter"
       :placeholder="placeholder"
     />
@@ -31,6 +32,7 @@
       width="14"
       height="14"
       @click="filter = undefined"
+      aria-hidden="true"
     />
   </base-input-container>
 </template>
diff --git a/argilla-frontend/components/base/base-table/BaseTableInfo.vue b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
index 8e8a3e7257..077fd4b080 100644
--- a/argilla-frontend/components/base/base-table/BaseTableInfo.vue
+++ b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
@@ -16,14 +16,16 @@
   -->
 <template>
   <transition appear name="fade">
-    <div class="table-info">
+    <div class="table-info" role="table">
       <div class="table-info__header">
         <slot name="columns">
-          <div class="table-info__item">
+          <div class="table-info__item" role="columnheader" aria-label="Table Header">
             <div
               v-for="(column, key) in columns"
               :key="key"
               :class="[`table-info__item__col`, column.class]"
+              :aria-label="column.name"
+              role="cell"
             >
               <lazy-table-filtrable-column
                 :column="column"
@@ -31,14 +33,17 @@
                 :filters="filters"
                 v-if="column.filtrable"
                 @applyFilters="onApplyFilters"
+                :aria-label="'Filter column ' + column.name"
               />
               <button
                 v-else-if="column.sortable"
                 :data-title="column.tooltip"
                 :class="[sortOrder, { active: sortedBy === column.field }]"
                 @click="sort(column)"
+                :aria-label="'Sort by ' + column.name"
+                :aria-sort="sortOrder === 'asc' ? 'descending' : 'ascending'"
               >
-                <svgicon width="18" height="18" name="sort" />
+                <svgicon width="18" height="18" name="sort" aria-hidden="true"/>
                 <span>{{ column.name }}</span>
               </button>
               <button v-else :data-title="column.tooltip">
@@ -50,17 +55,18 @@
       </div>
       <results-empty v-if="tableIsEmpty" :title="emptySearchInfo.title" />
       <template v-else>
-        <div class="table-info__body" ref="table">
-          <ul>
-            <li v-for="item in filteredResults" :key="item.id" :id="item.id">
+        <div class="table-info__body" ref="table" aria-label="Table Body">
+          <ul role="rowgroup">
+            <li v-for="item in filteredResults" :key="item.id" :id="item.id" role="row" :aria-label="'Row for ' + item.id">
               <nuxt-link :to="rowLink(item)" class="table-info__item">
                 <span
                   v-for="(column, idx) in columns"
                   :key="idx"
                   :class="[`table-info__item__col`, column.class]"
+                  role="cell"
                 >
                   <span :class="column.class">
-                    <span v-if="column.actions">
+                    <span v-if="column.actions" role="group" aria-label="Row actions">
                       <div class="table-info__actions">
                         <p
                           class="table-info__main"
@@ -74,6 +80,8 @@
                             v-for="(action, idx) in column.actions"
                             :key="idx"
                             :tooltip="action.tooltip"
+                            role="button"
+                            :aria-label="action.title"
                           >
                             <base-button
                               :title="action.title"
@@ -81,12 +89,14 @@
                               @click.prevent="
                                 onActionClicked(action.name, item)
                               "
+                              aria-hidden="true"
                             >
                               <svgicon
                                 v-if="action.icon !== undefined"
                                 :name="action.icon"
                                 width="16"
                                 height="16"
+                                aria-hidden="true"
                               />
                             </base-button>
                           </base-action-tooltip>
@@ -101,9 +111,10 @@
                     <nuxt-link v-else-if="column.link" :to="column.link(item)">
                       {{ itemValue(item, column) }}
                     </nuxt-link>
-                    <span v-else>{{ itemValue(item, column) }}</span>
+                    <span v-else >{{ itemValue(item, column) }}</span>
                     <span v-if="column.component">
                       <component
+                        :aria-label="column.component.name"
                         v-if="hydrate[item.id]"
                         :is="column.component.name"
                         v-bind="{ ...column.component.props(item) }"
diff --git a/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue b/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue
index e3c20daec3..bea76feb1f 100644
--- a/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue
+++ b/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue
@@ -5,7 +5,7 @@
       @click="openFilter(column)"
       :class="[visibleFilter || selectedOptions.length ? 'active' : '']"
     >
-      <svgicon name="filter" width="16" />
+      <svgicon name="filter" width="16" aria-hidden="true"/>
       {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">
@@ -17,6 +17,7 @@
         :options="filterOptions(this.options, searchText)"
         :option-name="optionName"
         :option-counter="optionCounter"
+        :aria-label="optionName"
       />
     </div>
   </div>
diff --git a/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue b/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue
index 326e1b9594..32906305af 100644
--- a/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue
+++ b/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue
@@ -16,8 +16,8 @@
   -->
 
 <template>
-  <div class="topbar">
-    <brand-icon class="brand-icon" color="white" />
+  <div class="topbar" role="banner" aria-label="Top navigation bar">
+    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon"/>
     <slot />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue b/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue
index fae5afe20c..1eadcf1888 100644
--- a/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue
+++ b/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue
@@ -6,6 +6,7 @@
       recordCriteria.committed.page.isBulkMode &&
       recordCriteria.committed.isPending
     "
+    role="main"
     :record-criteria="recordCriteria"
     :dataset-vectors="datasetVectors"
     :records="records"
@@ -17,6 +18,7 @@
   />
   <FocusAnnotation
     v-else
+    role="main"
     :record-criteria="recordCriteria"
     :dataset-vectors="datasetVectors"
     :records="records"
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue b/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue
index 8d75147a9e..6acd6fe4bc 100644
--- a/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue
@@ -6,8 +6,10 @@
       @visibility="onVisibility"
     >
       <template slot="dropdown-header">
-        <BaseButton class="record-menu__header">
-          <svgicon name="kebab" width="20" height="20" />
+        <BaseButton
+          class="record-menu__header"
+          :aria-label="(dropdownIsVisible? 'Collapse' : 'Expand') + ' Record Dropdown for Extra Information'">
+          <svgicon name="kebab" width="20" height="20" aria-hidden="true"/>
         </BaseButton>
       </template>
       <template slot="dropdown-content">
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue b/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
index be4736b86e..a78ff61dd5 100644
--- a/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
@@ -3,7 +3,8 @@
     :key="record.status"
     :class="['status-tag', getStatusInfo.class]"
     :title="getStatusInfo.name"
-    ><span class="bullet"></span>
+    aria-label="Status of Record"
+    ><span class="bullet" aria-hidden="true"></span>
 
     <span>{{ getStatusInfo.name }}</span>
     <span
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue b/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
index 7aee6ec775..cd068b623d 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
@@ -4,9 +4,10 @@
     :key="name"
     @mouseenter.stop="mouseEnter = true"
     @mouseleave.stop="mouseEnter = false"
+    aria-label="Data Record Field"
   >
     <div class="title-area --body2">
-      <span class="text_field_component__title-content" v-text="title" />
+      <span class="text_field_component__title-content" v-text="title" :aria-label="'Field Name: ' + title" />
       <BaseActionTooltip
         class="text_field_component__tooltip"
         :tooltip="$t('copied')"
@@ -14,14 +15,16 @@
       >
         <BaseButton
           :title="$t('button.tooltip.copyToClipboard')"
+          :aria-label="$t('button.tooltip.copyToClipboard')"
           class="text_field_component__copy-button"
           @click.prevent="$copyToClipboard(fieldText)"
+          role="button"
         >
-          <svgicon color="#acacac" name="copy" width="18" height="18" />
+          <svgicon color="#acacac" name="copy" width="18" height="18" aria-hidden="true"/>
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div id="fields-content" class="text_field_component__area --body1">
+    <div id="fields-content" class="text_field_component__area --body1" :aria-label="'Data entry for Field: ' + title" >
       <p
         :class="[
           allowOverlapping
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue
index d45091b6d5..290362d969 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="span-entity__wrapper">
+  <span class="span-entity__wrapper" role="mark">
     <template v-if="allowOverlapping">
       <span
         v-for="(line, index) in lines"
diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
index e5c54f43f7..4c3dab09b6 100644
--- a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -11,7 +11,7 @@
           class="wrapper__left"
         >
           <template #up>
-            <section class="wrapper__records">
+            <section class="wrapper__records" aria-label="Bulk Annotation View">
               <DatasetFilters :recordCriteria="recordCriteria">
                 <ToggleAnnotationType
                   v-if="
@@ -162,6 +162,7 @@
       <BaseCollapsablePanel
         hideOnDesktop
         :isExpanded="expandedGuidelines"
+        :aria-expanded="expandedGuidelines"
         @toggle-expand="expandedGuidelines = !expandedGuidelines"
       >
         <template #panelHeader>
diff --git a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
index e449d6de36..188dcd114a 100644
--- a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
@@ -6,7 +6,7 @@
         class="wrapper__left"
       >
         <template #up>
-          <section class="wrapper__records">
+          <section class="wrapper__records" aria-label="Focus Annotation View">
             <DatasetFilters :recordCriteria="recordCriteria">
               <ToggleAnnotationType
                 v-if="
diff --git a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
index e097819738..c29c893330 100644
--- a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
@@ -5,6 +5,7 @@
     @submit.stop.prevent=""
     v-click-outside="onClickOutside"
     @click="focusOnFirstQuestionFromOutside"
+    aria-label="Annotation Questions"
   >
     <div class="questions-form__content">
       <QuestionsComponent
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
index f21348817b..56f117a242 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
-    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" />
-    <div class="questions">
+    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" :aria-label="legend" />
+    <div class="questions" role="list" aria-label="List of annotation questions">
       <div
         v-for="(question, index) in questions"
         :key="question.id"
+        :aria-label="'Question: ' + question.name"
         @keydown.arrow-up.prevent="
           updateQuestionAutofocus(autofocusPosition - 1)
         "
@@ -107,6 +108,7 @@ export default {
     });
   },
   methods: {
+    // This is terrible
     handleKeyboardToMoveLoop(parent) {
       return (e) => {
         if (e.key !== "Tab") return;
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
index 84dd0c16d7..d5ad5d710f 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
@@ -5,6 +5,8 @@
       :list="ranking.questions"
       :group="{ name: 'question' }"
       :sort="false"
+      role="listbox"
+      aria-orientation="vertical"
     >
       <div
         v-for="item in ranking.questions"
@@ -22,7 +24,7 @@
           :text="getSuggestedAgent(item)"
           minimalist
         >
-          <svgicon width="6" name="draggable" :id="`${item.value}-icon`" />
+          <svgicon width="6" name="draggable" :id="`${item.value}-icon`" aria-label="Dragging Icon"/>
           <span
             class="draggable__rank-card__title"
             v-text="item.text"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue
index c63bce886c..45b6f58691 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="container">
-    <div class="inputs-area">
+    <div class="inputs-area" role="radiogroup" aria-label="Label-Options">
       <div
         class="input-button"
         v-for="option in options"
         :key="option.id"
         @keydown.enter.prevent
+        role="button"
+        :aria-label="option.text"
       >
         <BaseTooltip
           :title="isSuggested(option) ? $t('suggestion.name') : ''"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue
index 900c505f74..a57c156b25 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue
@@ -26,6 +26,7 @@
             width="18"
             height="18"
             :name="iconToShowInTheCollapseButton"
+            aria-hidden="true"
           />
         </button>
       </div>
@@ -37,12 +38,17 @@
       :css="options.length < 50"
       class="inputs-area"
       v-if="filteredOptions.length"
+      role="group"
+      aria-multiselectable="multiple"
+      aria-label="Label-Options"
     >
       <div
         class="input-button"
         v-for="(option, index) in visibleOptions"
         :key="option.id"
         @keydown.enter.prevent
+        role="button"
+        :aria-label="option.text"
       >
         <input
           ref="options"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/question-header/QuestionHeader.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/question-header/QuestionHeader.component.vue
index d13b3953f7..a7667d67e0 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/question-header/QuestionHeader.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/question-header/QuestionHeader.component.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="title-area --body1">
+  <div class="title-area --body1" :aria-label="question.title">
     <span
       class="suggestion-info"
       v-text="question.title"
@@ -19,6 +19,8 @@
         content: tooltipMessage,
         open: openTooltip,
       }"
+      role="tooltip"
+      :aria-label="tooltipMessage"
     />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue
index 28844a1088..cee1703fdb 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="search-area" @click="focusInSearch">
+  <div class="search-area" @click="focusInSearch" aria-label="Search Labels">
     <BaseIconWithBadge
       ref="iconSearchRef"
       class="search-area__icon --search"
@@ -19,6 +19,7 @@
       :value="value"
       :ref="searchRef"
       :placeholder="placeholder"
+      role="search"
       @input="$emit('input', $event.target.value)"
       @keydown.arrow-up.prevent="looseFocus"
       @keydown.arrow-down.prevent="looseFocus"
@@ -35,6 +36,7 @@
       badge-horizontal-position="right"
       badge-border-color="white"
       @click-icon="resetValue"
+      aria-hidden="true"
     />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelBadge.vue b/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelBadge.vue
index 307a388f8c..2fb46f07fc 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelBadge.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="input-button">
+  <div class="input-button" role="button" :aria-label="option.text">
     <input
       ref="inputRef"
       type="checkbox"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
index 25f7b13bb3..87bd92b830 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
@@ -30,6 +30,7 @@
             width="18"
             height="18"
             :name="iconToShowInTheCollapseButton"
+            aria-hidden="true"
           />
         </button>
       </div>
@@ -41,6 +42,9 @@
       name="shuffle"
       class="inputs-area"
       v-if="filteredOptions.length"
+      role="group"
+      aria-multiselectable="multiple"
+      aria-label="Label-Options"
     >
       <EntityLabelBadge
         v-for="(option, index) in visibleOptions"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue b/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
index 6f2bd2c022..a7c4fec0ed 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="wrapper">
     <QuestionHeaderComponent :question="question" />
-    <div class="question__warning" v-if="warningMessage">
-      <svgicon name="danger" width="16" height="16" />
+    <div class="question__warning" v-if="warningMessage" role="status" aria-live="polite">
+      <svgicon name="danger" width="16" height="16" aria-hidden="true"/>
       <span v-text="warningMessage" />
     </div>
     <EntityLabelSelectionComponent
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue
index a23210c4d7..cf7b61015b 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue
@@ -23,6 +23,7 @@
       @change-text="onChangeTextArea"
       @on-change-focus="onChangeFocus"
       @on-exit-edition-mode="onExitEditionMode"
+      role="textbox"
     />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue b/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue
index ae01999ebc..877faad20e 100644
--- a/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue
+++ b/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue
@@ -14,7 +14,8 @@
           class="view-config__icon"
           width="20"
           height="20"
-          name="change-height" /></BaseButton
+          name="change-height"
+          aria-hidden="true"/></BaseButton
     ></template>
     <template slot="dropdown-content">
       <div class="view-config__content">
diff --git a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue b/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
index 830a325b77..47d6acabe0 100644
--- a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
+++ b/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
@@ -25,7 +25,7 @@
           :data-title="$t('status')"
         >
           {{ currentOptionName }}
-          <svgicon name="chevron-down" width="8" height="8" />
+          <svgicon name="chevron-down" width="8" height="8" aria-hidden="true"/>
         </BaseButton>
       </span>
       <span slot="dropdown-content">
diff --git a/argilla-frontend/components/features/annotation/header/StatusFilter.vue b/argilla-frontend/components/features/annotation/header/StatusFilter.vue
index e681e4790d..787c79f2b3 100644
--- a/argilla-frontend/components/features/annotation/header/StatusFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/StatusFilter.vue
@@ -22,6 +22,8 @@
     :options="options"
     :selected-option="selectedOption"
     @change="onChangeOption"
+    aria-label="Filter Records by Status"
+    aria-controls="dropdown-menu"
   />
 </template>
 
diff --git a/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue b/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue
index cade6e458a..e01a048aae 100644
--- a/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue
+++ b/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue
@@ -4,17 +4,19 @@
       class="switch"
       :class="{ active: recordCriteria.page.isFocusMode }"
       @click="switchFocusMode()"
+      aria-label="Switch to Focus Mode"
       :data-title="$t('focus_mode')"
     >
-      <svgicon name="focus-mode" width="18" />
+      <svgicon name="focus-mode" width="18" aria-hidden="true" />
     </button>
     <button
       class="switch"
+      aria-label="Switch to Bulk Mode"
       :class="{ active: recordCriteria.page.isBulkMode }"
       @click="switchBulkMode()"
       :data-title="$t('bulk_mode')"
     >
-      <svgicon name="bulk-mode" width="18" />
+      <svgicon name="bulk-mode" width="18" aria-hidden="true" />
     </button>
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue b/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue
index 2a269f9e5d..2a04edb000 100644
--- a/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue
+++ b/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="isButtonActive ? 'filter-button--active' : 'filter-button'">
-    <svgicon v-if="iconName" :name="iconName" width="16" height="16" />
+    <svgicon v-if="iconName" :name="iconName" width="16" height="16" aria-hidden="true" />
     <BaseButton class="filter-button__button">{{ buttonName }}</BaseButton>
     <slot></slot>
     <svgicon
@@ -9,6 +9,7 @@
       name="chevron-down"
       width="16"
       height="8"
+      aria-hidden="true"
     />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue b/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
index 352fc9bb2d..14a2181c64 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
@@ -7,7 +7,7 @@
       @breadcrumb-action="$emit('breadcrumb-action', $event)"
     />
     <template v-if="datasetId && showSettingButton">
-      <div @click="goToSetting(datasetId)">
+      <div @click="goToSetting(datasetId)" role="button">
         <DatasetSettingsIconFeedbackTask />
       </div>
     </template>
diff --git a/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue b/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
index 9e60e8c24e..dc26e48fff 100644
--- a/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
@@ -34,7 +34,7 @@
             @click="selectMetadataCategory(null)"
           >
             <span v-text="visibleCategory.title" />
-            <svgicon name="chevron-left" width="12" height="12" />
+            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
           </div>
           <div class="metadata-filter__content">
             <LabelsSelector
diff --git a/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue b/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue
index 2ef2b2be7b..607ae99bc6 100644
--- a/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue
@@ -27,7 +27,7 @@
         <template v-else>
           <div class="responses-filter__header" @click="selectResponse(null)">
             <span v-text="selectedResponse.name" />
-            <svgicon name="chevron-left" width="12" height="12" />
+            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
           </div>
           <div class="responses-filter__content">
             <LabelsSelector
diff --git a/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue b/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
index 7eb91430a9..a6fcd0de29 100644
--- a/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
@@ -25,13 +25,14 @@
       class="search-area__icon --search"
       :data-title="$t('search')"
     >
-      <svgicon name="search" width="16" height="16" />
+      <svgicon name="search" width="16" height="16" aria-hidden="true"/>
     </BaseButton>
     <input
       ref="searchRef"
       class="search-area__input"
       type="text"
       v-model.trim="searchValue"
+      role="search"
       :placeholder="$t('searchPlaceholder')"
       :aria-description="$t('searchPlaceholder')"
       autocomplete="off"
@@ -43,7 +44,7 @@
       v-if="showDelete"
       class="search-area__icon --close"
     >
-      <svgicon name="close" width="12" height="12" />
+      <svgicon name="close" width="12" height="12" aria-hidden="true" />
     </BaseButton>
 
     <BaseDropdown
@@ -57,7 +58,7 @@
           <span class="search-area__fields__header__text">{{
             selectedField.title
           }}</span>
-          <svgicon name="chevron-down" height="8" />
+          <svgicon name="chevron-down" height="8" aria-hidden="true"/>
         </span>
       </template>
       <template slot="dropdown-content">
diff --git a/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue b/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue
index e73fdbdd7f..ba0e87d7c9 100644
--- a/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue
+++ b/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue
@@ -36,6 +36,7 @@
         width="16"
         height="16"
         :name="category.sort === 'asc' ? 'arrow-up' : 'arrow-down'"
+        :aria-label="'Change sort direction to ' + (category.sort === 'asc' ? 'up' : 'down')"
       />
     </BaseButton>
     <BaseButton
diff --git a/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue b/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue
index d9bfd180be..f21ea14424 100644
--- a/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue
@@ -31,7 +31,7 @@
             @click="selectSuggestion(null)"
           >
             <span v-text="selectedSuggestion.name" />
-            <svgicon name="chevron-left" width="12" height="12" />
+            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
           </div>
           <div>
             <CategoriesSelector
diff --git a/argilla-frontend/components/features/annotation/pagination/Pagination.vue b/argilla-frontend/components/features/annotation/pagination/Pagination.vue
index 04e2a4060c..3b0b7dcd71 100644
--- a/argilla-frontend/components/features/annotation/pagination/Pagination.vue
+++ b/argilla-frontend/components/features/annotation/pagination/Pagination.vue
@@ -4,20 +4,26 @@
       ref="prevButton"
       class="pagination__button"
       :disabled="isFirstPage"
+      :aria-label="$t('shortcuts.pagination.go_to_previous_record')"
       :data-title="$t('shortcuts.pagination.go_to_previous_record')"
+      aria-controls="pagination"
+      :aria-disabled="isFirstPage"
       @click="goToPrevPage"
     >
-      <svgicon name="chevron-left" width="12" height="12" />
+      <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
     </BaseButton>
 
     <BaseButton
       ref="nextButton"
       class="pagination__button"
       :disabled="isLastPage"
+      :aria-label="$t('shortcuts.pagination.go_to_next_record')"
       :data-title="$t('shortcuts.pagination.go_to_next_record')"
+      aria-controls="pagination"
+      :aria-disabled="isLastPage"
       @click="goToNextPage"
     >
-      <svgicon name="chevron-right" width="12" height="12" />
+      <svgicon name="chevron-right" width="12" height="12" aria-hidden="true" />
     </BaseButton>
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/pagination/PaginationFeedbackTask.vue b/argilla-frontend/components/features/annotation/pagination/PaginationFeedbackTask.vue
index 994748f0ec..9e2b925c1a 100644
--- a/argilla-frontend/components/features/annotation/pagination/PaginationFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/pagination/PaginationFeedbackTask.vue
@@ -6,12 +6,12 @@
       v-model="recordCriteria.page.client.many"
     />
     <span class="pagination__info">
-      <span>{{ currentPage }}</span>
+      <span aria-label="Current Record">{{ currentPage }}</span>
       <span class="pagination__info--bulk" v-if="isBulkMode">
         -
         {{ currentPageEnd }}</span
       >
-      <span>of {{ records.total }}</span>
+      <span aria-label="Total Records">of {{ records.total }}</span>
     </span>
     <Pagination :recordCriteria="recordCriteria" :total="records.total" />
   </div>
diff --git a/argilla-frontend/components/features/annotation/progress/TeamProgress.vue b/argilla-frontend/components/features/annotation/progress/TeamProgress.vue
index df2822a91f..637bed32ca 100644
--- a/argilla-frontend/components/features/annotation/progress/TeamProgress.vue
+++ b/argilla-frontend/components/features/annotation/progress/TeamProgress.vue
@@ -12,8 +12,12 @@
         :show-tooltip="showTooltip"
         :tooltip-position-fixed="false"
         :show-percent-in-tooltip="false"
+        role="progressbar"
+        :aria-valuenow="progress.percentage.completed"
+        aria-label="Team Annotation-Progress"
+        aria-labelledby="team-progress-percent"
       />
-      <span class="team-progress__percent"
+      <span id="team-progress-percent" class="team-progress__percent"
         >{{ progress.percentage.completed }}%</span
       >
       <span v-if="visibleProgressValues" class="team-progress__info">
diff --git a/argilla-frontend/components/features/global/AppHeader.vue b/argilla-frontend/components/features/global/AppHeader.vue
index b31a18d6db..4dc6f0080c 100644
--- a/argilla-frontend/components/features/global/AppHeader.vue
+++ b/argilla-frontend/components/features/global/AppHeader.vue
@@ -19,6 +19,8 @@
   <section id="header" ref="header" class="header">
     <base-topbar-brand>
       <base-breadcrumbs
+        role="button"
+        aria-label="Home button"
         :breadcrumbs="breadcrumbs"
         @breadcrumb-action="onBreadcrumbAction"
       />
diff --git a/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue b/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
index 8f01ed7eaa..df7794292c 100644
--- a/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
+++ b/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="$auth.loggedIn" v-click-outside="close" class="user">
-    <a class="user__button" @click.prevent="showSelector">
+    <a class="user__button" @click.prevent="showSelector" role="button" aria-label="User Button">
       {{ user.avatar }}
     </a>
     <div v-if="visibleSelector && user" class="user__content">
@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-      <div class="">
+      <div class="" role="list">
         <NuxtLink class="user__link" :to="{ name: 'user-settings' }">
           {{ $t("userAvatarTooltip.settings") }}
         </NuxtLink>
diff --git a/argilla-frontend/plugins/directives/required-field.directive.js b/argilla-frontend/plugins/directives/required-field.directive.js
index dbedada2fa..163fff4c04 100644
--- a/argilla-frontend/plugins/directives/required-field.directive.js
+++ b/argilla-frontend/plugins/directives/required-field.directive.js
@@ -14,6 +14,7 @@ Vue.directive("required-field", {
       const text = document.createTextNode(" *");
       const textWrapper = document.createElement("span");
       textWrapper.setAttribute("title", "Required response");
+      textWrapper.setAttribute("role", "mark");
       textWrapper.style.color = color;
       textWrapper.appendChild(text);