Merge branch 'accessibility'

card.js

@@ -7,10 +7,12 @@
    * @extends H5P.EventDispatcher
    * @param {Object} image
    * @param {number} id
+   * @param {string} alt
+   * @param {Object} l10n Localization
    * @param {string} [description]
    * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, description, styles) {
+  MemoryGame.Card = function (image, id, alt, l10n, description, styles) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
@@ -18,7 +20,9 @@
     EventDispatcher.call(self);
 
     var path = H5P.getPath(image.path, id);
-    var width, height, margin, $card;
+    var width, height, margin, $card, $wrapper, removedState, flippedState;
+
+    alt = alt || 'Missing description'; // Default for old games
 
     if (image.width !== undefined && image.height !== undefined) {
       if (image.width > image.height) {
@@ -34,32 +38,71 @@
       width = height = '100%';
     }
 
+    /**
+     * Update the cards label to make it accessible to users with a readspeaker
+     *
+     * @param {boolean} isMatched The card has been matched
+     * @param {boolean} announce Announce the current state of the card
+     * @param {boolean} reset Go back to the default label
+     */
+    self.updateLabel = function (isMatched, announce, reset) {
+
+      // Determine new label from input params
+      var label = (reset ? l10n.cardUnturned : alt);
+      if (isMatched) {
+        label = l10n.cardMatched + ' ' + label;
+      }
+
+      // Update the card's label
+      $wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + label);
+
+      // Update disabled property
+      $wrapper.attr('aria-disabled', reset ? null : 'true');
+
+      // Announce the label change
+      if (announce) {
+        $wrapper.blur().focus(); // Announce card label
+      }
+    };
+
     /**
      * Flip card.
      */
     self.flip = function () {
+      if (flippedState) {
+        $wrapper.blur().focus(); // Announce card label again
+        return;
+      }
+
       $card.addClass('h5p-flipped');
       self.trigger('flip');
+      flippedState = true;
     };
 
     /**
      * Flip card back.
      */
     self.flipBack = function () {
+      self.updateLabel(null, null, true); // Reset card label
       $card.removeClass('h5p-flipped');
+      flippedState = false;
     };
 
     /**
      * Remove.
      */
-    self.remove = function () {
+    self.remove = function (announce) {
       $card.addClass('h5p-matched');
+      removedState = true;
     };
 
     /**
      * Reset card to natural state
      */
     self.reset = function () {
+      self.updateLabel(null, null, true); // Reset card label
+      flippedState = false;
+      removedState = false;
       $card[0].classList.remove('h5p-flipped', 'h5p-matched');
     };
 
@@ -87,15 +130,47 @@
      * @param {H5P.jQuery} $container
      */
     self.appendTo = function ($container) {
-      // TODO: Translate alt attr
+      $wrapper = $('<li class="h5p-memory-wrap" tabindex="-1" role="button"><div class="h5p-memory-card">' +
-      $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
                   '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles && styles.backImage ? '' : '<span></span>') + '</div>' +
                   '<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
-                    '<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
+                    '<img src="' + path + '" alt="' + alt + '" style="width:' + width + ';height:' + height + '"/>' +
                   '</div>' +
                 '</div></li>')
         .appendTo($container)
-        .children('.h5p-memory-card')
+        .on('keydown', function (event) {
+          switch (event.which) {
+            case 13: // Enter
+            case 32: // Space
+              self.flip();
+              event.preventDefault();
+              return;
+            case 39: // Right
+            case 40: // Down
+              // Move focus forward
+              self.trigger('next');
+              event.preventDefault();
+              return;
+            case 37: // Left
+            case 38: // Up
+              // Move focus back
+              self.trigger('prev');
+              event.preventDefault();
+              return;
+            case 35:
+              // Move to last card
+              self.trigger('last');
+              event.preventDefault();
+              return;
+            case 36:
+              // Move to first card
+              self.trigger('first');
+              event.preventDefault();
+              return;
+          }
+        });
+
+      $wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + l10n.cardUnturned);
+      $card = $wrapper.children('.h5p-memory-card')
         .children('.h5p-front')
           .click(function () {
             self.flip();
@@ -104,11 +179,47 @@
     };
 
     /**
-     * Re-append to parent container
+     * Re-append to parent container.
      */
     self.reAppend = function () {
-      var parent = $card[0].parentElement.parentElement;
+      var parent = $wrapper[0].parentElement;
-      parent.appendChild($card[0].parentElement);
+      parent.appendChild($wrapper[0]);
+    };
+
+    /**
+     * Make the card accessible when tabbing
+     */
+    self.makeTabbable = function () {
+      if ($wrapper) {
+        $wrapper.attr('tabindex', '0');
+      }
+    };
+
+    /**
+     * Prevent tabbing to the card
+     */
+    self.makeUntabbable = function () {
+      if ($wrapper) {
+        $wrapper.attr('tabindex', '-1');
+      }
+    };
+
+    /**
+     * Make card tabbable and move focus to it
+     */
+    self.setFocus = function () {
+      self.makeTabbable();
+      if ($wrapper) {
+        $wrapper.focus();
+      }
+    };
+
+    /**
+     * Check if the card has been removed from the game, i.e. if has
+     * been matched.
+     */
+    self.isRemoved = function () {
+      return removedState;
     };
   };
 

language/.en.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,8 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default": "#909090",
+          "default": "#909090"
-          "spectrum": {}
         },
         {
           "label": "Card Back",
@@ -80,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/af.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/ar.json

@@ -21,6 +21,14 @@
           {
             "label": "الوصف",
             "description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -77,11 +82,31 @@
         },
         {
           "label": "Try again button text",
-          "default":"Try again?"
+          "default": "Reset"
         },
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/bs.json

@@ -21,6 +21,14 @@
           {
             "label": "Opis",
             "description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/ca.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/cs.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/da.json

@@ -21,6 +21,14 @@
           {
             "label": "Beskrivelse",
             "description": "Valgfri tekst, som popper op, når to matchende billeder er fundet."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Farvetema",
           "description": "Vælg en farve til bagsiden af dine kort.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Bagsidebillede",
@@ -82,6 +87,26 @@
         {
           "label": "Luk knaptekst",
           "default": "Luk"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/de.json

@@ -3,7 +3,7 @@
     {
       "widgets": [
         {
-          "label":"Vorgaben"
+          "label": "Default"
         }
       ],
       "label": "Karten",
@@ -15,48 +15,53 @@
             "label": "Bild"
           },
           {
-            "label":"Passendes Bild",
+            "label": "Matching Image",
-            "description":"Ein optionales anderes Bild als Gegenstück statt zwei Karten mit dem selben Bild zu nutzen"
+            "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
             "label": "Beschreibung",
             "description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "label":"Interaktionseinstellungen",
+      "label": "Behavioural settings",
-      "description":"Mit diesen Einstellungen kannst du das Verhalten des Spiels anpassen.",
+      "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "label":"Positioniere die Karten in einem Quadrat.",
+          "label": "Position the cards in a square",
-          "description":"Es wird versucht, die Anzahl der Zeilen und Spalten passend zu den Karten einzustellen. Danach werden die Karten passend skaliert."
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "label":"Anzahl der zu nutzenden Karten",
+          "label": "Number of cards to use",
-          "description":"Wird hier eine Zahl größer als 2 eingestellt, werden zufällig Karten aus der Kartenliste gezogen."
+          "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "label":"Füge einen Button hinzu, um das Spiel noch einmal neu zu starten zu können, wenn es vorbei ist."
+          "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "label":"Design-Aspekte",
+      "label": "Look and feel",
-      "description":"Beeinflusse die Optik des Spiels",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "label":"Themenfarbe",
+          "label": "Theme Color",
-          "description":"Wähle eine Farbe, um ein Theme für deine Karten zu erstellen.",
+          "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
-          "label":"Kartenrückseite",
+          "label": "Card Back",
-          "description":"Nutze eine individuelle Rückseite für deine Karten."
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,12 +81,32 @@
           "default": "Gute Arbeit!"
         },
         {
-          "label":"Text des Wiederholen-Buttons",
+          "label": "Try again button text",
-          "default":"Erneut versuchen?"
+          "default": "Reset"
         },
         {
-          "label":"Beschriftung des \"Abbrechen\"-Buttons",
+          "label": "Close button label",
-          "default":"Schließen"
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/el.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/es.json

@@ -21,6 +21,14 @@
           {
             "label": "Descripción",
             "description": "Un breve texto opcional que aparecerá una vez se encuentren las dos cartas coincidentes."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Color del tema",
           "description": "Elegir un color para crear un tema para su juego de cartas.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Parte posterior de la tarjeta",
@@ -82,6 +87,26 @@
         {
           "label": "Etiqueta del botón Cerrar",
           "default": "Cerrar"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/et.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/fi.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/fr.json

@@ -21,6 +21,14 @@
           {
             "label": "Description",
             "description": "Petit texte affiché quand deux cartes identiques sont trouvées."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -77,11 +82,31 @@
         },
         {
           "label": "Try again button text",
-          "default":"Try again?"
+          "default": "Reset"
         },
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/he.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/hu.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/it.json

@@ -21,6 +21,14 @@
           {
             "label": "Descrizione",
             "description": "Breve testo visualizzato quando due carte uguali vengono trovate."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -77,11 +82,31 @@
         },
         {
           "label": "Try again button text",
-          "default":"Try again?"
+          "default": "Reset"
         },
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/ja.json

@@ -21,6 +21,14 @@
           {
             "label": "説明",
             "description": "一致する2つのカードが見つかるとポップアップするオプションの短文テキスト。"
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "テーマ色",
           "description": "カードゲームのテーマとなる色を選択してください。",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "カード裏",
@@ -82,6 +87,26 @@
         {
           "label": "閉じるボタンのテキスト",
           "default": "閉じる"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/ko.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/nb.json

@@ -21,6 +21,14 @@
           {
             "label": "Beskrivelse",
             "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
@@ -49,10 +57,7 @@
         {
           "label": "Temafarge",
           "description": "Velg en farge for å skape et tema over kortspillet ditt.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Kortbaksiden",
@@ -82,6 +87,26 @@
         {
           "label": "Lukk knapp-merkelapp",
           "default": "Lukk"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/nl.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/nn.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/pl.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/pt.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/ro.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/ru.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/sr.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/sv.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/tr.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/vi.json

@@ -18,6 +18,14 @@
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
@@ -49,10 +57,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default":"#909090",
+          "default": "#909090"
-          "spectrum":{
-            
-          }
         },
         {
           "label": "Card Back",
@@ -82,6 +87,26 @@
         {
           "label": "Close button label",
           "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

memory-game.css

@@ -1,6 +1,14 @@
 .h5p-memory-game {
   overflow: hidden;
 }
+.h5p-memory-game .h5p-memory-hidden-read {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 1px;
+  height: 1px;
+  color: transparent;
+}
 .h5p-memory-game > ul {
   list-style: none !important;
   padding: 0.25em 0.5em !important;
@@ -186,9 +194,6 @@
   margin: 0 1em 0 0;
   font-weight: bold;
 }
-.h5p-memory-game .h5p-status > dt:after {
-  content: ":";
-}
 .h5p-memory-game .h5p-status > dd {
   margin: 0;
 }
@@ -307,3 +312,6 @@
   transform: translate(-50%,-450%) scale(0) rotate(360deg);
   opacity: 0;
 }
+.h5p-memory-complete {
+  display: none;
+}

memory-game.js

@@ -5,6 +5,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
   var CARD_STD_SIZE = 116; // PX
   var STD_FONT_SIZE = 16; // PX
   var LIST_PADDING = 1; // EMs
+  var numInstances = 0;
 
   /**
    * Memory Game Constructor
@@ -21,11 +22,28 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
+    var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols;
     var cards = [];
     var flipBacks = []; // Que of cards to be flipped back
     var numFlipped = 0;
     var removed = 0;
+    numInstances++;
+
+    // Add defaults
+    parameters = $.extend(true, {
+      l10n: {
+        cardTurns: 'Card turns',
+        timeSpent: 'Time spent',
+        feedback: 'Good work!',
+        tryAgain: 'Reset',
+        closeLabel: 'Close',
+        label: 'Memory Game. Find the matching cards.',
+        done: 'All of the cards have been found.',
+        cardPrefix: 'Card %num: ',
+        cardUnturned: 'Unturned.',
+        cardMatched: 'Match found.'
+      }
+    }, parameters);
 
     /**
      * Check if these two cards belongs together.
@@ -49,17 +67,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         return;
       }
 
-      // Remove them from the game.
-      card.remove();
-      mate.remove();
-
       // Update counters
       numFlipped -= 2;
       removed += 2;
 
       var isFinished = (removed === cards.length);
-      var desc = card.getDescription();
 
+      // Remove them from the game.
+      card.remove(!isFinished);
+      mate.remove();
+
+      var desc = card.getDescription();
       if (desc !== undefined) {
         // Pause timer and show desciption.
         timer.pause();
@@ -67,19 +85,25 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (card.hasTwoImages) {
           imgs.push(mate.getImage());
         }
-        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
+        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function (refocus) {
           if (isFinished) {
             // Game done
+            card.makeUntabbable();
             finished();
           }
           else {
             // Popup is closed, continue.
             timer.play();
+
+            if (refocus) {
+              card.setFocus();
+            }
           }
         });
       }
       else if (isFinished) {
         // Game done
+        card.makeUntabbable();
         finished();
       }
     };
@@ -90,7 +114,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var finished = function () {
       timer.stop();
-      $feedback.addClass('h5p-show');
+      $taskComplete.show();
+      $feedback.addClass('h5p-show'); // Announce
+      $bottom.focus();
 
       // Create and trigger xAPI event 'completed'
       var completedEvent = self.createXAPIEventTemplate('completed');
@@ -113,7 +139,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         });
         retryButton.classList.add('h5p-memory-transin');
         setTimeout(function () {
-          // Remove class on nextTick to get transition effect
+          // Remove class on nextTick to get transition effectupd
           retryButton.classList.remove('h5p-memory-transin');
         }, 0);
 
@@ -132,12 +158,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // Reset cards
       removed = 0;
-      for (var i = 0; i < cards.length; i++) {
-        cards[i].reset();
-      }
 
       // Remove feedback
       $feedback[0].classList.remove('h5p-show');
+      $taskComplete.hide();
 
       // Reset timer and counter
       timer.reset();
@@ -151,11 +175,15 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         for (var i = 0; i < cards.length; i++) {
           cards[i].reAppend();
         }
+        for (var j = 0; j < cards.length; j++) {
+          cards[j].reset();
+        }
 
         // Scale new layout
         $wrapper.children('ul').children('.h5p-row-break').removeClass('h5p-row-break');
         maxWidth = -1;
         self.trigger('resize');
+        cards[0].setFocus();
       }, 600);
     };
 
@@ -190,6 +218,14 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var addCard = function (card, mate) {
       card.on('flip', function () {
+
+        // Always return focus to the card last flipped
+        for (var i = 0; i < cards.length; i++) {
+          cards[i].makeUntabbable();
+        }
+        card.makeTabbable();
+
+        popup.close();
         self.triggerXAPI('interacted');
         // Keep track of time spent
         timer.play();
@@ -197,6 +233,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         // Keep track of the number of flipped cards
         numFlipped++;
 
+        // Announce the card unless it's the last one and it's correct
+        var isMatched = (flipped === mate);
+        var isLast = ((removed + 2) === cards.length);
+        card.updateLabel(isMatched, !(isMatched && isLast));
+
         if (flipped !== undefined) {
           var matie = flipped;
           // Reset the flipped card.
@@ -220,6 +261,72 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         counter.increment();
       });
 
+      /**
+       * Create event handler for moving focus to the next or the previous
+       * card on the table.
+       *
+       * @private
+       * @param {number} direction +1/-1
+       * @return {function}
+       */
+      var createCardChangeFocusHandler = function (direction) {
+        return function () {
+          // Locate next card
+          for (var i = 0; i < cards.length; i++) {
+            if (cards[i] === card) {
+              // Found current card
+
+              var nextCard, fails = 0;
+              do {
+                fails++;
+                nextCard = cards[i + (direction * fails)];
+                if (!nextCard) {
+                  return; // No more cards
+                }
+              }
+              while (nextCard.isRemoved());
+
+              card.makeUntabbable();
+              nextCard.setFocus();
+
+              return;
+            }
+          }
+        };
+      };
+
+      // Register handlers for moving focus to next and previous card
+      card.on('next', createCardChangeFocusHandler(1));
+      card.on('prev', createCardChangeFocusHandler(-1));
+
+      /**
+       * Create event handler for moving focus to the first or the last card
+       * on the table.
+       *
+       * @private
+       * @param {number} direction +1/-1
+       * @return {function}
+       */
+      var createEndCardFocusHandler = function (direction) {
+        return function () {
+          var focusSet = false;
+          for (var i = 0; i < cards.length; i++) {
+            var j = (direction === -1 ? cards.length - (i + 1) : i);
+            if (!focusSet && !cards[j].isRemoved()) {
+              cards[j].setFocus();
+              focusSet = true;
+            }
+            else if (cards[j] === card) {
+              card.makeUntabbable();
+            }
+          }
+        };
+      };
+
+      // Register handlers for moving focus to first and last card
+      card.on('first', createEndCardFocusHandler(1));
+      card.on('last', createEndCardFocusHandler(-1));
+
       cards.push(card);
     };
 
@@ -277,16 +384,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
-        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles);
           cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
         }
 
         // Add cards to card list for shuffeling
@@ -310,25 +417,45 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       }
 
       // Add cards to list
-      var $list = $('<ul/>');
+      var $list = $('<ul/>', {
+        role: 'application',
+        'aria-labelledby': 'h5p-intro-' + numInstances
+      });
       for (var i = 0; i < cards.length; i++) {
         cards[i].appendTo($list);
       }
+      cards[0].makeTabbable();
 
       if ($list.children().length) {
+        $('<div/>', {
+          id: 'h5p-intro-' + numInstances,
+          'class': 'h5p-memory-hidden-read',
+          html: parameters.l10n.label,
+          appendTo: $container
+        });
         $list.appendTo($container);
 
-        $feedback = $('<div class="h5p-feedback">' + parameters.l10n.feedback + '</div>').appendTo($container);
+        $bottom = $('<div/>', {
+          tabindex: '-1',
+          appendTo: $container
+        });
+        $taskComplete = $('<div/>', {
+          'class': 'h5p-memory-complete h5p-memory-hidden-read',
+          html: parameters.l10n.done,
+          appendTo: $bottom
+        });
+
+        $feedback = $('<div class="h5p-feedback">' + parameters.l10n.feedback + '</div>').appendTo($bottom);
 
         // Add status bar
         var $status = $('<dl class="h5p-status">' +
-                        '<dt>' + parameters.l10n.timeSpent + '</dt>' +
+                        '<dt>' + parameters.l10n.timeSpent + ':</dt>' +
-                        '<dd class="h5p-time-spent">0:00</dd>' +
+                        '<dd class="h5p-time-spent"><time role="timer" datetime="PT0M0S">0:00</time><span class="h5p-memory-hidden-read">.</span></dd>' +
-                        '<dt>' + parameters.l10n.cardTurns + '</dt>' +
+                        '<dt>' + parameters.l10n.cardTurns + ':</dt>' +
-                        '<dd class="h5p-card-turns">0</dd>' +
+                        '<dd class="h5p-card-turns">0<span class="h5p-memory-hidden-read">.</span></dd>' +
-                        '</dl>').appendTo($container);
+                        '</dl>').appendTo($bottom);
 
-        timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
+        timer = new MemoryGame.Timer($status.find('time')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
         popup = new MemoryGame.Popup($container, parameters.l10n);
 

popup.js

@@ -13,16 +13,16 @@
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop" role="dialog"><div class="h5p-memory-top"></div><div class="h5p-memory-desc" tabindex="-1"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
     // Hook up the close button
     $popup.find('.h5p-memory-close').on('click', function () {
-      self.close();
+      self.close(true);
     }).on('keypress', function (event) {
       if (event.which === 13 || event.which === 32) {
-        self.close();
+        self.close(true);
         event.preventDefault();
       }
     });
@@ -41,22 +41,26 @@
         $('<div class="h5p-memory-image"' + (styles ? styles : '') + '></div>').append(imgs[i]).appendTo($top);
       }
       $popup.show();
+      $desc.focus();
       closed = done;
     };
 
     /**
      * Close the popup.
+     *
+     * @param {boolean} refocus Sets focus after closing the dialog
      */
-    self.close = function () {
+    self.close = function (refocus) {
       if (closed !== undefined) {
         $popup.hide();
-        closed();
+        closed(refocus);
         closed = undefined;
       }
     };
 
     /**
      * Sets popup size relative to the card size
+     *
      * @param {number} fontSize
      */
     self.setSize = function (fontSize) {

semantics.json

@@ -26,6 +26,13 @@
           "importance": "high",
           "ratio": 1
         },
+        {
+          "name": "imageAlt",
+          "type": "text",
+          "label": "Alternative text for Image",
+          "importance": "high",
+          "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+        },
         {
           "name": "match",
           "type": "image",
@@ -35,6 +42,14 @@
           "description": "An optional image to match against instead of using two cards with the same image.",
           "ratio": 1
         },
+        {
+          "name": "matchAlt",
+          "type": "text",
+          "label": "Alternative text for Matching Image",
+          "importance": "low",
+          "optional": true,
+          "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+        },
         {
           "name": "description",
           "type": "text",
@@ -146,7 +161,7 @@
         "importance": "low",
         "name": "tryAgain",
         "type": "text",
-        "default": "Try again?"
+        "default": "Reset"
       },
       {
         "label": "Close button label",
@@ -154,6 +169,41 @@
         "name": "closeLabel",
         "type": "text",
         "default": "Close"
+      },
+      {
+        "label": "Game label",
+        "importance": "low",
+        "name": "label",
+        "type": "text",
+        "default": "Memory Game. Find the matching cards."
+      },
+      {
+        "label": "Game finished label",
+        "importance": "low",
+        "name": "done",
+        "type": "text",
+        "default": "All of the cards have been found."
+      },
+      {
+        "label": "Card indexing label",
+        "importance": "low",
+        "name": "cardPrefix",
+        "type": "text",
+        "default": "Card %num:"
+      },
+      {
+        "label": "Card unturned label",
+        "importance": "low",
+        "name": "cardUnturned",
+        "type": "text",
+        "default": "Unturned."
+      },
+      {
+        "label": "Card matched label",
+        "importance": "low",
+        "name": "cardMatched",
+        "type": "text",
+        "default": "Match found."
       }
     ]
   }

timer.js

@@ -28,6 +28,11 @@
 
       var minutes = Timer.extractTimeElement(time, 'minutes');
       var seconds = Timer.extractTimeElement(time, 'seconds') % 60;
+
+      // Update duration attribute
+      element.setAttribute('datetime', 'PT' + minutes + 'M' + seconds + 'S');
+
+      // Add leading zero
       if (seconds < 10) {
         seconds = '0' + seconds;
       }