wait #7866 @3

diff --git a/images/accessibility/check-active.svg b/images/accessibility/check-active.svg
new file mode 100644 (file)
index 0000000..ec195e0
--- /dev/null
+++ b/images/accessibility/check-active.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 80 40">
+    <rect fill="#010101" x="0" y="0" width="80" height="40" rx="4" ry="4"/>
+    <rect fill="#fff" x="45" y="5" width="30" height="30" rx="1" ry="1"/>
+</svg>
\ No newline at end of file

diff --git a/images/accessibility/check.svg b/images/accessibility/check.svg
new file mode 100644 (file)
index 0000000..46ec939
--- /dev/null
+++ b/images/accessibility/check.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 80 40">
+    <path fill="#c3c3c3" d="M75.1,1c2.2,0,3.9,1.7,3.9,3.8v30.5c0,2.1-1.7,3.8-3.9,3.8H4.9c-2.2,0-3.9-1.7-3.9-3.8V4.8C1,2.7,2.7,1,4.9,1h70.2M75.1,0H4.9C2.2,0,0,2.1,0,4.8v30.5c0,2.6,2.2,4.8,4.9,4.8h70.2c2.7,0,4.9-2.1,4.9-4.8V4.8c0-2.6-2.2-4.8-4.9-4.8h0Z"/>
+    <rect fill="#c3c3c3" x="5.9" y="5.7" width="29.3" height="28.6" rx="2" ry="2"/>
+</svg>
\ No newline at end of file

diff --git a/images/accessibility/icon-accessible-contents.svg b/images/accessibility/icon-accessible-contents.svg
new file mode 100644 (file)
index 0000000..68869c3
--- /dev/null
+++ b/images/accessibility/icon-accessible-contents.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 72 72">
+    <circle fill="#ebebeb" cx="36" cy="36" r="35"/>
+    <path fill="#010101" d="M36,25.5c-1,0-1.8-.3-2.5-1.1s-1-1.6-1-2.4.4-1.8,1-2.4,1.6-1,2.5-1,1.8.4,2.5,1,1,1.6,1,2.4-.4,1.8-1,2.4-1.6,1.1-2.5,1.1ZM30.7,53.5v-22.8s0,0,0,0c-1.7,0-3.5-.3-5.4-.7l-5.3-1.1.9-3.5c2.3.7,4.7,1.1,7.3,1.4s5.1.3,7.7.3,5.1,0,7.7-.3,5.1-.7,7.3-1.4,0,0,0,0l.9,3.5c-1.6.5-3.3.9-5.2,1.1s-3.7.5-5.4.7,0,0,0,0v22.8s-3.5,0-3.5,0v-10.5h-3.5s0,10.5,0,10.5h-3.5Z"/>
+</svg>
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index f67d3a1fb6c1af5f2309430647261fafbf48abf7..fb233ae776953b25a7c6ec7d5e3a23f132b92d34 100644 (file)
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -16,6 +16,31 @@ FluidbookAccessibility.prototype = {
                 $(this.fluidbook).trigger('fluidbook.splash.hide');
             }, 2500);
         });
