Implement accessibility defaults

CHANGELOG.md

@@ -15,6 +15,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.5.0] - 2022-08-12
+
+### Added
+
+- `templates/__common__/app/scripts/utils/d3-base.js` - add `alttext` parameter for `createBase` for screen reader description.
+- `templates/__common__/config/tasks/nunjucks.js` - add Nunjucks filter ai2html graphic screen reader alttext.
+
+### Changed
+
+- `templates/graphic/app/templates/base.html` - change document title to the graphic's title by default.
+- `templates/graphic/app/templates/graphic-static.html` - apply new Nunjucks filter to ai2html graphics.
+
 ## [7.4.0] - 2022-06-06
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-visuals/create",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "Create graphics and features the Data Visuals way.",
   "scripts": {
     "build:docs": "doctoc README.md --github",

templates/__common__/app/scripts/utils/d3-base.js

@@ -8,6 +8,7 @@ export default function createBase({
   height,
   x,
   y,
+  alttext,
   xAxis = axisBottom(),
   yAxis = axisLeft(),
   xAxisGap = 5,
@@ -29,6 +30,17 @@ export default function createBase({
     .attr('width', containerWidth)
     .attr('height', containerHeight);
 
+  if (!alttext) {
+    console.warn('Alternative text was not provided');
+  } else {
+    svg
+      .attr('role', 'img')
+      .attr('aria-describedby', 'description')
+      .append('desc')
+      .attr('id', 'description')
+      .text(alttext);
+  }
+
   const g = svg
     .append('g')
     .attr('transform', `translate(${margin.left},${margin.top})`);

templates/__common__/config/tasks/nunjucks.js

@@ -149,6 +149,26 @@ env.addGlobal(
 
 env.addFilter('makeArray', input => (Array.isArray(input) ? input : [input]));
 
+/*
+ Adds accessibility tags to ai2html output
+ */
+env.addFilter('addA11yAttributes', (html, alttext) => {
+  return html
+    .replace(
+      /<div id="g-(.+)-box" class="ai2html">/,
+      `<div id="g-$1-box" class="ai2html" aria-describedby="description" role="img">
+        <desc id="description" class="sr-only">${alttext}</desc>`
+    )
+    .replace(
+      /<div id="g-(.+)-664" class="g-artboard"/,
+      '<div id="g-$1-664" class="g-artboard" aria-hidden="true"'
+    )
+    .replace(
+      /<div id="g-(.+)-360" class="g-artboard"/,
+      '<div id="g-$1-360" class="g-artboard" aria-hidden="true"'
+    );
+});
+
 let manifest = null;
 
 env.addGlobal(

templates/graphic/app/templates/base.html

@@ -4,7 +4,13 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>The Texas Tribune</title>
+  <title>
+    {% if graphicTitle %}
+      {{ graphicTitle }}
+    {% else %}
+      The Texas Tribune
+    {% endif %}
+  </title>
   <base target='_parent'>
 
   {% if graphicTitle %}
@@ -33,11 +39,11 @@
 
   <!-- Start fonts -->
   <script>
-  window.WebFontConfig = {
-  google: { families: ['Open Sans:300,400,700'] },
-  timeout: 10000,
-};
-</script>
+    window.WebFontConfig = {
+    google: { families: ['Open Sans:300,400,700'] },
+    timeout: 10000,
+  };
+  </script>
   <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
   <!-- End fonts -->
   <link rel="stylesheet" href="{{ static('styles/main.css') }}">

templates/graphic/app/templates/graphic-static.html

@@ -32,8 +32,12 @@ <h1 class="graphic-title" data-title>{{ context.headline | widont or 'The only m
   <span data-caption>{{ prose(context.prose, context, graphicData) }}</span>
 
   {# add name of your ai2html file here #}
-  {# {% set ai2html = "" %}
-  {% include "ai2html-output/" + ai2html + ".html" %} #}
+  {# remember to uncomment by turning the hashtags into percent signs #}
+
+  {# filter addA11yAttributes(graphicAltText) #}
+  {# set ai2html = "" #}
+  {# include "ai2html-output/" + ai2html + ".html" #}
+  {# endfilter #}
 
   {# data-source and data-credit are also used in the CMS #}
   <ul class="graphic-footer">