Accessibility features

bar.js

@@ -7,7 +7,7 @@ H5P.Chart.BarChart = (function () {
    * @param {array} dataSet
    * @param {H5P.jQuery} $wrapper
    */
-  function BarChart(dataSet, $wrapper) {
+  function BarChart(dataSet, $wrapper, description) {
     var self = this;
 
     var defColors = d3.scale.ordinal()
@@ -29,52 +29,75 @@ H5P.Chart.BarChart = (function () {
       .scale(xScale)
       .orient("bottom")
       .tickFormat(function (d) {
-        return dataSet[d % dataSet.length].text;
+        return dataSet[d % dataSet.length].text + " " + dataSet[d % dataSet.length].value;
+
+      });
+
+    var wrapper = d3.select($wrapper[0]);
+
+    // Create the description link and text of the chart
+    var descriptionLink = wrapper
+      .append("a")
+      .attr("href","javascript:void(0)")
+      .text("Click here to show text description of your chart")
+      .on("click",function(event){
+        H5P.jQuery(this)
+        .next()
+        .slideToggle();
       });
+    var descriptionText = wrapper
+      .append("div")
+      .text(description)
+      .attr("role","alert")
+      .attr("style","display:none");
 
     // Create SVG element
-    var svg = d3.select($wrapper[0])
-      .append("svg");
+    var svg = wrapper
+      .append("svg")
+      .attr("tabindex",0)
+      .attr("aria-label", "Bar chart two");
 
     // Create x axis
     var xAxisG = svg.append("g")
-      .attr("class", "x-axis");
+      .attr("class", "x-axis")
+      .attr("role","list");
 
     /**
      * @private
      */
     var key = function (d) {
       return dataSet.indexOf(d);
     };
+    // Create labels
+    var time = new Date().getTime();
+
 
     // Create rectangles for bars
+
     var rects = svg.selectAll("rect")
       .data(dataSet, key)
       .enter()
       .append("rect")
+      //.attr("aria-labelledby", function(d,i){return time + key(d);})
+      .attr("tabindex", 0)
+      .attr("role","listitem")
       .attr("fill", function(d) {
         if (d.color !== undefined) {
           return '#' + d.color;
         }
         return defColors(dataSet.indexOf(d) % 7);
       });
 
-    // Create labels
-    var texts = svg.selectAll("text")
-      .data(dataSet, key)
-      .enter()
-      .append("text")
-      .text(function(d) {
-        return d.value;
-      })
-      .attr("text-anchor", "middle")
-      .attr("fill", function (d) {
-        if (d.fontColor !== undefined) {
-          return '#' + d.fontColor;
-        }
-        return '#000000';
-      });
-
+      var texts = rects.append("svg:text")
+        .attr("class", "text")
+        .attr("text-anchor", "middle")
+        .text(function(d, i) { return dataSet[i].value + ": " + dataSet[i].text; })
+        .attr("fill", function (d) {
+          if (d.fontColor !== undefined) {
+            return '#' + d.fontColor;
+          }
+          return '#000000';
+        });
     /**
      * Fit the current bar chart to the size of the wrapper.
      */

chart.js

@@ -99,7 +99,7 @@ H5P.Chart = (function ($, EventDispatcher) {
     // Create chart on first attach
     if (self.$wrapper === undefined) {
       self.$wrapper = $('<div/>', {'class': 'h5p-chart-chart h5p-chart-' + self.type.toLowerCase()});
-      self.chart = new H5P.Chart[self.type + 'Chart'](self.params.listOfTypes, self.$wrapper);
+      self.chart = new H5P.Chart[self.type + 'Chart'](self.params.listOfTypes, self.$wrapper,self.params.description);
     }
 
     // Prepare container

pie.js

@@ -7,18 +7,37 @@ H5P.Chart.PieChart = (function () {
    * @param {array} dataSet
    * @param {H5P.jQuery} $wrapper
    */
-  function PieChart(dataSet, $wrapper) {
+  function PieChart(dataSet, $wrapper, description) {
     var self = this;
 
     var defColors = d3.scale.ordinal()
       .range(["#90EE90", "#ADD8E6", "#FFB6C1", "#B0C4DE", "#D3D3D3", "#20B2AA", "#FAFAD2"]);
 
+    var wrapper = d3.select($wrapper[0]);
+
+    // Create the description link and text of the chart
+    var descriptionLink = wrapper
+      .append("a")
+      .attr("href","javascript:void(0)")
+      .text("Click here to show text description of your chart")
+      .on("click",function(event){
+        H5P.jQuery(this)
+        .next()
+        .slideToggle();
+      });
+    var descriptionText = wrapper
+      .append("div")
+      .text(description)
+      .attr("role","alert")
+      .attr("style","display:none");
+
     // Create SVG
-    var svg = d3.select($wrapper[0])
-      .append("svg");
+    var svg = wrapper
+      .append("svg")
+      .attr("aria-label", "Pie Chart: MyTitle");
 
     var translater = svg.append("g")
-      .attr("class", "translater");
+      .attr({"class": "translater", "role":"list"});
 
     var pie = d3.layout.pie()
       .sort(null)
@@ -28,7 +47,7 @@ H5P.Chart.PieChart = (function () {
     var arcs = translater.selectAll(".arc")
       .data(pie(dataSet))
       .enter().append("g")
-      .attr("class", "arc");
+      .attr({"class": "arc", "role": "listitem", "tabindex":0});
 
     var paths = arcs.append("path")
       .style("fill", function(d) {

semantics.json

@@ -57,5 +57,13 @@
         }
       ]
     }
+  },
+  {
+    "label": "Description",
+    "name": "description",
+    "type": "text",
+    "widget": "textarea",
+    "default": "Chart description",
+    "description": "Add the description of the chart."
   }
 ]