diff --git a/src/components/AnswerButton.vue b/src/components/AnswerButton.vue
index 45374f9..2ccf6f1 100644
--- a/src/components/AnswerButton.vue
+++ b/src/components/AnswerButton.vue
@@ -2,6 +2,7 @@
 import Popper from 'vue3-popper'
 import type { Answer } from '../content.config'
 import { answerLabels } from '../store'
+import { onMounted } from 'vue';
 
 defineProps<{
   answer: Answer
@@ -12,6 +13,12 @@ defineProps<{
 const emit = defineEmits<{
   save: [Answer]
 }>()
+
+onMounted(() => {
+  // For accessibility reason, we always want to focus the first button
+  const button = document.querySelector('.answer-button button')
+  button?.focus()
+})
 </script>
 
 <template>
@@ -32,6 +39,7 @@ const emit = defineEmits<{
         :class="{ 'ring-3 ring-primary-yellow': selected }"
         @click="emit('save', answer)"
         :disabled="disabled"
+        tabindex="0"
       >
         <slot class="me-1" />
         {{ answerLabels[answer] }}
diff --git a/src/components/AnswerIndicator.vue b/src/components/AnswerIndicator.vue
index d7343de..ed9081b 100644
--- a/src/components/AnswerIndicator.vue
+++ b/src/components/AnswerIndicator.vue
@@ -32,9 +32,9 @@ const styles: Record<Answer, any> = {
       class="flex h-10 w-10 items-center justify-center rounded-full text-white"
       :class="[styles[answer].class]"
       v-bind="$attrs"
-      :aria-label="answerLabels[answer]"
     >
-      <component :is="styles[answer].icon" class="h-7 w-7" aria-hidden="true" />
+    <span class="sr-only">{{ answerLabels[answer] }}</span>
+    <component :is="styles[answer].icon" class="h-7 w-7" aria-hidden="true" />
     </div>
   </Popper>
 </template>
diff --git a/src/components/QuestionCard.vue b/src/components/QuestionCard.vue
index 284add7..3c730bf 100644
--- a/src/components/QuestionCard.vue
+++ b/src/components/QuestionCard.vue
@@ -70,7 +70,7 @@ const hasAnswer = computed(
         </div>
       </Transition>
       <Transition mode="out-in" :name="transitionName">
-        <div class="" :key="currentQuestionIndex">
+        <div aria-live="assertive" class="" :key="currentQuestionIndex">
           <h2 class="my-4 text-xl font-medium max-md:hyphens-auto @md:text-4xl">
             {{ currentQuestion.thesis }}
           </h2>
diff --git a/src/components/ResultMatches.vue b/src/components/ResultMatches.vue
index 1beba25..c843e27 100644
--- a/src/components/ResultMatches.vue
+++ b/src/components/ResultMatches.vue
@@ -40,10 +40,15 @@ dl {
 }
 
 .progress-result {
-  animation: result-bar 1s cubic-bezier(0, 0, 0.2, 1);
   transform-origin: left;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .progress-result {
+    animation: result-bar 1s cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
 @keyframes result-bar {
   from {
     transform: scaleX(0);
diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue
index 2d1992f..9564623 100644
--- a/src/views/Questionnaire.vue
+++ b/src/views/Questionnaire.vue
@@ -73,6 +73,7 @@ const previousQuestion = () => {
         aria-valuemin="1"
         :aria-valuemax="questionsCount"
         :aria-valuenow="currentQuestionProgress"
+        aria-hidden="true"
       >
         <div
           class="h-2 bg-purple-900 duration-300 ease-out motion-safe:transition-all"