html-css-review: Add description for table background for accessibility

mentoring/table.py

@@ -23,6 +23,7 @@
 
 # Imports ###########################################################
 
+import errno
 import logging
 
 from xblock.core import XBlock
@@ -56,11 +57,21 @@ class MentoringTableBlock(XBlock, XBlockWithChildrenFragmentsMixin):
         # TODO: What's the right way to link to images from CSS? This hack won't work in prod
         bg_image_url = self.runtime.resources_url('mentoring/img/{}-bg.png'.format(self.type))
 
+        # Load an optional description for the background image, for accessibility
+        try:
+            bg_image_description = load_resource('static/text/table-{}.txt'.format(self.type))
+        except IOError as e:
+            if e.errno == errno.ENOENT:
+                bg_image_description = ''
+            else:
+                raise
+
         fragment.add_content(render_template('templates/html/mentoring-table.html', {
             'self': self,
             'columns_frags': columns_frags,
             'header_frags': header_frags,
             'bg_image_url': bg_image_url,
+            'bg_image_description': bg_image_description,
         }))
         fragment.add_css(load_resource('static/css/mentoring-table.css'))
         fragment.add_javascript(load_resource('static/js/vendor/jquery.shorten.js'))

static/css/mentoring-table.css

@@ -35,3 +35,15 @@
 .mentoring-table h3, .mentoring-table h4 {
     margin: 0 0 5px;
 }
+
+/* Hidden elements - Screenreaders */
+.mentoring-table .cont-text-sr {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

static/text/table-immunity-map-assumptions.txt

+On the table background, an arrow goes from column 1 (My Improvement Goal), to
+column 3 (My Hidden Commitments). A second arrow goes back from column 3 to
+column 1. A third arrow goes from column 4 (My Big Assumptions) to column 3.

static/text/table-immunity-map.txt

+On the table background, an arrow goes from column 1 (My Improvement Goal), to
+column 3 (My Hidden Commitments). A second arrow goes back from column 3 to
+column 1.

templates/html/mentoring-table.html

 <div class="mentoring-table {{ self.type }}" style="background-image: url({{ bg_image_url }})">
+  <div class="cont-text-sr">{{ bg_image_description }}</div>
   <table>
     {% if header_frags %}
     <thead>