diff --git a/assets/js/theme/design-system/accordion.js b/assets/js/theme/design-system/accordion.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3034a76573eb22e5cb55301e64cb34f16cf0a1c
--- /dev/null
+++ b/assets/js/theme/design-system/accordion.js
@@ -0,0 +1,33 @@
+function Accordion(element) {
+    this.element = element;
+    this.button = this.element.querySelector('summary');
+
+    this.state = {
+        isOpened: false
+    };
+
+    this.listen();
+}
+
+Accordion.prototype.listen = function() {
+    var self = this;
+
+    this.button.addEventListener('click', function() {
+        self.toggleAccordion();
+    });
+};
+
+Accordion.prototype.toggleAccordion = function(open) {
+    if (typeof open === 'undefined') {
+        open = !this.state.isOpened;
+    }
+    this.state.isOpened = open;
+    this.button.setAttribute('aria-expanded', this.state.isOpened);
+};
+
+(function () {
+    var accordions = document.querySelectorAll('details');
+    Array.prototype.forEach.call(accordions, function(accordion) {
+        new Accordion(accordion);
+    });
+}());
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 3cc191d2542d24b310f90336957dca8cfdd9e3b7..64cf4c5f8bf846afb11d0b0ac74bdd43dd9aa8e5 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -1,4 +1,5 @@
 import './body.js';
+import './design-system/accordion.js';
 import './design-system/clickToCopy';
 import './design-system/dropdowns';
 import './design-system/font';
diff --git a/layouts/partials/blocks/templates/definitions.html b/layouts/partials/blocks/templates/definitions.html
index d61c4ac01e40d80819a2eb1c6eae620bc502bd22..373bb6ee9fe0087319798dcb8befbe4f44c07d1b 100644
--- a/layouts/partials/blocks/templates/definitions.html
+++ b/layouts/partials/blocks/templates/definitions.html
@@ -1,7 +1,9 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
 
 {{- with .block.data -}}
+  {{ .Params.position }}
   <div class="{{ $block_class }}">
     <div class="container">
       <div class="block-content">
@@ -11,10 +13,11 @@
           "description" .description
         )}}
         <div class="definitions">
-          {{- range .elements }}
-            <details itemscope itemtype="https://schema.org/DefinedTerm">
-              <summary itemprop="name">{{ .title | safeHTML }}</summary>
-              <p itemprop="description">{{ .description | safeHTML }}</p>
+          {{- range $index, $element := .elements }}
+            {{ $id := printf "block-%d-element-%d" $block_index $index }}
+            <details id="{{$id}}" itemscope itemtype="https://schema.org/DefinedTerm">
+              <summary itemprop="name" aria-controls="#{{ $id }}" aria-expanded="false">{{ $element.title | safeHTML }}</summary>
+              <p itemprop="description">{{ $element.description | safeHTML }}</p>
             </details>
           {{ end -}}
         </div>
diff --git a/layouts/partials/blocks/templates/embed.html b/layouts/partials/blocks/templates/embed.html
index 44a59c7200a792d22fc4d0452c3d183446d290e4..2e68469d17399a47ebb7df97ce39420a366db695 100644
--- a/layouts/partials/blocks/templates/embed.html
+++ b/layouts/partials/blocks/templates/embed.html
@@ -1,5 +1,6 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
 
 {{- with .block.data -}}
   <div class="{{ $block_class }}">
@@ -15,6 +16,7 @@
         {{ end -}}
 
         {{ partial "commons/transcription" ( dict
+            "block_index" $block_index
             "transcription" .transcription
           ) }}
       </div>
diff --git a/layouts/partials/blocks/templates/sound.html b/layouts/partials/blocks/templates/sound.html
index c6fc6f0259d7c9b55f5b40947539a27d01cb1bc8..219deac4edbf8a3ec18406a7a3d2280b3a40822f 100644
--- a/layouts/partials/blocks/templates/sound.html
+++ b/layouts/partials/blocks/templates/sound.html
@@ -1,5 +1,6 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
 
 {{- with .block.data -}}
   <div class="{{ $block_class }}">
@@ -23,6 +24,7 @@
           {{ end }}
 
           {{ partial "commons/transcription" ( dict
+            "block_index" $block_index
             "transcription" .transcription
           ) }}
         </div>
diff --git a/layouts/partials/blocks/templates/video.html b/layouts/partials/blocks/templates/video.html
index 00301359995fc7c2e90f6f07ffe03621d29ccaa4..d38503b2bad9ee771ba5a96ffb961abadff138a6 100644
--- a/layouts/partials/blocks/templates/video.html
+++ b/layouts/partials/blocks/templates/video.html
@@ -1,5 +1,6 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
 
 {{- with .block.data -}}
   <div class="{{ $block_class }}">
@@ -31,6 +32,7 @@
         {{ end }}
 
         {{ partial "commons/transcription" ( dict
+          "block_index" $block_index
           "transcription" .transcription
         ) }}
       </div>
diff --git a/layouts/partials/commons/transcription.html b/layouts/partials/commons/transcription.html
index fb2908e6a1871ff1a32d711941837b34d1a332d1..1821ec6b14cf0f242cae457d1cea80a8c4b211e9 100644
--- a/layouts/partials/commons/transcription.html
+++ b/layouts/partials/commons/transcription.html
@@ -1,7 +1,10 @@
 {{ if (partial "GetTextFromHTML" .transcription) }}
+{{ $block_index := .block_index }}
+{{ $id := printf "block-%d-transcription" $block_index}}
+
 <div class="transcription">
-  <details>
-    <summary>{{ i18n "commons.accessibility.transcription" }}</summary>
+  <details id="{{$id}}">
+    <summary aria-controls="#{{ $id }}" aria-expanded="false">{{ i18n "commons.accessibility.transcription" }}</summary>
     <p>
       {{- $transcription := partial "PrepareHTML" .transcription -}}
       {{ safeHTML (replace $transcription "\n" "<br/>") }}
diff --git a/layouts/partials/contents/list.html b/layouts/partials/contents/list.html
index 1219b413e347671d26ed4f2f5aee29b493e6363d..c8fde95d983567091ba114751d71a82ad4c9658f 100644
--- a/layouts/partials/contents/list.html
+++ b/layouts/partials/contents/list.html
@@ -1,12 +1,13 @@
 {{ $context := . }}
 {{- if .Params.contents -}}
   <div class="blocks">
-  {{- range .Params.contents -}}
+  {{- range $index, $content := .Params.contents -}}
     {{ if eq .kind "block" }}
-      {{ $template := printf "blocks/templates/%s.html" .template }}
+      {{ $template := printf "blocks/templates/%s.html" $content.template }}
       {{ partial $template (dict
-          "block" .
+          "block" $content
           "context" $context
+          "index" $index
       )}}
     {{- else if (eq .kind "heading") -}}
       {{ $headingId := .slug | default (urlize .title) }}