chore: improve accessibility (#20)

Improve images, code blocks, cards and progress bar accessibility.

54 files changed, 458 insertions, 136 deletions

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index d06aff3..22d13f6 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -24,6 +24,19 @@ export default {
         required: false,
       },
     },
+    'aria-labelledby': {
+      control: {
+        type: null,
+      },
+      description: 'One or more ids that refer to an accessible label.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 64e0afd..989f737 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -8,6 +8,10 @@ export type ButtonLinkProps = {
    */
   'aria-label'?: string;
   /**
+   * One or more ids that refer to the accessible label.
+   */
+  'aria-labelledby'?: string;
+  /**
    * The button link body.
    */
   children: ReactNode;
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 2444bb1..b702544 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -21,6 +21,8 @@
 
   &--square,
   &--circle {
+    min-width: fit-content;
+    min-height: fit-content;
     padding: var(--spacing-xs);
     aspect-ratio: 1 / 1;
   }
diff --git a/src/components/atoms/forms/label.module.scss b/src/components/atoms/forms/label.module.scss
index f900925..aed1546 100644
--- a/src/components/atoms/forms/label.module.scss
+++ b/src/components/atoms/forms/label.module.scss
@@ -1,6 +1,7 @@
 .label {
   color: var(--color-primary-darker);
   font-weight: 600;
+  cursor: pointer;
 
   &--small {
     font-size: var(--font-size-sm);
diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
index 1941479..9234886 100644
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: ArrowIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
index 2962530..8aec5a1 100644
--- a/src/components/atoms/icons/arrow.tsx
+++ b/src/components/atoms/icons/arrow.tsx
@@ -5,6 +5,10 @@ export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
 
 export type ArrowProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -19,7 +23,7 @@ export type ArrowProps = {
  *
  * Render a svg arrow icon.
  */
-const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
+const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   const directionClass = styles[`icon--${direction}`];
   const classes = `${styles.icon} ${directionClass} ${className}`;
 
@@ -29,6 +33,7 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
+        {...props}
       >
         <path
           className="arrow-head"
@@ -48,6 +53,7 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
+        {...props}
       >
         <path
           className="arrow-head"
@@ -67,6 +73,7 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
         className={classes}
         viewBox="0 0 64.644997 23.476001"
         xmlns="http://www.w3.org/2000/svg"
+        {...props}
       >
         <path
           className="arrow-head"
@@ -85,6 +92,7 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
       className={classes}
       viewBox="0 0 64.644997 23.476001"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         className="arrow-head"
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
index 7b11bb8..400ed21 100644
--- a/src/components/atoms/icons/career.stories.tsx
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: CareerIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
index f28d399..009c2b4 100644
--- a/src/components/atoms/icons/career.tsx
+++ b/src/components/atoms/icons/career.tsx
@@ -3,6 +3,10 @@ import styles from './career.module.scss';
 
 export type CareerProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type CareerProps = {
  *
  * Render a career svg icon.
  */
-const Career: FC<CareerProps> = ({ className = '' }) => {
+const Career: FC<CareerProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         className={styles.bottom}
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
index f9628db..05251c5 100644
--- a/src/components/atoms/icons/close.stories.tsx
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: CloseIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
index 3e0adb5..14239a1 100644
--- a/src/components/atoms/icons/close.tsx
+++ b/src/components/atoms/icons/close.tsx
@@ -3,6 +3,10 @@ import styles from './close.module.scss';
 
 export type CloseProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type CloseProps = {
  *
  * Render a close svg icon.
  */
-const Close: FC<CloseProps> = ({ className = '' }) => {
+const Close: FC<CloseProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         className={styles.line}
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
index 631f30d..74228ca 100644
--- a/src/components/atoms/icons/cog.stories.tsx
+++ b/src/components/atoms/icons/cog.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: CogIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
index 9e78a7b..5431f9e 100644
--- a/src/components/atoms/icons/cog.tsx
+++ b/src/components/atoms/icons/cog.tsx
@@ -3,6 +3,10 @@ import styles from './cog.module.scss';
 
 export type CogProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type CogProps = {
  *
  * Render a cog svg icon.
  */
-const Cog: FC<CogProps> = ({ className = '' }) => {
+const Cog: FC<CogProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
       <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
index 19649ad..ad457a9 100644
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: ComputerScreenIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
index 8786139..9293316 100644
--- a/src/components/atoms/icons/computer-screen.tsx
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -3,6 +3,10 @@ import styles from './computer-screen.module.scss';
 
 export type ComputerScreenProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,16 @@ export type ComputerScreenProps = {
  *
  * Render a computer screen svg icon.
  */
-const ComputerScreen: FC<ComputerScreenProps> = ({ className = '' }) => {
+const ComputerScreen: FC<ComputerScreenProps> = ({
+  className = '',
+  ...props
+}) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
index efa94dd..3d24d2e 100644
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: EnvelopIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
index 84dca97..99a003b 100644
--- a/src/components/atoms/icons/envelop.tsx
+++ b/src/components/atoms/icons/envelop.tsx
@@ -3,6 +3,10 @@ import styles from './envelop.module.scss';
 
 export type EnvelopProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type EnvelopProps = {
  *
  * Render an envelop svg icon.
  */
-const Envelop: FC<EnvelopProps> = ({ className = '' }) => {
+const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         className={styles.background}
diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx
index e3587a8..5e4615f 100644
--- a/src/components/atoms/icons/feed.stories.tsx
+++ b/src/components/atoms/icons/feed.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: FeedIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx
index 6839abd..4428eb9 100644
--- a/src/components/atoms/icons/feed.tsx
+++ b/src/components/atoms/icons/feed.tsx
@@ -3,6 +3,10 @@ import styles from './feed.module.scss';
 
 export type FeedProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type FeedProps = {
  *
  * Render a feed svg icon.
  */
-const Feed: FC<FeedProps> = ({ className = '' }) => {
+const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 256 256"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <defs>
         <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
index ffb3061..90650fc 100644
--- a/src/components/atoms/icons/home.stories.tsx
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: HomeIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
index 3b6732d..dd39b15 100644
--- a/src/components/atoms/icons/home.tsx
+++ b/src/components/atoms/icons/home.tsx
@@ -3,6 +3,10 @@ import styles from './home.module.scss';
 
 export type HomeProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type HomeProps = {
  *
  * Render a home svg icon.
  */
-const Home: FC<HomeProps> = ({ className = '' }) => {
+const Home: FC<HomeProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         className={styles.wall}
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
index 3e33deb..0715a11 100644
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: MagnifyingGlassIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
index 1ca2a44..ad8da39 100644
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -3,6 +3,10 @@ import styles from './magnifying-glass.module.scss';
 
 export type MagnifyingGlassProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,16 @@ export type MagnifyingGlassProps = {
  *
  * Render a magnifying glass svg icon.
  */
-const MagnifyingGlass: FC<MagnifyingGlassProps> = ({ className = '' }) => {
+const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
+  className = '',
+  ...props
+}) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         className={styles['small-handle']}
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
index e8b34de..9584e47 100644
--- a/src/components/atoms/icons/moon.stories.tsx
+++ b/src/components/atoms/icons/moon.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: MoonIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
index ec4fa0c..d04605a 100644
--- a/src/components/atoms/icons/moon.tsx
+++ b/src/components/atoms/icons/moon.tsx
@@ -3,6 +3,10 @@ import styles from './moon.module.scss';
 
 export type MoonProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -12,12 +16,13 @@ export type MoonProps = {
   title?: string;
 };
 
-const Moon: FC<MoonProps> = ({ className = '', title }) => {
+const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
       className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       {title !== 'undefined' && <title>{title}</title>}
       <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
index 1990b98..f11b13b 100644
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ b/src/components/atoms/icons/posts-stack.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: PostsStackIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
index ab21323..af070de 100644
--- a/src/components/atoms/icons/posts-stack.tsx
+++ b/src/components/atoms/icons/posts-stack.tsx
@@ -3,6 +3,10 @@ import styles from './posts-stack.module.scss';
 
 export type PostsStackProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -13,12 +17,13 @@ export type PostsStackProps = {
  *
  * Render a posts stack svg icon.
  */
-const PostsStack: FC<PostsStackProps> = ({ className = '' }) => {
+const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.icon} ${className}`}
+      {...props}
     >
       <path
         className={styles.background}
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
index 60af648..dabda66 100644
--- a/src/components/atoms/icons/sun.stories.tsx
+++ b/src/components/atoms/icons/sun.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Illustrations/Icons',
   component: SunIcon,
   argTypes: {
+    'aria-hidden': {
+      control: {
+        type: null,
+      },
+      description: 'Should the svg be hidden from assistive technologies?',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
index ca31747..1d29ff4 100644
--- a/src/components/atoms/icons/sun.tsx
+++ b/src/components/atoms/icons/sun.tsx
@@ -3,6 +3,10 @@ import styles from './sun.module.scss';
 
 export type SunProps = {
   /**
+   * Should the svg be hidden from assistive technologies?
+   */
+  'aria-hidden'?: boolean;
+  /**
    * Set additional classnames to the icon.
    */
   className?: string;
@@ -17,12 +21,13 @@ export type SunProps = {
  *
  * Render a svg sun icon.
  */
-const Sun: FC<SunProps> = ({ className = '', title }) => {
+const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
       className={`${styles.sun} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       {title !== 'undefined' && <title>{title}</title>}
       <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
diff --git a/src/components/atoms/loaders/progress-bar.fixture.tsx b/src/components/atoms/loaders/progress-bar.fixture.tsx
new file mode 100644
index 0000000..d9b02c3
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.fixture.tsx
@@ -0,0 +1,5 @@
+export const id = 'amet-eum-ut';
+export const min = 0;
+export const max = 50;
+export const current = 20;
+export const label = '20 loaded out of a total of 50';
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
index fcd631c..1eead64 100644
--- a/src/components/atoms/loaders/progress-bar.stories.tsx
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -1,26 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ProgressBarComponent from './progress-bar';
+import { current, id, label, max, min } from './progress-bar.fixture';
 
 /**
  * ProgressBar - Storybook Meta
  */
 export default {
-  title: 'Atoms/Loaders/ProgressBar',
+  title: 'Atoms/Loaders',
   component: ProgressBarComponent,
   argTypes: {
-    'aria-label': {
-      control: {
-        type: 'string',
-      },
-      description: 'An accessible name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
     current: {
       control: {
         type: 'number',
@@ -31,17 +19,24 @@ export default {
         required: true,
       },
     },
-    info: {
+    id: {
       control: {
         type: 'text',
       },
-      description: 'An additional information to display.',
-      table: {
-        category: 'Options',
+      description: 'The progress bar id.',
+      type: {
+        name: 'string',
+        required: true,
       },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'The progress bar label.',
       type: {
         name: 'string',
-        required: false,
+        required: true,
       },
     },
     max: {
@@ -72,22 +67,13 @@ const Template: ComponentStory<typeof ProgressBarComponent> = (args) => (
 );
 
 /**
- * Loaders Stories - Default Progress bar
+ * Loaders Stories - Progress bar
  */
 export const ProgressBar = Template.bind({});
 ProgressBar.args = {
-  current: 10,
-  min: 0,
-  max: 50,
-};
-
-/**
- * Loaders Stories - Progress bar With Info
- */
-export const ProgressBarWithInfo = Template.bind({});
-ProgressBarWithInfo.args = {
-  current: 10,
-  info: 'Loaded: 10 / 50',
-  min: 0,
-  max: 50,
+  current,
+  id,
+  label,
+  min,
+  max,
 };
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index 3d32feb..bb28f41 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,9 +1,20 @@
 import { render, screen } from '@tests/utils';
 import ProgressBar from './progress-bar';
+import { current, id, label, max, min } from './progress-bar.fixture';
 
 describe('ProgressBar', () => {
   it('renders a progress bar', () => {
-    render(<ProgressBar min={0} max={50} current={10} />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    render(
+      <ProgressBar
+        id={id}
+        label={label}
+        min={min}
+        max={max}
+        current={current}
+      />
+    );
+    expect(
+      screen.getByRole('progressbar', { name: label })
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 9bac847..60c585a 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -3,17 +3,17 @@ import styles from './progress-bar.module.scss';
 
 export type ProgressBarProps = {
   /**
-   * Accessible progress bar name.
-   */
-  'aria-label'?: string;
-  /**
    * Current value.
    */
   current: number;
   /**
-   * Additional information to display before progress bar.
+   * The progress bar id.
+   */
+  id: string;
+  /**
+   * The progress bar label.
    */
-  info?: string;
+  label: string;
   /**
    * Minimal value.
    */
@@ -31,23 +31,27 @@ export type ProgressBarProps = {
  */
 const ProgressBar: FC<ProgressBarProps> = ({
   current,
-  info,
+  id,
+  label,
   min,
   max,
-  ...props
 }) => {
   return (
     <div className={styles.progress}>
-      {info && <div className={styles.progress__info}>{info}</div>}
+      <label htmlFor={id} className={styles.progress__info}>
+        {label}
+      </label>
       <progress
         className={styles.progress__bar}
+        id={id}
         max={max}
         value={current}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={current}
-        {...props}
-      ></progress>
+      >
+        {current}/{max}
+      </progress>
     </div>
   );
 };
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index bd1925a..ad5c674 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -34,7 +34,7 @@ const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
         aria-label={linkName}
         className={styles.link}
       >
-        <Arrow direction="top" />
+        <Arrow aria-hidden={true} direction="top" />
       </ButtonLink>
     </div>
   );
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx
index c874369..12f8d8d 100644
--- a/src/components/molecules/forms/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label.tsx
@@ -30,7 +30,7 @@ const FlippingLabel: FC<FlippingLabelProps> = ({
       <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
         <span className={styles.front}>{children}</span>
         <span className={styles.back}>
-          <Close />
+          <Close aria-hidden={true} />
         </span>
       </span>
     </Label>
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 4541df8..5373561 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -49,6 +49,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
   layout,
   objectFit,
   target,
+  title,
   withBorders,
   ...props
 }) => {
@@ -59,15 +60,17 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
 
   return (
     <figure
+      aria-label={caption ? undefined : title}
       className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`}
     >
       {target ? (
         <Link href={target} className={styles.link}>
           <Image
             alt={alt}
+            className={styles.img}
             layout={layout || 'intrinsic'}
             objectFit={objectFit || 'contain'}
-            className={styles.img}
+            title={title}
             {...props}
           />
           {caption && (
@@ -78,9 +81,10 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
         <>
           <Image
             alt={alt}
+            className={styles.img}
             layout={layout || 'intrinsic'}
             objectFit={objectFit || 'contain'}
-            className={styles.img}
+            title={title}
             {...props}
           />
           {caption && (
diff --git a/src/components/molecules/layout/card.fixture.tsx b/src/components/molecules/layout/card.fixture.tsx
new file mode 100644
index 0000000..f96cc43
--- /dev/null
+++ b/src/components/molecules/layout/card.fixture.tsx
@@ -0,0 +1,19 @@
+export const cover = {
+  alt: 'A picture',
+  height: 480,
+  src: 'http://placeimg.com/640/480',
+  width: 640,
+};
+
+export const id = 'nam';
+
+export const meta = {
+  author: 'Possimus',
+  thematics: ['Autem', 'Eos'],
+};
+
+export const tagline = 'Ut rerum incidunt';
+
+export const title = 'Alias qui porro';
+
+export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 0ad42c0..87051a9 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Card from './card';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 /**
  * Card - Storybook Meta
@@ -47,6 +48,16 @@ export default {
         required: false,
       },
     },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'The card id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     meta: {
       description: 'The card metadata (a publication date for example).',
       table: {
@@ -108,25 +119,15 @@ export default {
 
 const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const meta = {
-  thematics: ['Autem', 'Eos'],
-};
-
 /**
  * Card Stories - Default
  */
 export const Default = Template.bind({});
 Default.args = {
-  title: 'Veritatis dicta quod',
+  id,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -135,9 +136,10 @@ Default.args = {
 export const WithCover = Template.bind({});
 WithCover.args = {
   cover,
-  title: 'Veritatis dicta quod',
+  id,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -145,10 +147,11 @@ WithCover.args = {
  */
 export const WithMeta = Template.bind({});
 WithMeta.args = {
+  id,
   meta,
-  title: 'Veritatis dicta quod',
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -156,10 +159,11 @@ WithMeta.args = {
  */
 export const WithTagline = Template.bind({});
 WithTagline.args = {
-  tagline: 'Ullam accusantium ipsa',
-  title: 'Veritatis dicta quod',
+  id,
+  tagline,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -168,9 +172,10 @@ WithTagline.args = {
 export const WithAll = Template.bind({});
 WithAll.args = {
   cover,
+  id,
   meta,
-  tagline: 'Ullam accusantium ipsa',
-  title: 'Veritatis dicta quod',
+  tagline,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index d481f6c..1023aeb 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,49 +1,36 @@
 import { render, screen } from '@tests/utils';
 import Card from './card';
-
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const meta = {
-  author: 'Possimus',
-  thematics: ['Autem', 'Eos'],
-};
-
-const tagline = 'Ut rerum incidunt';
-
-const title = 'Alias qui porro';
-
-const url = '/an-existing-url';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 describe('Card', () => {
   it('renders a title wrapped in h2 element', () => {
-    render(<Card title={title} titleLevel={2} url={url} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} />);
     expect(
       screen.getByRole('heading', { level: 2, name: title })
     ).toBeInTheDocument();
   });
 
   it('renders a link to another page', () => {
-    render(<Card title={title} titleLevel={2} url={url} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} />);
     expect(screen.getByRole('link')).toHaveAttribute('href', url);
   });
 
   it('renders a cover', () => {
-    render(<Card title={title} titleLevel={2} url={url} cover={cover} />);
+    render(
+      <Card id={id} title={title} titleLevel={2} url={url} cover={cover} />
+    );
     expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
   });
 
   it('renders a tagline', () => {
-    render(<Card title={title} titleLevel={2} url={url} tagline={tagline} />);
+    render(
+      <Card id={id} title={title} titleLevel={2} url={url} tagline={tagline} />
+    );
     expect(screen.getByText(tagline)).toBeInTheDocument();
   });
 
   it('renders some meta', () => {
-    render(<Card title={title} titleLevel={2} url={url} meta={meta} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
     expect(screen.getByText(meta.author)).toBeInTheDocument();
   });
 });
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 7bbd040..c48bc18 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -22,6 +22,10 @@ export type CardProps = {
    */
   coverFit?: ResponsiveImageProps['objectFit'];
   /**
+   * The card id.
+   */
+  id: string;
+  /**
    * The card meta.
    */
   meta?: MetaData;
@@ -52,6 +56,7 @@ const Card: FC<CardProps> = ({
   className = '',
   cover,
   coverFit = 'cover',
+  id,
   meta,
   tagline,
   title,
@@ -59,7 +64,11 @@ const Card: FC<CardProps> = ({
   url,
 }) => {
   return (
-    <ButtonLink target={url} className={`${styles.wrapper} ${className}`}>
+    <ButtonLink
+      aria-labelledby={`${id}-heading`}
+      target={url}
+      className={`${styles.wrapper} ${className}`}
+    >
       <article className={styles.article}>
         <header className={styles.header}>
           {cover && (
@@ -71,8 +80,9 @@ const Card: FC<CardProps> = ({
           )}
           <Heading
             alignment="center"
-            level={titleLevel}
             className={styles.title}
+            id={`${id}-heading`}
+            level={titleLevel}
           >
             {title}
           </Heading>
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index ac0e98f..c3fbf22 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -12,6 +12,19 @@ export default {
     outputPattern: '#output#',
   },
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the code sample.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 30351b9..7e249d1 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -7,6 +7,10 @@ import styles from './code.module.scss';
 
 export type CodeProps = {
   /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
+  /**
    * The code to highlight.
    */
   children: string;
@@ -39,6 +43,7 @@ const Code: FC<CodeProps> = ({
   language,
   plugins = [],
   outputPattern = '#output#',
+  ...props
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { attributes, className } = usePrism({ language, plugins });
@@ -54,6 +59,7 @@ const Code: FC<CodeProps> = ({
         tabIndex={0}
         {...attributes}
         {...outputAttribute}
+        {...props}
       >
         <code className={`language-${language}`}>{children}</code>
       </pre>
diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx
index 934b50a..604720e 100644
--- a/src/components/molecules/nav/pagination.tsx
+++ b/src/components/molecules/nav/pagination.tsx
@@ -177,7 +177,7 @@ const Pagination: FC<PaginationProps> = ({
       });
       const body =
         typeof page === 'string'
-          ? '\u2026'
+          ? page // dots
           : intl.formatMessage(
               {
                 defaultMessage: '<a11y>Page </a11y>{number}',
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 1feddd0..dd05e59 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -55,9 +55,10 @@ const CardsList: FC<CardsListProps> = ({
         value: (
           <Card
             key={id}
+            className={styles.card}
             coverFit={coverFit}
+            id={id}
             titleLevel={titleLevel}
-            className={styles.card}
             {...card}
           />
         ),
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 24869fd..e3788c7 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -190,10 +190,12 @@ const PostsList: FC<PostsListProps> = ({
     return (
       <>
         <ProgressBar
+          aria-label={progressInfo}
+          current={posts.length}
+          id="loaded-posts"
+          label={progressInfo}
           min={1}
           max={total}
-          current={posts.length}
-          info={progressInfo}
         />
         {showLoadMoreBtn && (
           <Button
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 8807878..5d27862 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -115,7 +115,11 @@ const Summary: FC<SummaryProps> = ({
         <ButtonLink target={url} className={styles['read-more']}>
           <>
             {readMore}
-            <Arrow direction="right" className={styles.icon} />
+            <Arrow
+              aria-hidden={true}
+              className={styles.icon}
+              direction="right"
+            />
           </>
         </ButtonLink>
       </div>
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 2d4b6b5..0ac82d9 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -70,7 +70,7 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         aria-label={label}
         isActive={isActive}
       >
-        <MagnifyingGlass />
+        <MagnifyingGlass aria-hidden={true} />
       </FlippingLabel>
       <SearchModal
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 0e7daa2..ee59e26 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -63,7 +63,7 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         aria-label={label}
         isActive={isActive}
       >
-        <Cog />
+        <Cog aria-hidden={true} />
       </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 693951e..2a10a30 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -104,16 +104,36 @@ const Layout: FC<LayoutProps> = ({
   });
 
   const mainNav: HeaderProps['nav'] = [
-    { id: 'home', label: homeLabel, href: '/', logo: <Home /> },
-    { id: 'blog', label: blogLabel, href: '/blog', logo: <PostsStack /> },
+    {
+      id: 'home',
+      label: homeLabel,
+      href: '/',
+      logo: <Home aria-hidden={true} />,
+    },
+    {
+      id: 'blog',
+      label: blogLabel,
+      href: '/blog',
+      logo: <PostsStack aria-hidden={true} />,
+    },
     {
       id: 'projects',
       label: projectsLabel,
       href: '/projets',
-      logo: <ComputerScreen />,
+      logo: <ComputerScreen aria-hidden={true} />,
+    },
+    {
+      id: 'cv',
+      label: cvLabel,
+      href: '/cv',
+      logo: <Career aria-hidden={true} />,
+    },
+    {
+      id: 'contact',
+      label: contactLabel,
+      href: '/contact',
+      logo: <Envelop aria-hidden={true} />,
     },
-    { id: 'cv', label: cvLabel, href: '/cv', logo: <Career /> },
-    { id: 'contact', label: contactLabel, href: '/contact', logo: <Envelop /> },
   ];
 
   const legalNoticeLabel = intl.formatMessage({
diff --git a/src/content b/src/content
-Subproject 742cb70a219b324d8e4d9b7f0f48627984b5995
+Subproject 9779d137a71eb20e82581f2a5f83300891e923c
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 4686505..8b17da0 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -61,14 +61,6 @@ const CVPage: NextPageWithLayout = () => {
   };
 
   const { website } = useSettings();
-  const cvAlt = intl.formatMessage(
-    {
-      defaultMessage: '{name} CV',
-      description: 'CVPage: CV image alternative text',
-      id: 'KUowUk',
-    },
-    { name: website.name }
-  );
   const cvCaption = intl.formatMessage(
     {
       defaultMessage: '<link>Download the CV in PDF</link>',
@@ -90,7 +82,7 @@ const CVPage: NextPageWithLayout = () => {
       expanded={true}
       title={imageWidgetTitle}
       level={2}
-      image={{ alt: cvAlt, ...image }}
+      image={image}
       description={cvCaption}
       imageClassName={styles.image}
     />,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6e9c4c6..025bf6d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -193,7 +193,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
         id: 'contact-me',
         value: (
           <ButtonLink target="/contact">
-            <Envelop className={styles.icon} />
+            <Envelop aria-hidden={true} className={styles.icon} />
             {intl.formatMessage({
               defaultMessage: 'Contact me',
               description: 'HomePage: contact button text',
@@ -206,7 +206,10 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
         id: 'rss-feed',
         value: (
           <ButtonLink target="/feed">
-            <FeedIcon className={`${styles.icon} ${styles['icon--feed']}`} />
+            <FeedIcon
+              aria-hidden={true}
+              className={`${styles.icon} ${styles['icon--feed']}`}
+            />
             {intl.formatMessage({
               defaultMessage: 'Subscribe',
               description: 'HomePage: RSS feed subscription text',
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 1ec5494..b6a6082 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -24,7 +24,6 @@ video {
 }
 
 button,
-label,
 summary {
   cursor: pointer;
 }
diff --git a/src/ts/types/mdx.ts b/src/ts/types/mdx.ts
index 16538c1..7645ce6 100644
--- a/src/ts/types/mdx.ts
+++ b/src/ts/types/mdx.ts
@@ -3,7 +3,12 @@ import { Meta } from './app';
 
 export type MDXData = {
   file: string;
-  image: StaticImageData;
+  image: MDXImage;
+};
+
+export type MDXImage = StaticImageData & {
+  alt: string;
+  title?: string;
 };
 
 export type MDXPageMeta = Pick<Meta<'page'>, 'cover' | 'dates' | 'seo'> & {
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
index a0f0c04..88f4516 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/projects.ts
@@ -46,6 +46,7 @@ export const getProjectData = async (
           ...cover.default,
           alt: `${title} image`,
           src: `/projects/${filename}.jpg`,
+          title,
         },
       },
       slug: filename,