Add description for screen readers

language/.en.json

@@ -226,6 +226,10 @@
         },
         {
           "label": "Hide controls"
+        },
+        {
+          "label": "Description",
+          "description": "Provide a textual description of the animation which will be provided by screen readers."
         }
       ]
     },

language/de.json

@@ -226,6 +226,10 @@
         },
         {
           "label": "Verstecke Bedienelemente"
+        },
+        {
+          "label": "Beschreibung",
+          "description": "Gib eine textuelle Beschreibung der Animation an, die von Bildschirmlesern bereitgestellt wird."
         }
       ]
     },

semantics.json

@@ -411,6 +411,13 @@
         "type": "boolean",
         "label": "Hide controls",
         "default": false
+      },
+      {
+        "name": "description",
+        "type": "text",
+        "label": "Description",
+        "description": "Provide a textual description of the animation which will be provided by screen readers.",
+        "length": 5000
       }
     ]
   },

src/scripts/components/main.js

@@ -4,6 +4,7 @@ import Toolbar from '@components/toolbar/toolbar.js';
 import Timeline from '@models/timeline.js';
 import Jukebox from '@services/jukebox.js';
 import { MS_IN_S, secondsToMilliseconds, millisecondsToSeconds } from '@services/time-util.js';
+import { decode } from 'he';
 import './main.scss';
 
 /** @constant {number} FRAMES_PER_SECOND Frames per second aspired. */
@@ -45,6 +46,14 @@ export default class AnimatorMain {
     this.dom = document.createElement('div');
     this.dom.classList.add('h5p-animator-main');
 
+    if (typeof this.params.description === 'string') {
+      const description = document.createElement('div');
+      description.classList.add('h5p-animator-description');
+      description.classList.add('sr-only');
+      description.textContent = decode(this.params.description);
+      this.dom.append(description);
+    }
+
     this.canvas = new Canvas(
       {
         aspectRatio: this.params.aspectRatio,

src/scripts/components/main.scss

@@ -1,3 +1,15 @@
 .h5p-animator-main {
   position: relative;
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 }

src/scripts/h5p-animator.js

@@ -76,6 +76,7 @@ export default class Animator extends H5P.EventDispatcher {
         backgroundImage: this.retrieveBackgroundImage(
           this.params.background.backgroundImage?.path, this.contentId
         ),
+        description: this.params.behaviour.description,
         elements: this.retrieveElements(this.params.editor.elements),
         dictionary: this.dictionary,
         globals: this.globals,