From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 11 Dec 2025 17:57:08 +0000 (+0100)
Subject: wip #7779 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=45cf80ac9862abdea29ffcd316fa6ed419edd925;p=fluidbook-html5.git

wip #7779 @2
---

diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index 134e4ede..78f0c3a4 100644
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -47,7 +47,51 @@ FluidbookAccessibility.prototype = {
     },
 
     openMenu: function (callback) {
-        var t = '<div class="content"></div>';
+        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',
+                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',
+                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',
+                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',
+                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.'),
+            },
+        ];
+        $.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>';
+        });
+
+        t += '</article>';
+        t += '</section>';
+        t += '</div>';
         this.fluidbook.menu.viewWrap(t, 'accessibility');
         if (callback != undefined) {
             callback();
diff --git a/js/libs/fluidbook/fluidbook.audiodescription.js b/js/libs/fluidbook/fluidbook.audiodescription.js
index 8f5d7740..6e27c0d8 100644
--- a/js/libs/fluidbook/fluidbook.audiodescription.js
+++ b/js/libs/fluidbook/fluidbook.audiodescription.js
@@ -135,7 +135,6 @@ FluidbookAudioDescription.prototype = {
         if (!this.audioSupport) {
             return false;
         }
-        console.log(this.fluidbook.settings.audiodescriptionAudio, page);
         if (this.fluidbook.settings.audiodescriptionAudio === undefined) {
             return false;
         }
diff --git a/js/libs/fluidbook/fluidbook.l10n.js b/js/libs/fluidbook/fluidbook.l10n.js
index 4b4c4346..87f89ea9 100644
--- a/js/libs/fluidbook/fluidbook.l10n.js
+++ b/js/libs/fluidbook/fluidbook.l10n.js
@@ -205,7 +205,8 @@ FluidbookL10N.prototype = {
     translate: function (str, markupIfNonAvailable) {
         return this.__(str, markupIfNonAvailable);
     },
-    __: function (str, markupIfNonAvailable) {
+
+    __: function (str, markupIfNonAvailable, replace) {
         if (str === undefined) {
             return;
         }
@@ -216,13 +217,21 @@ FluidbookL10N.prototype = {
             str = str.substring(1);
         }
 
+        let res;
         if (this.translations[str] == undefined || this.translations[str] == null || this.translations[str] == '') {
             if (markupIfNonAvailable == undefined || !markupIfNonAvailable) {
-                return str;
+                res = str;
             } else {
-                return '~ ' + str + ' ~';
+                res = '~ ' + str + ' ~';
             }
+        } else {
+            res = this.translations[str];
         }
-        return this.translations[str];
+        if (replace) {
+            $.each(replace, function (k, v) {
+                res = res.replaceAll(':' + k, v);
+            });
+        }
+        return res;
     }
 };
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index ab34ad23..1a6d78c0 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -880,6 +880,10 @@ FluidbookMenu.prototype = {
             case 'notes':
                 fullscreen = true;
                 break;
+            case 'accessibility':
+                w=900;
+                h = hh * 0.9;
+                break;
             case 'share':
                 w = 200;
                 break;
diff --git a/style/accessibility.less b/style/accessibility.less
index 7eb96a72..9e6ba232 100644
--- a/style/accessibility.less
+++ b/style/accessibility.less
@@ -64,4 +64,38 @@
   .using-keyboard & {
     border-color: #c00;
   }
+}
+
+
+.mview[data-menu="accessibility"] {
+  .content {
+    background-color: #fff;
+    color: #000;
+    text-align: left;
+    padding: 65px;
+
+    header {
+      height: auto !important;
+      h1 {
+        font-size: 80px;
+        font-weight: 600;
+        letter-spacing: -4px;
+        line-height: 1;
+        margin-bottom: 64px;
+      }
+    }
+
+    p{
+      font-size: 20px;
+      line-height: 30px;
+      letter-spacing: -0.5px;
+      margin: 32px 0;
+    }
+
+    h2{
+      font-size: 32px;
+      font-weight: 700;
+      line-height: 38px;
+    }
+  }
 }
\ No newline at end of file