+
+        $(document).on('change', "[data-menu=accessibility] .settings input", function () {
+            let userSettings = $this.getSettings();
+            userSettings[$(this).attr('name')] = $(this).is(':checked');
+            $this.saveSettings(userSettings);
+            $this.applySettings();
+        });
+        this.applySettings();
+    },
+
+    getSettings: function () {
+        return this.fluidbook.cache.get('accessibility', {'accessiblecontents': true});
+    },
+
+    saveSettings: function (settings) {
+        this.fluidbook.cache.set('accessibility', settings);
+    },
+
+    applySettings: function () {
+        let settings = this.getSettings();
+        if (settings['accessiblecontents']) {
+            $('body').removeClass('no-accessiblecontents');
+        } else {
+            $('body').addClass('no-accessiblecontents');
+        }
     },
 
     endChangePage: function (page) {
@@ -47,170 +72,179 @@ FluidbookAccessibility.prototype = {
     },
 
     openMenu: function (callback) {
-        let sections = [
-            {
-                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: '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: '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: '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',
-                if: this.fluidbook.settings.audiodescription
-            },
-            {
-                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
-            },
-        ];
+        let sections = [{
+            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: '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: '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: '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: this.fluidbook.l10n.__('Navigation')}, {title: this.fluidbook.l10n.__('Display / Sound')}, {title: this.fluidbook.l10n.__('Panels')}, {title: this.fluidbook.l10n.__('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: this.fluidbook.l10n.__('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: this.fluidbook.l10n.__('Navigation'),
+            if: this.fluidbook.settings.audiodescription
+        }, {
+            icon: 'next-page',
+            title: this.fluidbook.l10n.__('Arrow right or page down for <strong>next page</strong>'),
+            section: this.fluidbook.l10n.__('Navigation'),
+        }, {
+            icon: 'previous-page',
+            title: this.fluidbook.l10n.__('Arrow left or page up for <strong>previous page</strong>'),
+            section: this.fluidbook.l10n.__('Navigation'),
+        }, {
+            icon: 'last-page',
+            title: this.fluidbook.l10n.__('End for the <strong>last page</strong>'),
+            section: this.fluidbook.l10n.__('Navigation'),
+        }, {
+            icon: 'first-page',
+            title: this.fluidbook.l10n.__('Home for the <strong>first page</strong>'),
+            section: this.fluidbook.l10n.__('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: this.fluidbook.l10n.__('Navigation'),
+        }, {
+            icon: 'action-selected-item',
+            title: this.fluidbook.l10n.__('Enter to <strong>action the selected item</strong>'),
+            section: this.fluidbook.l10n.__('Navigation'),
+        }, {
+            icon: 'close-opened-item',
+            title: this.fluidbook.l10n.__('Escape to <strong>close an opened item</strong>'),
+            section: this.fluidbook.l10n.__('Navigation'),
+        }, {
+            icon: 'zoom-in',
+            title: this.fluidbook.l10n.__('Control and + to <strong>Zoom in</strong>'),
+            section: this.fluidbook.l10n.__('Display / Sound'),
+        }, {
+            icon: 'zoom-out',
+            title: this.fluidbook.l10n.__('Control and - to <strong>Zoom out</strong>'),
+            section: this.fluidbook.l10n.__('Display / Sound'),
+        }, {
+            icon: 'swith-normal-fullscreen',
+            title: this.fluidbook.l10n.__('F11 to <strong>switch between Normal and Fullscreen</strong>'),
+            section: this.fluidbook.l10n.__('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: this.fluidbook.l10n.__('Display / Sound'),
+            if: this.fluidbook.settings.sound
+        }, {
+            icon: 'help',
+            title: this.fluidbook.l10n.__('F1 for <strong>help</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+            if: this.fluidbook.settings.help
+        }, {
+            icon: 'content',
+            title: this.fluidbook.l10n.__('F2 for <strong>content</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+        }, {
+            icon: 'overview',
+            title: this.fluidbook.l10n.__('Control and O for an <strong>Overview</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+        }, {
+            icon: 'print',
+            title: this.fluidbook.l10n.__('Control and P to <strong>Print</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+            if: this.fluidbook.settings.print
+        }, {
+            icon: 'bookmarks',
+            title: this.fluidbook.l10n.__('Control and B for <strong>Bookmarks</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+            if: this.fluidbook.settings.bookmark
+        }, {
+            icon: 'notes',
+            title: this.fluidbook.l10n.__('Control and Alt and N for <strong>Notes</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+            if: this.fluidbook.settings.notes
+        }, {
+            icon: 'burger-menu',
+            title: this.fluidbook.l10n.__('F10 to <strong>open Burger menu</strong>'),
+            section: this.fluidbook.l10n.__('Panels'),
+        }, {
+            icon: 'search',
+            title: this.fluidbook.l10n.__('Control and F to <strong>Search</strong>'),
+            section: this.fluidbook.l10n.__('Search'),
+        }, {
+            icon: 'next-page-result',
+            title: this.fluidbook.l10n.__('F3 for <strong>next page with result</strong>'),
+            section: this.fluidbook.l10n.__('Search'),
+            if: this.fluidbook.settings.search
+        },];
 
-        var t = '<div class="caption "><a href="#/closeview" role="button" aria-label="Close" aria-keyshortcuts="Escape" class="button back">'+ getSpriteIcon('interface-close') +'</a></div>'
+        var t = '<div class="caption "><a href="#/closeview" role="button" aria-label="Close" aria-keyshortcuts="Escape" class="button back">' + getSpriteIcon('interface-close') + '</a></div>'
         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>'
+            'zoominshortcut': '<strong>[Ctrl][+]</strong>', 'zoomoutshortcut': '<strong>[Ctrl][-]</strong>'
         }) + '</p>';
         t += '</header>';
+
+        let userSettings = this.getSettings();
+
+        let settings = [{
+            title: this.fluidbook.l10n.__("Accessibility"),
+            text: this.fluidbook.l10n.__("Active visual and textual aids: alternative texts, audio descriptions, explanatory tooltips."),
+            name: 'accessiblecontents',
+            icon: 'icon-accessible-contents',
+            if: true || this.fluidbook.settings.hasAccessibleLink,
+        }];
+
+        let showSettings = false;
+        $.each(settings, function (k, s) {
+            if (s.if) {
+                showSettings = true;
+                return false;
+            }
+        });
+
+        if (showSettings) {
+            t += '<section class="settings">';
+            t += '<div class="preload" aria-hidden="true"><label><article><input name="a" type="checkbox" checked /><input type="checkbox" name="b"/></article></label></div>'
+            t += '<h2>' + this.fluidbook.l10n.__('Accessibility settings') + '</h2>';
+            $.each(settings, function (k, s) {
+                if (!s.if) {
+                    return;
+                }
+                t += '<label><article>';
+                t += '<img src="images/accessibility/' + s.icon + '.svg">';
+                t += '<div><h3>' + s.title + '</h3>';
+                t += '<p>' + s.text + '</p></div>';
+                t += '<input value="1" type="checkbox" name="' + s.name + '" ';
+                if (userSettings[s.name]) {
+                    t += ' checked="checked"';
+                }
+                t += '/>'
+                t += '</article></label>';
+
+            });
+            t += '</section>';
+        }
+
         t += '<section class="options">'
 
         $.each(sections, function (k, section) {
-            if(section.if !== false) {
+            if (section.if !== false) {
                 t += '<article>';
                 t += '<img src="images/accessibility/' + section.icon + '.svg">';
                 t += '<h2>' + section.title + '</h2>';
@@ -221,12 +255,12 @@ FluidbookAccessibility.prototype = {
 
         t += '</section>';
         t += '<section class="shortcuts">';
-        t += '<h2>List of keyboard shortcuts</h2>';
+        t += '<h2>' + this.fluidbook.l10n.__('List of keyboard shortcuts') + '</h2>';
 
         $.each(sections_shortcuts, function (k, section) {
-            t += '<h3>'+section.title+'</h3>';
+            t += '<h3>' + section.title + '</h3>';
             $.each(articles_shortcuts, function (k, article) {
-                if(article.section === section.title && article.if !== false) {
+                if (article.section === section.title && article.if !== false) {
                     t += '<article>';
                     t += '<img src="images/accessibility/' + article.icon + '.svg">';
                     t += '<p>' + article.title + '</p>';
@@ -247,8 +281,7 @@ FluidbookAccessibility.prototype = {
 /*! outline.js v1.2.0 - https://github.com/lindsayevans/outline.js/ */
 (function (d) {
 
-    var style_element = d.createElement('STYLE'),
-        dom_events = 'addEventListener' in d,
+    var style_element = d.createElement('STYLE'), dom_events = 'addEventListener' in d,
         add_event_listener = function (type, callback) {
             // Basic cross-browser event handling
             if (dom_events) {
@@ -256,12 +289,10 @@ FluidbookAccessibility.prototype = {
             } else {
                 d.attachEvent('on' + type, callback);
             }
-        },
-        set_css = function (css_text) {
+        }, set_css = function (css_text) {
             // Handle setting of <style> element contents in IE8
             !!style_element.styleSheet ? style_element.styleSheet.cssText = css_text : style_element.innerHTML = css_text;
-        }
-    ;
+        };
 
     d.getElementsByTagName('HEAD')[0].appendChild(style_element);
 

diff --git a/style/accessibility.less b/style/accessibility.less
index c1760aa6a5156881cd5f19520eec52ce1dea907b..746c263296ec4664aad75a9477210f46e552f666 100644 (file)
--- a/style/accessibility.less
+++ b/style/accessibility.less
@@ -132,7 +132,74 @@
       }
     }
 
+
     section {
+      &.settings {
+        .preload {
+          opacity: 0;
+          height: 0;
+        }
+
+        article {
+          border: 1px solid #c2c2c2;
+          border-radius: 3px;
+          margin: 10px 0;
+          font-size: 16px;
+          padding: 40px;
+          cursor: pointer;
+          display: block;
+
+          div {
+            float: left;
+            width: calc(100% - 180px);
+
+            p {
+              font-size: 16px;
+              margin: 0;
+              line-height: normal;
+            }
+
+            h3 {
+              font-size: 20px;
+              margin-bottom: 5px;
+              margin-top: -5px;
+            }
+          }
+
+          img {
+            width: 72px;
+            height: 72px;
+            margin-right: 30px;
+            float: left !important;
+            margin-bottom: 0 !important;
+          }
+
+          input[type=checkbox] {
+            position: relative;
+            appearance: none;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+            float: left;
+
+            &:after {
+              content: " ";
+              display: block;
+              width: 80px;
+              height: 40px;
+              background-image: url("../images/accessibility/check.svg");
+              position: absolute;
+              top: 20px;
+              left: 5px;
+              cursor: pointer;
+            }
+
+            &:checked:after {
+              background-image: url("../images/accessibility/check-active.svg");
+            }
+          }
+        }
+      }
+
       border-top: 2px solid;
       padding-top: 70px;
       margin-top: 70px;
@@ -180,20 +247,20 @@
       }
     }
 
-    p{
+    p {
       font-size: 20px;
       line-height: 30px;
       letter-spacing: -0.5px;
     }
 
-    h2{
+    h2 {
       font-size: 32px;
       font-weight: 700;
       line-height: 38px;
       margin-bottom: 20px;
     }
 
-    h3{
+    h3 {
       font-size: 20px;
       font-weight: 700;
       margin: 0 0 20px;
@@ -203,9 +270,10 @@
       font-weight: 700;
     }
 
-    article{
+    article {
       margin-bottom: 30px;
-      &:after{
+
+      &:after {
         content: " ";
         clear: both;
         display: block;
@@ -220,11 +288,12 @@
         }
       }
 
-      p,h2 {
+      p, h2 {
         margin-left: 200px;
         @media (max-width: 1023px) {
           margin-left: 0;
         }
+
         &:before {
           content: " ";
           clear: both;
@@ -233,4 +302,8 @@
       }
     }
   }
+}
+
+.no-accessiblecontents #fluidbook [data-accessible-content="1"] {
+  display: none;
 }
\ No newline at end of file