Use CSS & JavaScript to show a possible solution for scrollable tables

content/index.md

@@ -14,6 +14,44 @@ footer: >
   <p>Developed by the Education and Outreach Working Group (<a href="http://www.w3.org/WAI/EO/">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide Project</a> funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).</p>
 navigation:
   next: /curricula/introduction-to-web-accessibility/
+inline_css: |
+  .tablewrapper>div {
+    overflow-x: scroll;
+  }
+  .tablewrapper>div {
+    position:relative;
+  }
+  .tablewrapper:before {
+    display: block;
+    content: "Scroll to see the full table. ↔";
+    text-align: right;
+    font-weight: bold;
+  }
+  .tablewrapper>div {
+    background-image: 
+      linear-gradient(to right, var(--line-grey), rgba(255,255,255,0)), 
+      linear-gradient(to left, var(--line-grey), rgba(255,255,255,0));
+    background-size: 1rem, 1rem;
+    background-repeat: repeat-y, repeat-y;
+    background-position: left, right;
+  }
+  .tablewrapper.scrolled-to-right>div {
+    background-image: 
+      linear-gradient(to right, var(--line-grey), rgba(255,255,255,0));
+    background-size: 1rem;
+    background-repeat: repeat-y;
+    background-position: left;
+  }
+  .tablewrapper.scrolled-to-left>div {
+    background-image: 
+      linear-gradient(to left, var(--line-grey), rgba(255,255,255,0));
+    background-size: 1rem;
+    background-repeat: repeat-y;
+    background-position: right;
+  }
+  .tablewrapper table {
+    mix-blend-mode: multiply;
+  }
 ---
 
 ## Introduction
@@ -52,7 +90,9 @@ Each curriculum also specifies competencies that students are expected to have p
 
 The table below shows ideas for future curricula. When completed, they will be linked from here. Currently only the first curriculum "Introduction to Web accessibility" is available. 
 
-<table caption="Tentative Outline" class="dense">
+<div class="tablewrapper scrolled-to-left">
+<div>
+<table caption="Tentative Outline" aria-describedby="tablesummary">
   <tbody>
     <tr>
       <th> </th>
@@ -155,3 +195,34 @@ The table below shows ideas for future curricula. When completed, they will be l
     </tr>
   </tbody>
 </table>
+</div>
+</div>
+<p id="tablesummary">Rows refer to three levels: basic, intermediate, and advanced. Columns refer to five roles: developer, designer, author, manager, and tester.</p>
+
+<script>
+// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  if (scroll_pos > 10) {
+    document.querySelector('.tablewrapper').classList.remove('scrolled-to-left');
+  } else {
+    document.querySelector('.tablewrapper').classList.add('scrolled-to-left');
+  }
+}
+
+document.querySelector('.tablewrapper>div').addEventListener('scroll', function(e) {
+  last_known_scroll_position = document.querySelector('.tablewrapper>div').scrollLeft;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});
+</script>