From 3512e1db9a9075cc2910f07151466cebb73f5399 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 2 Jan 2026 18:47:21 +0100 Subject: [PATCH] wait #7866 @3 --- images/accessibility/check-active.svg | 5 + images/accessibility/check.svg | 5 + .../icon-accessible-contents.svg | 5 + js/libs/fluidbook/fluidbook.accessibility.js | 355 ++++++++++-------- style/accessibility.less | 85 ++++- 5 files changed, 287 insertions(+), 168 deletions(-) create mode 100644 images/accessibility/check-active.svg create mode 100644 images/accessibility/check.svg create mode 100644 images/accessibility/icon-accessible-contents.svg diff --git a/images/accessibility/check-active.svg b/images/accessibility/check-active.svg new file mode 100644 index 00000000..ec195e05 --- /dev/null +++ b/images/accessibility/check-active.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/images/accessibility/check.svg b/images/accessibility/check.svg new file mode 100644 index 00000000..46ec939e --- /dev/null +++ b/images/accessibility/check.svg @@ -0,0 +1,5 @@ + + + + + \ 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 index 00000000..68869c3d --- /dev/null +++ b/images/accessibility/icon-accessible-contents.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js index f67d3a1f..fb233ae7 100644 --- 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 Tab key to jump from one element to the next (use Shift+Tab to jump backward). Press Enter to activate the selected element.'), - }, - { - icon: 'icon-listen', - title: this.fluidbook.l10n.__('Listen to the page'), - text: this.fluidbook.l10n.__('Click the audio icon 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 play the left page audiodescription'), - section: 'Navigation', - if: this.fluidbook.settings.audiodescription, - }, - { - icon: 'play-right-page-audio', - title: this.fluidbook.l10n.__('Shift and arrow right to play the right page audiodescription'), - section: 'Navigation', - if: this.fluidbook.settings.audiodescription - }, - { - icon: 'next-page', - title: this.fluidbook.l10n.__('Arrow right or page down for next page'), - section: 'Navigation', - }, - { - icon: 'previous-page', - title: this.fluidbook.l10n.__('Arrow left or page up for previous page'), - section: 'Navigation', - }, - { - icon: 'last-page', - title: this.fluidbook.l10n.__('End for the last page'), - section: 'Navigation', - }, - { - icon: 'first-page', - title: this.fluidbook.l10n.__('Home for the first page'), - section: 'Navigation', - }, - { - icon: 'select-next-previous-interactive-item', - title: this.fluidbook.l10n.__('Tab or Shift+Tab to select next or previous interactive item'), - section: 'Navigation', - }, - { - icon: 'action-selected-item', - title: this.fluidbook.l10n.__('Enter to action the selected item'), - section: 'Navigation', - }, - { - icon: 'close-opened-item', - title: this.fluidbook.l10n.__('Escape to close an opened item'), - section: 'Navigation', - }, - { - icon: 'zoom-in', - title: this.fluidbook.l10n.__('Control and + to Zoom in'), - section: 'Display / Sound', - }, - { - icon: 'zoom-out', - title: this.fluidbook.l10n.__('Control and - to Zoom out'), - section: 'Display / Sound', - }, - { - icon: 'swith-normal-fullscreen', - title: this.fluidbook.l10n.__('F11 to switch between Normal and Fullscreen'), - section: 'Display / Sound', - if: this.fluidbook.settings.fullscreen - }, - { - icon: 'switch-sound', - title: this.fluidbook.l10n.__('Control and M to switch the Sound On and Off'), - section: 'Display / Sound', - if: this.fluidbook.settings.sound - }, - { - icon: 'help', - title: this.fluidbook.l10n.__('F1 for help'), - section: 'Pannels', - if: this.fluidbook.settings.help - }, - { - icon: 'content', - title: this.fluidbook.l10n.__('F2 for content'), - section: 'Pannels', - }, - { - icon: 'overview', - title: this.fluidbook.l10n.__('Control and O for an Overview'), - section: 'Pannels', - }, - { - icon: 'print', - title: this.fluidbook.l10n.__('Control and P to Print'), - section: 'Pannels', - if: this.fluidbook.settings.print - }, - { - icon: 'bookmarks', - title: this.fluidbook.l10n.__('Control and B for Bookmarks'), - section: 'Pannels', - if: this.fluidbook.settings.bookmark - }, - { - icon: 'notes', - title: this.fluidbook.l10n.__('Control and Alt and N for Notes'), - section: 'Pannels', - if: this.fluidbook.settings.notes - }, - { - icon: 'burger-menu', - title: this.fluidbook.l10n.__('F10 to open Burger menu'), - section: 'Pannels', - }, - { - icon: 'search', - title: this.fluidbook.l10n.__('Control and F to Search'), - section: 'Search', - }, - { - icon: 'next-page-result', - title: this.fluidbook.l10n.__('F3 for next page with result'), - 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 Tab key to jump from one element to the next (use Shift+Tab to jump backward). Press Enter to activate the selected element.'), + }, { + icon: 'icon-listen', + title: this.fluidbook.l10n.__('Listen to the page'), + text: this.fluidbook.l10n.__('Click the audio icon 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 play the left page audiodescription'), + section: this.fluidbook.l10n.__('Navigation'), + if: this.fluidbook.settings.audiodescription, + }, { + icon: 'play-right-page-audio', + title: this.fluidbook.l10n.__('Shift and arrow right to play the right page audiodescription'), + section: this.fluidbook.l10n.__('Navigation'), + if: this.fluidbook.settings.audiodescription + }, { + icon: 'next-page', + title: this.fluidbook.l10n.__('Arrow right or page down for next page'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'previous-page', + title: this.fluidbook.l10n.__('Arrow left or page up for previous page'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'last-page', + title: this.fluidbook.l10n.__('End for the last page'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'first-page', + title: this.fluidbook.l10n.__('Home for the first page'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'select-next-previous-interactive-item', + title: this.fluidbook.l10n.__('Tab or Shift+Tab to select next or previous interactive item'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'action-selected-item', + title: this.fluidbook.l10n.__('Enter to action the selected item'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'close-opened-item', + title: this.fluidbook.l10n.__('Escape to close an opened item'), + section: this.fluidbook.l10n.__('Navigation'), + }, { + icon: 'zoom-in', + title: this.fluidbook.l10n.__('Control and + to Zoom in'), + section: this.fluidbook.l10n.__('Display / Sound'), + }, { + icon: 'zoom-out', + title: this.fluidbook.l10n.__('Control and - to Zoom out'), + section: this.fluidbook.l10n.__('Display / Sound'), + }, { + icon: 'swith-normal-fullscreen', + title: this.fluidbook.l10n.__('F11 to switch between Normal and Fullscreen'), + section: this.fluidbook.l10n.__('Display / Sound'), + if: this.fluidbook.settings.fullscreen + }, { + icon: 'switch-sound', + title: this.fluidbook.l10n.__('Control and M to switch the Sound On and Off'), + section: this.fluidbook.l10n.__('Display / Sound'), + if: this.fluidbook.settings.sound + }, { + icon: 'help', + title: this.fluidbook.l10n.__('F1 for help'), + section: this.fluidbook.l10n.__('Panels'), + if: this.fluidbook.settings.help + }, { + icon: 'content', + title: this.fluidbook.l10n.__('F2 for content'), + section: this.fluidbook.l10n.__('Panels'), + }, { + icon: 'overview', + title: this.fluidbook.l10n.__('Control and O for an Overview'), + section: this.fluidbook.l10n.__('Panels'), + }, { + icon: 'print', + title: this.fluidbook.l10n.__('Control and P to Print'), + section: this.fluidbook.l10n.__('Panels'), + if: this.fluidbook.settings.print + }, { + icon: 'bookmarks', + title: this.fluidbook.l10n.__('Control and B for Bookmarks'), + section: this.fluidbook.l10n.__('Panels'), + if: this.fluidbook.settings.bookmark + }, { + icon: 'notes', + title: this.fluidbook.l10n.__('Control and Alt and N for Notes'), + section: this.fluidbook.l10n.__('Panels'), + if: this.fluidbook.settings.notes + }, { + icon: 'burger-menu', + title: this.fluidbook.l10n.__('F10 to open Burger menu'), + section: this.fluidbook.l10n.__('Panels'), + }, { + icon: 'search', + title: this.fluidbook.l10n.__('Control and F to Search'), + section: this.fluidbook.l10n.__('Search'), + }, { + icon: 'next-page-result', + title: this.fluidbook.l10n.__('F3 for next page with result'), + section: this.fluidbook.l10n.__('Search'), + if: this.fluidbook.settings.search + },]; - var t = '
'+ getSpriteIcon('interface-close') +'
' + var t = '
' + getSpriteIcon('interface-close') + '
' t += '
'; t += '
'; t += '

' + this.fluidbook.l10n.__('A user experience optimized for accessibility') + '

'; t += '

' + 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.') + '

'; t += '

' + 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': '[Ctrl][+]', - 'zoomoutshortcut': '[Ctrl][-]' + 'zoominshortcut': '[Ctrl][+]', 'zoomoutshortcut': '[Ctrl][-]' }) + '

'; t += '
'; + + 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 += '
'; + t += '' + t += '

' + this.fluidbook.l10n.__('Accessibility settings') + '

'; + $.each(settings, function (k, s) { + if (!s.if) { + return; + } + t += '
'; t += '
'; - t += '

List of keyboard shortcuts

'; + t += '

' + this.fluidbook.l10n.__('List of keyboard shortcuts') + '

'; $.each(sections_shortcuts, function (k, section) { - t += '

'+section.title+'

'; + t += '

' + section.title + '

'; $.each(articles_shortcuts, function (k, article) { - if(article.section === section.title && article.if !== false) { + if (article.section === section.title && article.if !== false) { t += '
'; t += ''; t += '

' + article.title + '

'; @@ -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