From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 22 Dec 2025 10:34:37 +0000 (+0100)
Subject: wip #7779 @8:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7afef164648bd65cf0526619dfdbd518653bac07;p=fluidbook-html5.git

wip #7779 @8:00
---

diff --git a/images/accessibility/action-selected-item.svg b/images/accessibility/action-selected-item.svg
new file mode 100644
index 00000000..09a5120a
--- /dev/null
+++ b/images/accessibility/action-selected-item.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="53.5" height="43.5" viewBox="0 0 53.5 43.5">
+  <g id="action-selected-item" transform="translate(-57.75 -2527.177)">
+    <path id="Tracé_37" data-name="Tracé 37" d="M49.968,42.5h-36.8a1.3,1.3,0,0,1-1.159-.686L9.227,36.45a1.3,1.3,0,0,0-1.16-.686H3.031A2.47,2.47,0,0,1,.5,33.359V2.9A2.47,2.47,0,0,1,3.031.5H49.968A2.47,2.47,0,0,1,52.5,2.9V40.1A2.471,2.471,0,0,1,49.968,42.5Z" transform="translate(58 2527.427)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+    <path id="Tracé_38" data-name="Tracé 38" d="M24.789,28.921H45.831V22.213" transform="translate(58 2526.927)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+    <path id="Tracé_39" data-name="Tracé 39" d="M30.5,22.977l-6.069,6.069,6.069,6.07" transform="translate(58 2526.927)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+  </g>
+</svg>
diff --git a/images/accessibility/bookmarks.svg b/images/accessibility/bookmarks.svg
new file mode 100644
index 00000000..9c174d92
--- /dev/null
+++ b/images/accessibility/bookmarks.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="bookmarks">
+    <rect id="Rectangle_66" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_67" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,15.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+        <path class="st0" d="M28.5,26.2c.3,0,.5,0,.7,0,.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2-.3,0-.6,0-.8,0-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5Z"/>
+        <path class="st0" d="M36.1,17.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5Z"/>
+        <path class="st0" d="M40.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="B" class="st1">
+      <g class="st1">
+        <path class="st0" d="M89.2,14.4h3.6c1.7,0,2.9.3,3.7.8s1.1,1.3,1.1,2.4-.2,1.4-.6,1.9c-.4.5-1,.8-1.9,1h0c2,.4,2.9,1.4,2.9,3.2s-.4,2-1.2,2.7-1.9,1-3.3,1h-4.5v-12.8ZM90.7,19.9h2.5c1.1,0,1.8-.2,2.3-.5s.7-.9.7-1.7-.3-1.2-.8-1.6-1.3-.5-2.5-.5h-2.2v4.2ZM90.7,21.2v4.8h2.7c1,0,1.8-.2,2.3-.6.5-.4.8-1,.8-1.9s-.3-1.4-.8-1.8-1.4-.6-2.4-.6h-2.6Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/burger-menu.svg b/images/accessibility/burger-menu.svg
new file mode 100644
index 00000000..1cde0a2a
--- /dev/null
+++ b/images/accessibility/burger-menu.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 41.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="burger-menu">
+    <path id="Rectangle_71" class="st2" d="M3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    <g id="F10" class="st1">
+      <g class="st1">
+        <path class="st0" d="M9.6,27.3h-1.5v-12.8h7.2v1.3h-5.7v4.7h5.3v1.3h-5.3v5.5Z"/>
+        <path class="st0" d="M21.9,27.3h-1.4v-9.2c0-.8,0-1.5,0-2.2-.1.1-.3.3-.4.4s-.8.7-2.1,1.7l-.8-1,3.4-2.6h1.2v12.8Z"/>
+        <path class="st0" d="M35.3,20.8c0,2.2-.4,3.9-1.1,5s-1.8,1.6-3.2,1.6-2.4-.6-3.2-1.7c-.7-1.1-1.1-2.8-1.1-4.9s.3-3.9,1-5,1.8-1.6,3.2-1.6,2.5.6,3.2,1.7,1.1,2.8,1.1,4.9ZM28.3,20.8c0,1.9.2,3.2.7,4.1.4.9,1.1,1.3,2.1,1.3s1.7-.4,2.1-1.3.7-2.2.7-4.1-.2-3.2-.7-4.1-1.1-1.3-2.1-1.3-1.7.4-2.1,1.3-.7,2.2-.7,4.1Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/close-opened-item.svg b/images/accessibility/close-opened-item.svg
new file mode 100644
index 00000000..3bb85bca
--- /dev/null
+++ b/images/accessibility/close-opened-item.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 53.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        fill: none;
+        stroke: #000;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+
+      .st2 {
+        isolation: isolate;
+      }
+    </style>
+  </defs>
+  <g id="close-opened-item">
+    <g id="Groupe_34">
+      <path id="Rectangle_21" class="st1" d="M3.2.7h47c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    </g>
+    <g id="ESC" class="st2">
+      <g class="st2">
+        <path class="st0" d="M20.1,26.8h-7.2v-12.8h7.2v1.3h-5.7v4.1h5.3v1.3h-5.3v4.7h5.7v1.3Z"/>
+        <path class="st0" d="M30.2,23.3c0,1.1-.4,2-1.2,2.6s-1.9.9-3.3.9-2.7-.2-3.5-.6v-1.4c.5.2,1.1.4,1.7.5s1.2.2,1.8.2c1,0,1.7-.2,2.2-.6.5-.4.8-.9.8-1.6s0-.8-.3-1.1c-.2-.3-.5-.5-.9-.8s-1.1-.5-1.9-.8c-1.2-.4-2-.9-2.6-1.5s-.8-1.4-.8-2.3.4-1.8,1.1-2.4,1.7-.9,3-.9,2.5.2,3.5.7l-.5,1.3c-1.1-.4-2.1-.7-3.1-.7s-1.4.2-1.9.5-.7.8-.7,1.4,0,.8.2,1.1c.2.3.4.5.8.8.4.2,1,.5,1.8.8,1.3.5,2.3,1,2.8,1.5s.8,1.3.8,2.1Z"/>
+        <path class="st0" d="M38.3,15.1c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/content.svg b/images/accessibility/content.svg
new file mode 100644
index 00000000..d0f0f4c0
--- /dev/null
+++ b/images/accessibility/content.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 41.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="content">
+    <path id="Rectangle_61" class="st2" d="M3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    <g id="F2" class="st1">
+      <g class="st1">
+        <path class="st0" d="M14.7,27.3h-1.5v-12.8h7.2v1.3h-5.7v4.7h5.3v1.3h-5.3v5.5Z"/>
+        <path class="st0" d="M30.1,27.3h-8.4v-1.3l3.4-3.4c1-1,1.7-1.8,2-2.2s.6-.9.7-1.3.2-.9.2-1.4-.2-1.2-.6-1.6-1-.6-1.7-.6-1,0-1.5.3c-.5.2-1,.5-1.6,1l-.8-1c1.2-1,2.5-1.5,3.9-1.5s2.2.3,2.8.9c.7.6,1,1.4,1,2.5s-.2,1.6-.7,2.4-1.3,1.8-2.6,3l-2.8,2.8h0c0,0,6.6,0,6.6,0v1.4Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/first-page.svg b/images/accessibility/first-page.svg
new file mode 100644
index 00000000..65f5d84f
--- /dev/null
+++ b/images/accessibility/first-page.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="41.5" height="39.5" viewBox="0 0 41.5 39.5">
+  <g id="first-page" transform="translate(-58.25 -2410.677)">
+    <path id="Rectangle_52" data-name="Rectangle 52" d="M2.5,0h35A2.5,2.5,0,0,1,40,2.5v33A2.5,2.5,0,0,1,37.5,38H2.5A2.5,2.5,0,0,1,0,35.5V2.5A2.5,2.5,0,0,1,2.5,0Z" transform="translate(99 2449.427) rotate(180)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+    <g id="Groupe_32" data-name="Groupe 32" transform="translate(2381.476 2268.919) rotate(90)">
+      <g id="Groupe_13" data-name="Groupe 13" transform="translate(1851.081 3762.348) rotate(135)">
+        <line id="Ligne_8" data-name="Ligne 8" y2="21.042" transform="translate(161.991 2216.344)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+        <path id="Tracé_19" data-name="Tracé 19" d="M82.436,24.288l-6.069,6.069L70.3,24.288" transform="translate(85.5 2207.389)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+        <line id="Ligne_9" data-name="Ligne 9" x2="8.999" transform="translate(157.477 2226.555)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+        <line id="Ligne_10" data-name="Ligne 10" x2="8.999" transform="translate(157.477 2222.833)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/images/accessibility/help.svg b/images/accessibility/help.svg
new file mode 100644
index 00000000..214f0602
--- /dev/null
+++ b/images/accessibility/help.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 41.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="help">
+    <path id="Rectangle_60" class="st2" d="M3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    <g id="F1" class="st1">
+      <g class="st1">
+        <path class="st0" d="M14.7,26.3h-1.5v-12.8h7.2v1.3h-5.7v4.7h5.3v1.3h-5.3v5.5Z"/>
+        <path class="st0" d="M27,26.3h-1.4v-9.2c0-.8,0-1.5,0-2.2-.1.1-.3.3-.4.4s-.8.7-2.1,1.7l-.8-1,3.4-2.6h1.2v12.8Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/icon-downloadable.svg b/images/accessibility/icon-downloadable.svg
new file mode 100644
index 00000000..6f43da66
--- /dev/null
+++ b/images/accessibility/icon-downloadable.svg
@@ -0,0 +1,13 @@
+<svg id="icon-downloadable" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_3" data-name="Rectangle 3" width="100" height="100" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_6" data-name="Groupe 6" clip-path="url(#clip-path)">
+    <circle id="Ellipse_2" data-name="Ellipse 2" cx="47.659" cy="47.659" r="47.659" transform="translate(2.341 2.341)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="5"/>
+    <path id="Tracé_40" data-name="Tracé 40" d="M0,0V30.547" transform="translate(50 26.969)" fill="none" stroke="#1d1d1b" stroke-width="5"/>
+    <path id="Tracé_6" data-name="Tracé 6" d="M33.919,44.038,52.153,62.272,70.387,44.038" transform="translate(-2.153 -2.795)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="5"/>
+    <line id="Ligne_3" data-name="Ligne 3" x2="34.662" transform="translate(32.669 65.267)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="5"/>
+  </g>
+</svg>
diff --git a/images/accessibility/icon-help.svg b/images/accessibility/icon-help.svg
new file mode 100644
index 00000000..8b2940a0
--- /dev/null
+++ b/images/accessibility/icon-help.svg
@@ -0,0 +1,13 @@
+<svg id="icon-help" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="92.742" viewBox="0 0 100 92.742">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_4" data-name="Rectangle 4" width="100" height="92.742" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_8" data-name="Groupe 8" clip-path="url(#clip-path)">
+    <circle id="Ellipse_3" data-name="Ellipse 3" cx="44.2" cy="44.2" r="44.2" transform="translate(9.429 2.171)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="5"/>
+    <path id="Tracé_7" data-name="Tracé 7" d="M60.32,73.017a3.74,3.74,0,1,0-2.681-1.1,3.646,3.646,0,0,0,2.681,1.1" transform="translate(-7.433 -8.605)" fill="#1f1f1f"/>
+    <path id="Tracé_8" data-name="Tracé 8" d="M56.618,57.043h5.589a18.022,18.022,0,0,1,.113-2.19,5.967,5.967,0,0,1,.492-1.737,7.428,7.428,0,0,1,.944-1.548,21.451,21.451,0,0,1,1.623-1.775,26.537,26.537,0,0,0,3.739-4.418,7.54,7.54,0,0,0,1.094-4.041,8.284,8.284,0,0,0-2.719-6.458,10.523,10.523,0,0,0-7.326-2.455,11.985,11.985,0,0,0-7.062,2.039,10.529,10.529,0,0,0-4.041,5.664l4.985,1.964A5.955,5.955,0,0,1,56.165,38.8a5.816,5.816,0,0,1,3.7-1.246,5.242,5.242,0,0,1,3.4,1.1,3.545,3.545,0,0,1,1.36,2.908,5.452,5.452,0,0,1-.831,2.719A13.633,13.633,0,0,1,61,47.45a13.45,13.45,0,0,0-2.078,2.078A11.257,11.257,0,0,0,57.6,51.68a9.75,9.75,0,0,0-.755,2.379,16.938,16.938,0,0,0-.227,2.983" transform="translate(-6.449 -4.262)" fill="#1f1f1f"/>
+    <line id="Ligne_4" data-name="Ligne 4" x1="17.807" y2="14.752" transform="translate(1.385 72.481)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="5"/>
+  </g>
+</svg>
diff --git a/images/accessibility/icon-listen.svg b/images/accessibility/icon-listen.svg
new file mode 100644
index 00000000..703cbf3f
--- /dev/null
+++ b/images/accessibility/icon-listen.svg
@@ -0,0 +1,13 @@
+<svg id="icon-listen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_2" data-name="Rectangle 2" width="100" height="100" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_4" data-name="Groupe 4" clip-path="url(#clip-path)">
+    <path id="Tracé_2" data-name="Tracé 2" d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0m0,95.262A45.277,45.277,0,0,1,16.667,80.556l1.307-1.634a2.257,2.257,0,0,1,1.8-.981l17.157-.653a3.826,3.826,0,0,0,3.595-3.268l1.634-10.294a2.2,2.2,0,0,0-1.308-2.451A27.38,27.38,0,0,1,34.8,58.987a25.075,25.075,0,0,1-4.738-4.576c-1.143-1.307-1.47-2.777-.163-3.268l13.235-4.738a1.314,1.314,0,0,0,.49-1.8l-1.144-4.575a1.319,1.319,0,0,1,.49-1.47l6.863-4.085a3.161,3.161,0,0,0,.981-4.411L36.111,7.026A49.279,49.279,0,0,1,50,4.9a45.18,45.18,0,0,1,0,90.36" fill="#1d1d1b"/>
+    <path id="Tracé_3" data-name="Tracé 3" d="M60.548,45.592a1.634,1.634,0,1,0-1.961,2.614,10.134,10.134,0,0,1,0,16.014,1.759,1.759,0,0,0-.327,2.288,1.488,1.488,0,0,0,1.308.653,2.324,2.324,0,0,0,.98-.327,13.234,13.234,0,0,0,5.065-10.457,14.419,14.419,0,0,0-5.065-10.785" transform="translate(-1.887 -1.475)" fill="#1d1d1b"/>
+    <path id="Tracé_4" data-name="Tracé 4" d="M66.119,40.015a1.622,1.622,0,0,0-2.124,2.451,17.56,17.56,0,0,1,0,26.8,1.589,1.589,0,0,0-.163,2.287,1.856,1.856,0,0,0,1.308.49,3.032,3.032,0,0,0,1.143-.327,21.384,21.384,0,0,0,7.353-15.849,22.159,22.159,0,0,0-7.517-15.85" transform="translate(-2.066 -1.29)" fill="#1d1d1b"/>
+    <path id="Tracé_5" data-name="Tracé 5" d="M70.081,34.1a1.588,1.588,0,0,0,.163,2.288A26.008,26.008,0,0,1,78.9,55.829a26.271,26.271,0,0,1-8.66,19.444,1.564,1.564,0,1,0,2.124,2.288,29.352,29.352,0,0,0,0-43.791,1.757,1.757,0,0,0-2.288.327" transform="translate(-2.27 -1.091)" fill="#1d1d1b"/>
+  </g>
+</svg>
diff --git a/images/accessibility/icon-optimized-navigation.svg b/images/accessibility/icon-optimized-navigation.svg
new file mode 100644
index 00000000..7b40e235
--- /dev/null
+++ b/images/accessibility/icon-optimized-navigation.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="icon-optimized-navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0, .st1 {
+        fill: none;
+      }
+
+      .st2 {
+        fill: #1d1d1b;
+      }
+
+      .st3 {
+        isolation: isolate;
+      }
+
+      .st4 {
+        fill: #fff;
+      }
+
+      .st5 {
+        clip-path: url(#clippath);
+      }
+
+      .st1 {
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 5px;
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="st0" y="0" width="100" height="100"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_2">
+    <g class="st5">
+      <g id="Groupe_1">
+        <circle id="Ellipse_1" class="st1" cx="50" cy="50" r="47.7"/>
+        <path id="Tracé_1" class="st2" d="M70.6,73.4H29.4c-1.7,0-3.1-1.4-3.1-3.1V31.1c0-1.7,1.4-3.1,3.1-3.1h41.3c1.7,0,3.1,1.4,3.1,3.1v39.2c0,1.7-1.4,3.1-3.1,3.1"/>
+      </g>
+    </g>
+  </g>
+  <g id="F1" class="st3">
+    <g class="st3">
+      <path class="st4" d="M42.5,57.6h-3.1v-15h8.6v2.6h-5.5v3.9h5.1v2.6h-5.1v5.9Z"/>
+      <path class="st4" d="M57.7,57.6h-3.2v-10.1s0-1.6,0-1.6c-.5.5-.9.9-1.1,1l-1.7,1.4-1.5-1.9,4.8-3.8h2.6v15Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/last-page.svg b/images/accessibility/last-page.svg
new file mode 100644
index 00000000..4b89ed79
--- /dev/null
+++ b/images/accessibility/last-page.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="41.5" height="39.5" viewBox="0 0 41.5 39.5">
+  <g id="last-page" transform="translate(-58.25 -2352.677)">
+    <path id="Rectangle_51" data-name="Rectangle 51" d="M2.5,0h35A2.5,2.5,0,0,1,40,2.5v33A2.5,2.5,0,0,1,37.5,38H2.5A2.5,2.5,0,0,1,0,35.5V2.5A2.5,2.5,0,0,1,2.5,0Z" transform="translate(99 2391.427) rotate(180)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+    <g id="Groupe_31" data-name="Groupe 31" transform="translate(241.297 4674.83) rotate(180)">
+      <g id="Groupe_13" data-name="Groupe 13" transform="translate(1851.081 3762.348) rotate(135)">
+        <line id="Ligne_8" data-name="Ligne 8" y2="21.042" transform="translate(161.991 2216.344)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+        <path id="Tracé_19" data-name="Tracé 19" d="M82.436,24.288l-6.069,6.069L70.3,24.288" transform="translate(85.5 2207.389)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+        <line id="Ligne_9" data-name="Ligne 9" x2="8.999" transform="translate(157.477 2226.555)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+        <line id="Ligne_10" data-name="Ligne 10" x2="8.999" transform="translate(157.477 2222.833)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/images/accessibility/next-page-result.svg b/images/accessibility/next-page-result.svg
new file mode 100644
index 00000000..be0cc2d1
--- /dev/null
+++ b/images/accessibility/next-page-result.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 41.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="next-page-result">
+    <path id="Rectangle_59" class="st2" d="M3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    <g id="F3" class="st1">
+      <g class="st1">
+        <path class="st0" d="M14.7,27.3h-1.5v-12.8h7.2v1.3h-5.7v4.7h5.3v1.3h-5.3v5.5Z"/>
+        <path class="st0" d="M29.6,17.4c0,.8-.2,1.5-.7,2-.5.5-1.1.9-2,1h0c1,.2,1.8.5,2.3,1.1s.7,1.2.7,2.1c0,1.2-.4,2.2-1.3,2.8-.8.7-2.1,1-3.6,1s-1.3,0-1.9-.2c-.6-.1-1.1-.3-1.6-.5v-1.4c.6.3,1.1.5,1.8.6.6.1,1.2.2,1.8.2,2.2,0,3.3-.9,3.3-2.6s-1.2-2.3-3.7-2.3h-1.3v-1.3h1.3c1,0,1.8-.2,2.4-.7s.9-1.1.9-1.8-.2-1.1-.6-1.5c-.4-.4-1-.5-1.8-.5s-1.1,0-1.6.2-1.1.4-1.7.8l-.7-1c.5-.4,1.1-.7,1.8-1,.7-.2,1.4-.4,2.2-.4,1.2,0,2.2.3,2.9.9.7.6,1,1.4,1,2.4Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/next-page.svg b/images/accessibility/next-page.svg
new file mode 100644
index 00000000..9967f55a
--- /dev/null
+++ b/images/accessibility/next-page.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 101 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="next-page">
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M53.9,14.4l-4.8,12.8h-1.5l4.8-12.8h1.5Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_47" class="st2" d="M38.2,38.7H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5Z"/>
+    <g id="Groupe_28">
+      <line id="Ligne_6" class="st2" x1="8.8" y1="19.2" x2="29.9" y2="19.2"/>
+      <path id="Tracé_14" class="st2" d="M24.2,13.2l6.1,6.1-6.1,6.1"/>
+    </g>
+    <path id="Rectangle_48" class="st2" d="M62.8.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Groupe_27">
+      <g id="Groupe_13">
+        <line id="Ligne_8" class="st2" x1="79.9" y1="9.2" x2="79.9" y2="30.3"/>
+        <path id="Tracé_19" class="st2" d="M85.9,24.6l-6.1,6.1-6.1-6.1"/>
+        <line id="Ligne_9" class="st2" x1="75.4" y1="19.5" x2="84.4" y2="19.5"/>
+        <line id="Ligne_10" class="st2" x1="75.4" y1="15.7" x2="84.4" y2="15.7"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/notes.svg b/images/accessibility/notes.svg
new file mode 100644
index 00000000..15c1ed21
--- /dev/null
+++ b/images/accessibility/notes.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 173.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="notes">
+    <rect id="Rectangle_68" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <g class="st1">
+          <path class="st0" d="M63.3,20.2h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+        </g>
+      </g>
+    </g>
+    <g id="_2" class="st1">
+      <g class="st1">
+        <g class="st1">
+          <path class="st0" d="M123.3,20.2h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+        </g>
+      </g>
+    </g>
+    <path id="Rectangle_69" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <path id="Rectangle_70" class="st2" d="M135.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,15.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7h-.1Z"/>
+        <path class="st0" d="M28.5,26.2h.7c.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2h-.8c-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5h0Z"/>
+        <path class="st0" d="M36.1,17.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5h0Z"/>
+        <path class="st0" d="M40.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="Alt" class="st1">
+      <g class="st1">
+        <path class="st0" d="M91.9,27.3l-1.6-4.1h-5.1l-1.6,4.1h-1.5l5.1-12.9h1.3l5.1,12.9h-1.7ZM89.9,21.8l-1.5-4c-.2-.5-.4-1.1-.6-1.9,0,.6-.3,1.2-.6,1.9l-1.5,4h4.2Z"/>
+        <path class="st0" d="M96.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+        <path class="st0" d="M102.7,26.2h.7c.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2h-.8c-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6,0,1,.4,1.3s.7.5,1.1.5h.1Z"/>
+      </g>
+    </g>
+    <g id="N" class="st1">
+      <g class="st1">
+        <path class="st0" d="M158.3,27.3h-1.7l-7-10.8h0c0,1.3.1,2.4.1,3.5v7.3h-1.4v-12.8h1.7l7,10.7h0v-10.7h1.4v12.8h-.1Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/overview.svg b/images/accessibility/overview.svg
new file mode 100644
index 00000000..aeaa8a53
--- /dev/null
+++ b/images/accessibility/overview.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="overview">
+    <rect id="Rectangle_62" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_63" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,15.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+        <path class="st0" d="M28.5,26.2c.3,0,.5,0,.7,0,.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2-.3,0-.6,0-.8,0-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5Z"/>
+        <path class="st0" d="M36.1,17.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5Z"/>
+        <path class="st0" d="M40.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="O" class="st1">
+      <g class="st1">
+        <path class="st0" d="M99.2,20.8c0,2.1-.5,3.7-1.6,4.9s-2.5,1.8-4.3,1.8-3.4-.6-4.4-1.7c-1-1.2-1.5-2.8-1.5-4.9s.5-3.7,1.5-4.9c1-1.2,2.5-1.7,4.4-1.7s3.3.6,4.3,1.8,1.6,2.8,1.6,4.9ZM88.9,20.8c0,1.7.4,3.1,1.1,4s1.8,1.3,3.2,1.3,2.5-.4,3.2-1.3,1.1-2.2,1.1-4-.4-3-1.1-3.9-1.8-1.3-3.2-1.3-2.5.5-3.2,1.3c-.7.9-1.1,2.2-1.1,3.9Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/play-left-page-audio.svg b/images/accessibility/play-left-page-audio.svg
new file mode 100644
index 00000000..60f01440
--- /dev/null
+++ b/images/accessibility/play-left-page-audio.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="play-left-page-audio">
+    <rect id="Rectangle_43" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Tracé_31" class="st2" d="M22.9,29.8h7.4v-9.2h5.1l-8.8-10.8-8.8,10.8h5.1v9.2Z"/>
+    <path id="Rectangle_44" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Groupe_25">
+      <line id="Ligne_6" class="st2" x1="104.7" y1="19.4" x2="83.6" y2="19.4"/>
+      <path id="Tracé_14" class="st2" d="M89.3,25.4l-6.1-6.1,6.1-6.1"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/play-right-page-audio.svg b/images/accessibility/play-right-page-audio.svg
new file mode 100644
index 00000000..3b60da8c
--- /dev/null
+++ b/images/accessibility/play-right-page-audio.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="play-right-page-audio">
+    <rect id="Rectangle_45" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Tracé_32" class="st2" d="M22.9,29.8h7.4v-9.2h5.1l-8.8-10.8-8.8,10.8h5.1v9.2Z"/>
+    <path id="Rectangle_46" class="st2" d="M110.2,38.7h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5Z"/>
+    <g id="Groupe_26">
+      <line id="Ligne_6" class="st2" x1="80.8" y1="19.2" x2="101.9" y2="19.2"/>
+      <path id="Tracé_14" class="st2" d="M96.2,13.2l6.1,6.1-6.1,6.1"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/previous-page.svg b/images/accessibility/previous-page.svg
new file mode 100644
index 00000000..053a1803
--- /dev/null
+++ b/images/accessibility/previous-page.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 101 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="previous-page">
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M53.9,14.4l-4.8,12.8h-1.5l4.8-12.8h1.5Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_49" class="st2" d="M3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    <g id="Groupe_30">
+      <line id="Ligne_6" class="st2" x1="32.7" y1="19.4" x2="11.6" y2="19.4"/>
+      <path id="Tracé_14" class="st2" d="M17.3,25.4l-6.1-6.1,6.1-6.1"/>
+    </g>
+    <path id="Rectangle_50" class="st2" d="M97.8,38.7h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5Z"/>
+    <g id="Groupe_29">
+      <g id="Groupe_13">
+        <line id="Ligne_8" class="st2" x1="80.6" y1="30.7" x2="80.6" y2="9.6"/>
+        <path id="Tracé_19" class="st2" d="M74.6,15.3l6.1-6.1,6.1,6.1"/>
+        <line id="Ligne_9" class="st2" x1="85.1" y1="20.4" x2="76.1" y2="20.4"/>
+        <line id="Ligne_10" class="st2" x1="85.1" y1="24.2" x2="76.1" y2="24.2"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/print.svg b/images/accessibility/print.svg
new file mode 100644
index 00000000..bb8d7484
--- /dev/null
+++ b/images/accessibility/print.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="print">
+    <rect id="Rectangle_64" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_65" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,15.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+        <path class="st0" d="M28.5,26.2c.3,0,.5,0,.7,0,.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2-.3,0-.6,0-.8,0-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5Z"/>
+        <path class="st0" d="M36.1,17.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5Z"/>
+        <path class="st0" d="M40.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="P" class="st1">
+      <g class="st1">
+        <path class="st0" d="M97.7,18.1c0,1.3-.4,2.3-1.3,3s-2.2,1-3.8,1h-1.5v5.1h-1.5v-12.8h3.3c3.2,0,4.8,1.2,4.8,3.7ZM91.1,20.9h1.3c1.3,0,2.3-.2,2.9-.6s.9-1.1.9-2.1-.3-1.5-.8-1.9-1.4-.6-2.6-.6h-1.7v5.2Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/search.svg b/images/accessibility/search.svg
new file mode 100644
index 00000000..1a2e24b8
--- /dev/null
+++ b/images/accessibility/search.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="search">
+    <rect id="Rectangle_57" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_58" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,15.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+        <path class="st0" d="M28.5,26.2c.3,0,.5,0,.7,0,.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2-.3,0-.6,0-.8,0-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5Z"/>
+        <path class="st0" d="M36.1,17.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5Z"/>
+        <path class="st0" d="M40.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="F" class="st1">
+      <g class="st1">
+        <path class="st0" d="M91.9,27.3h-1.5v-12.8h7.2v1.3h-5.7v4.7h5.3v1.3h-5.3v5.5Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/select-next-previous-interactive-item.svg b/images/accessibility/select-next-previous-interactive-item.svg
new file mode 100644
index 00000000..9695a0d0
--- /dev/null
+++ b/images/accessibility/select-next-previous-interactive-item.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="53.5" height="39.5" viewBox="0 0 53.5 39.5">
+  <g id="select-next-previous-interactive-item" transform="translate(-57.75 -2468.677)">
+    <g id="Groupe_33" data-name="Groupe 33" transform="translate(-5 50.927)">
+      <path id="Rectangle_21" data-name="Rectangle 21" d="M2.5,0h47A2.5,2.5,0,0,1,52,2.5v33A2.5,2.5,0,0,1,49.5,38H2.5A2.5,2.5,0,0,1,0,35.5V2.5A2.5,2.5,0,0,1,2.5,0Z" transform="translate(63.5 2418.5)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+      <g id="Groupe_22" data-name="Groupe 22" transform="translate(0.664 2.158)">
+        <line id="Ligne_11" data-name="Ligne 11" x2="21.042" transform="translate(85.336 2430.44)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+        <path id="Tracé_21" data-name="Tracé 21" d="M37.482,6.977l6.069,6.069-6.069,6.07" transform="translate(63.187 2417.519)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+        <line id="Ligne_12" data-name="Ligne 12" y2="13.333" transform="translate(107.352 2423.842)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+      </g>
+      <g id="Groupe_21" data-name="Groupe 21" transform="translate(-0.336 1.491)">
+        <line id="Ligne_13" data-name="Ligne 13" x1="21.042" transform="translate(72.31 2442.106)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+        <path id="Tracé_22" data-name="Tracé 22" d="M14.831,18.643,8.762,24.712l6.069,6.07" transform="translate(63.187 2417.519)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+        <line id="Ligne_14" data-name="Ligne 14" y2="13.333" transform="translate(71.336 2435.509)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/images/accessibility/switch-sound.svg b/images/accessibility/switch-sound.svg
new file mode 100644
index 00000000..c9876a34
--- /dev/null
+++ b/images/accessibility/switch-sound.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="switch-sound">
+    <rect id="Rectangle_72" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,20.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_73" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,15.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+        <path class="st0" d="M28.5,26.2c.3,0,.5,0,.7,0,.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2-.3,0-.6,0-.8,0-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5Z"/>
+        <path class="st0" d="M36.1,17.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5Z"/>
+        <path class="st0" d="M40.5,27.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="M" class="st1">
+      <g class="st1">
+        <path class="st0" d="M92.6,27.3l-4.4-11.4h0c0,.9.1,2,.1,3.2v8.2h-1.4v-12.8h2.2l4.1,10.6h0l4.1-10.6h2.2v12.8h-1.5v-8.3c0-.9,0-2,.1-3.1h0l-4.4,11.4h-1.2Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/swith-normal-fullscreen.svg b/images/accessibility/swith-normal-fullscreen.svg
new file mode 100644
index 00000000..d63a995a
--- /dev/null
+++ b/images/accessibility/swith-normal-fullscreen.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 41.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="swith-normal-fullscreen">
+    <path id="Rectangle_78" class="st2" d="M3.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5H3.2c-1.4,0-2.5-1.1-2.5-2.5V3.2C.8,1.9,1.9.7,3.2.7Z"/>
+    <g id="F11" class="st1">
+      <g class="st1">
+        <path class="st0" d="M9.6,26.3h-1.5v-12.8h7.2v1.3h-5.7v4.7h5.3v1.3h-5.3v5.5Z"/>
+        <path class="st0" d="M21.9,26.3h-1.4v-9.2c0-.8,0-1.5,0-2.2-.1.1-.3.3-.4.4s-.8.7-2.1,1.7l-.8-1,3.4-2.6h1.2v12.8Z"/>
+        <path class="st0" d="M32.2,26.3h-1.4v-9.2c0-.8,0-1.5,0-2.2-.1.1-.3.3-.4.4s-.8.7-2.1,1.7l-.8-1,3.4-2.6h1.2v12.8Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/zoom-in.svg b/images/accessibility/zoom-in.svg
new file mode 100644
index 00000000..9397757f
--- /dev/null
+++ b/images/accessibility/zoom-in.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 113.5 39.5">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1d1d1b;
+      }
+
+      .st1 {
+        isolation: isolate;
+      }
+
+      .st2 {
+        fill: none;
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <g id="zoom-in">
+    <rect id="Rectangle_74" class="st2" x=".8" y=".7" width="52" height="38" rx="2.8" ry="2.8"/>
+    <g id="_" class="st1">
+      <g class="st1">
+        <path class="st0" d="M63.3,19.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+    <path id="Rectangle_75" class="st2" d="M75.2.7h35c1.4,0,2.5,1.1,2.5,2.5v33c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5V3.2c0-1.4,1.1-2.5,2.5-2.5Z"/>
+    <g id="Ctrl" class="st1">
+      <g class="st1">
+        <path class="st0" d="M19.7,14.6c-1.4,0-2.5.5-3.3,1.4-.8.9-1.2,2.2-1.2,3.9s.4,3,1.2,3.9c.8.9,1.9,1.4,3.4,1.4s1.9-.2,3.1-.5v1.3c-.9.3-2,.5-3.3.5-1.9,0-3.4-.6-4.4-1.7s-1.5-2.8-1.5-4.9.2-2.5.7-3.5,1.2-1.8,2.1-2.3,2-.8,3.3-.8,2.5.2,3.5.7l-.6,1.3c-1-.5-1.9-.7-2.9-.7Z"/>
+        <path class="st0" d="M28.5,25.2c.3,0,.5,0,.7,0,.2,0,.4,0,.6-.1v1.1c-.2,0-.4.1-.7.2-.3,0-.6,0-.8,0-1.9,0-2.8-1-2.8-2.9v-5.7h-1.4v-.7l1.4-.6.6-2.1h.8v2.2h2.8v1.1h-2.8v5.7c0,.6.1,1,.4,1.3s.7.5,1.1.5Z"/>
+        <path class="st0" d="M36.1,16.4c.4,0,.8,0,1.2.1l-.2,1.4c-.4,0-.8-.1-1.1-.1-.8,0-1.4.3-2,.9s-.8,1.4-.8,2.4v5.2h-1.5v-9.6h1.2l.2,1.8h0c.4-.6.8-1.1,1.3-1.5s1.1-.5,1.7-.5Z"/>
+        <path class="st0" d="M40.5,26.3h-1.5v-13.7h1.5v13.7Z"/>
+      </g>
+    </g>
+    <g id="_2" class="st1">
+      <g class="st1">
+        <path class="st0" d="M93.8,19.3h3.6v1.2h-3.6v3.7h-1.2v-3.7h-3.6v-1.2h3.6v-3.8h1.2v3.8Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/accessibility/zoom-out.svg b/images/accessibility/zoom-out.svg
new file mode 100644
index 00000000..2f514d01
--- /dev/null
+++ b/images/accessibility/zoom-out.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="113.5" height="39.5" viewBox="0 0 113.5 39.5">
+  <g id="zoom-out" transform="translate(-55.75 -2789.677)">
+    <rect id="Rectangle_76" data-name="Rectangle 76" width="52" height="38" rx="2.754" transform="translate(56.5 2790.427)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+    <text id="_" data-name="+" transform="translate(118.5 2816.927)" fill="#1d1d1b" font-size="18" font-family="OpenSans, Open Sans"><tspan x="-5.146" y="0">+</tspan></text>
+    <path id="Rectangle_77" data-name="Rectangle 77" d="M2.5,0h35A2.5,2.5,0,0,1,40,2.5v33A2.5,2.5,0,0,1,37.5,38H2.5A2.5,2.5,0,0,1,0,35.5V2.5A2.5,2.5,0,0,1,2.5,0Z" transform="translate(128.5 2790.427)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" stroke-width="1.5"/>
+    <text id="Ctrl" transform="translate(83 2816.927)" fill="#1d1d1b" font-size="18" font-family="OpenSans, Open Sans"><tspan x="-14.805" y="0">Ctrl</tspan></text>
+    <text id="_-" data-name="-" transform="translate(149 2816.927)" fill="#1d1d1b" font-size="18" font-family="OpenSans, Open Sans"><tspan x="-2.896" y="0">-</tspan></text>
+  </g>
+</svg>
diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index 78f0c3a4..d604a84b 100644
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -47,49 +47,192 @@ FluidbookAccessibility.prototype = {
     },
 
     openMenu: function (callback) {
-        var t = '<div class="content">';
-        t += '<header>';
-        t += '<h1>' + this.fluidbook.l10n.__('A user experience optimized for accessibility') + '</h1>';
-        t += '<p>' + this.fluidbook.l10n.__('This interactive Fluidbook has been thoughtfully designed to support accessibility and inclusivity. We are actively working towards compliance with the WCAG 2.2 accessibility standards, aiming to meet both Level A and AA criteria.') + '</p>';
-        t += '<p>' + this.fluidbook.l10n.__('The Fluidbook is compatible with assistive technologies such as screen readers (e.g., JAWS, NVDA), and can be navigated using either a mouse or keyboard. Users can easily adjust text and content size by clicking directly on the page or using shortcuts like :zoominshortcut and :zoomoutshortcut. Wherever possible, content is provided in multiple formats - text, video, image, transcript, and audio - to suit different needs.', false, {
-            'zoominshortcut': '<strong>[Ctrl][+]</strong>',
-            'zoomoutshortcut': '[Ctrl][-]'
-        }) + '</p>';
-        t += '</header>';
-        t += '<section>'
-
-
         let sections = [
             {
-                icon: 'keyboard',
+                icon: 'icon-optimized-navigation',
                 title: this.fluidbook.l10n.__('Optimized navigation using both mouse and keyboard'),
                 text: this.fluidbook.l10n.__('Functionalities within the Fluidbook can be accessed using both the mouse and standard keyboard shortcuts. All interactive elements (buttons, links, etc.) are accessible using the <strong>Tab key</strong> to jump from one element to the next (use <strong>Shift+Tab</strong> to jump backward). Press <strong>Enter</strong> to activate the selected element.'),
             },
             {
-                icon: 'audiodescription',
+                icon: 'icon-listen',
                 title: this.fluidbook.l10n.__('Listen to the page'),
                 text: this.fluidbook.l10n.__('Click the <strong>audio icon</strong> to hear an audio version of your Fluidbook. Where an audio version isn’t yet available, you can download a transcript of the content. Alternatively, you can use the Text-to-Speech feature from your screen reader software.'),
                 if: this.fluidbook.settings.audiodescription,
             },
             {
-                icon: 'resources',
+                icon: 'icon-downloadable',
                 title: this.fluidbook.l10n.__('Downloadable resources'),
                 text: this.fluidbook.l10n.__('When infographic resources are downloaded, they have been optimized for screen reader compatibility to support accessible offline use.'),
             }, {
-                icon: 'help',
+                icon: 'icon-help',
                 title: this.fluidbook.l10n.__('We’re here to help'),
                 text: this.fluidbook.l10n.__('If this Fluidbook doesn’t meet your accessibility requirements, please let us know. We’re committed to working with you to ensure you can access the content in a way that works for you.'),
             },
         ];
+        let sections_shortcuts = [
+            {title: 'Navigation'},
+            {title: 'Display / Sound'},
+            {title: 'Pannels'},
+            {title: 'Search'},
+        ]
+        let articles_shortcuts = [
+            {
+                icon: 'play-left-page-audio',
+                title: this.fluidbook.l10n.__('Shift and arrow left to <strong>play the left page audiodescription</strong>'),
+                section: 'Navigation',
+                if: this.fluidbook.settings.audiodescription,
+            },
+            {
+                icon: 'play-right-page-audio',
+                title: this.fluidbook.l10n.__('Shift and arrow right to <strong>play the right page audiodescription</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'next-page',
+                title: this.fluidbook.l10n.__('Arrow right or page down for <strong>next page</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'previous-page',
+                title: this.fluidbook.l10n.__('Arrow left or page up for <strong>previous page</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'last-page',
+                title: this.fluidbook.l10n.__('End for the <strong>last page</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'first-page',
+                title: this.fluidbook.l10n.__('Home for the <strong>first page</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'select-next-previous-interactive-item',
+                title: this.fluidbook.l10n.__('Tab or Shift+Tab to <strong>select next or previous interactive item</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'action-selected-item',
+                title: this.fluidbook.l10n.__('Enter to <strong>action the selected item</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'close-opened-item',
+                title: this.fluidbook.l10n.__('Escape to <strong>close an opened item</strong>'),
+                section: 'Navigation',
+            },
+            {
+                icon: 'zoom-in',
+                title: this.fluidbook.l10n.__('Control and + to <strong>Zoom in</strong>'),
+                section: 'Display / Sound',
+            },
+            {
+                icon: 'zoom-out',
+                title: this.fluidbook.l10n.__('Control and - to <strong>Zoom out</strong>'),
+                section: 'Display / Sound',
+            },
+            {
+                icon: 'swith-normal-fullscreen',
+                title: this.fluidbook.l10n.__('F11 to <strong>switch between Normal and Fullscreen</strong>'),
+                section: 'Display / Sound',
+                if: this.fluidbook.settings.fullscreen
+            },
+            {
+                icon: 'switch-sound',
+                title: this.fluidbook.l10n.__('Control and M to <strong>switch the Sound On and Off</strong>'),
+                section: 'Display / Sound',
+                if: this.fluidbook.settings.sound
+            },
+            {
+                icon: 'help',
+                title: this.fluidbook.l10n.__('F1 for <strong>help</strong>'),
+                section: 'Pannels',
+                if: this.fluidbook.settings.help
+            },
+            {
+                icon: 'content',
+                title: this.fluidbook.l10n.__('F2 for <strong>content</strong>'),
+                section: 'Pannels',
+            },
+            {
+                icon: 'overview',
+                title: this.fluidbook.l10n.__('Control and O for an <strong>Overview</strong>'),
+                section: 'Pannels',
+            },
+            {
+                icon: 'print',
+                title: this.fluidbook.l10n.__('Control and P to <strong>Print</strong>'),
+                section: 'Pannels',
+                if: this.fluidbook.settings.print
+            },
+            {
+                icon: 'bookmarks',
+                title: this.fluidbook.l10n.__('Control and B for <strong>Bookmarks</strong>'),
+                section: 'Pannels',
+                if: this.fluidbook.settings.bookmark
+            },
+            {
+                icon: 'notes',
+                title: this.fluidbook.l10n.__('Control and Alt and N for <strong>Notes</strong>'),
+                section: 'Pannels',
+                if: this.fluidbook.settings.notes
+            },
+            {
+                icon: 'burger-menu',
+                title: this.fluidbook.l10n.__('F10 to <strong>open Burger menu</strong>'),
+                section: 'Pannels',
+            },
+            {
+                icon: 'search',
+                title: this.fluidbook.l10n.__('Control and F to <strong>Search</strong>'),
+                section: 'Search',
+            },
+            {
+                icon: 'next-page-result',
+                title: this.fluidbook.l10n.__('F3 for <strong>next page with result</strong>'),
+                section: 'Search',
+                if: this.fluidbook.settings.search
+            },
+        ];
+
+        var t = '<div class="content">';
+        t += '<header>';
+        t += '<h1>' + this.fluidbook.l10n.__('A user experience optimized for accessibility') + '</h1>';
+        t += '<p>' + this.fluidbook.l10n.__('This interactive Fluidbook has been thoughtfully designed to support accessibility and inclusivity. We are actively working towards compliance with the WCAG 2.2 accessibility standards, aiming to meet both Level A and AA criteria.') + '</p>';
+        t += '<p>' + this.fluidbook.l10n.__('The Fluidbook is compatible with assistive technologies such as screen readers (e.g., JAWS, NVDA), and can be navigated using either a mouse or keyboard. Users can easily adjust text and content size by clicking directly on the page or using shortcuts like :zoominshortcut and :zoomoutshortcut. Wherever possible, content is provided in multiple formats - text, video, image, transcript, and audio - to suit different needs.', false, {
+            'zoominshortcut': '<strong>[Ctrl][+]</strong>',
+            'zoomoutshortcut': '<strong>[Ctrl][-]</strong>'
+        }) + '</p>';
+        t += '</header>';
+        t += '<section class="options">'
+
         $.each(sections, function (k, section) {
-            t += '<article>';
-            t += '<img src="images/accessibility/' + section.icon + '.svg">';
-            t += '<h2>' + section.title + '</h2>';
-            t += '<p>' + section.text + '<p/>';
-            t += '</article>';
+            if(section.if !== false) {
+                t += '<article>';
+                t += '<img src="images/accessibility/' + section.icon + '.svg">';
+                t += '<h2>' + section.title + '</h2>';
+                t += '<p>' + section.text + '</p>';
+                t += '</article>';
+            }
+        });
+
+        t += '</section>';
+        t += '<section class="shortcuts">';
+        t += '<h2>List of keyboard shortcuts</h2>';
+
+        $.each(sections_shortcuts, function (k, section) {
+            t += '<h3>'+section.title+'</h3>';
+            $.each(articles_shortcuts, function (k, article) {
+                if(article.section === section.title && article.if !== false) {
+                    t += '<article>';
+                    t += '<img src="images/accessibility/' + article.icon + '.svg">';
+                    t += '<p>' + article.title + '</p>';
+                    t += '</article>';
+                }
+            });
         });
 
-        t += '</article>';
         t += '</section>';
         t += '</div>';
         this.fluidbook.menu.viewWrap(t, 'accessibility');
diff --git a/style/accessibility.less b/style/accessibility.less
index 9e6ba232..c3d8f467 100644
--- a/style/accessibility.less
+++ b/style/accessibility.less
@@ -1,3 +1,6 @@
+@import "book-variables";
+@import "variables";
+
 .visually-hidden, #accessible-contents {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -18,7 +21,7 @@
   border: 0;
   position: absolute;
   cursor: pointer;
-  transform-origin: 0% 0;
+  transform-origin: 0 0;
 
   .mobilefirst & {
     z-index: 21;
@@ -68,20 +71,55 @@
 
 
 .mview[data-menu="accessibility"] {
+  @media (max-width: 1023px) {
+    width: calc(100% - 38px) !important;
+    min-width: auto !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
   .content {
     background-color: #fff;
     color: #000;
     text-align: left;
     padding: 65px;
+    @media @small {
+      padding: 35px;
+    }
+
+    section {
+      border-top: 2px solid;
+      padding-top: 70px;
+      margin-top: 70px;
+
+      &.shortcuts {
+        img {
+          height: 38px;
+        }
+
+        article {
+          margin-bottom: 20px;
+        }
+      }
+    }
 
     header {
       height: auto !important;
+
       h1 {
         font-size: 80px;
         font-weight: 600;
         letter-spacing: -4px;
         line-height: 1;
         margin-bottom: 64px;
+
+        @media @small {
+          font-size: 60px;
+          word-break: break-word;
+        }
+      }
+
+      p:not(:last-child) {
+        margin-bottom: 30px;
       }
     }
 
@@ -89,13 +127,52 @@
       font-size: 20px;
       line-height: 30px;
       letter-spacing: -0.5px;
-      margin: 32px 0;
     }
 
     h2{
       font-size: 32px;
       font-weight: 700;
       line-height: 38px;
+      margin-bottom: 20px;
+    }
+
+    h3{
+      font-weight: 700;
+      margin: 0 0 20px;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+
+    article{
+      margin-bottom: 30px;
+      &:after{
+        content: " ";
+        clear: both;
+        display: block;
+      }
+
+      img {
+        float: left;
+        max-height: 100px;
+        @media (max-width: 1023px) {
+          float: none;
+          margin-bottom: 20px;
+        }
+      }
+
+      p,h2 {
+        margin-left: 200px;
+        @media (max-width: 1023px) {
+          margin-left: 0;
+        }
+        &:before {
+          content: " ";
+          clear: both;
+          display: inline-flex;
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/style/cart/bastide.less b/style/cart/bastide.less
index 2aba15bb..666718e7 100644
--- a/style/cart/bastide.less
+++ b/style/cart/bastide.less
@@ -198,7 +198,7 @@
 
   }
 
-  input[type=email], input[type=number], input[type=text], select, textarea {
+  input[type=email], input[type=number], input[type=text], input[type=password], select, textarea {
     -webkit-appearance: none;
     appearance: none;
     border: 2px solid;
@@ -397,5 +397,4 @@
     max-width: 50ch;
     margin: 2em auto 0;
   }
-
 }