Geek Answers Handbook

Subtitles in tables: accessibility and patterns

This is hard to explain, so here is a pen where you can see all the examples.

What is better for accessibility?

Option 1

<table> <thead> <tr> <th>Thing 1</th> <th>Thing 2</th> <th colspan=2>Thing 3</th> <th>Thing 4</th> <th colspan=2>Thing 5</th> <th>Thing 6</th> <th>Thing 7</th> </tr> </thead> <tbody> <tr> <td rowspan=2>40</td> <td rowspan=2>30</td> <th>Right</th> <th>Left</th> <td rowspan=2>50</td> <th>Right</th> <th>Left</th> <td rowspan=2>25</td> <td rowspan=2>30</td> </tr> <tr> <td>10</td> <td>20</td> <td>15</td> <td>40</td> </tr> </tbody> </table>

Option 2

 <table> <thead> <tr> <th>Thing 1</th> <th>Thing 2</th> <th colspan=2>Thing 3</th> <th>Thing 4</th> <th colspan=2>Thing 5</th> <th>Thing 6</th> <th>Thing 7</th> </tr> <tr> <th colspan=2></th> <th>Right</th> <th>Left</th> <th></th> <th>Right</th> <th>Left</th> <th colspan=2></th> </tr> </thead> <tbody> <tr> <td>40</td> <td>30</td> <td>10</td> <td>20</td> <td>50</td> <td>15</td> <td>40</td> <td>25</td> <td>30</td> </tr> </tbody> </table>

If the sub values ​​(left and right) are equal, they should be displayed as follows:

 <table> <thead> <tr> <th>Thing 1</th> <th>Thing 2</th> <th>Thing 3s</th> <th>Thing 4</th> <th>Thing 5s</th> <th>Thing 6</th> <th>Thing 7</th> </tr> </thead> <tbody> <tr> <td>40</td> <td>30</td> <td>10</td> <td>50</td> <td>15</td> <td>25</td> <td>30</td> </tr> </tbody> </table>
Or that:
 <table> <thead> <tr> <th>Thing 1</th> <th>Thing 2</th> <th colspan=2>Thing 3</th> <th>Thing 4</th> <th>Thing 5s</th> <th>Thing 6</th> <th>Thing 7</th> </tr> <tr> <th colspan=2></th> <th>Right</th> <th>Left</th> <th colspan=5></th> </tr> </thead> <tbody> <tr> <td>40</td> <td>30</td> <td>10</td> <td>20</td> <td>50</td> <td>15</td> <td>25</td> <td>30</td> </tr> </tbody> </table>
Or that:
 <table> <thead> <tr> <th>Thing 1</th> <th>Thing 2</th> <th>Thing 3s</th> <th>Thing 4</th> <th colspan=2>Thing 5</th> <th>Thing 6</th> <th>Thing 7</th> </tr> </thead> <tbody> <tr> <td rowspan=2>40</td> <td rowspan=2>30</td> <td rowspan=2>10</td> <td rowspan=2>50</td> <th>Right</th> <th>Left</th> <td rowspan=2>25</td> <td rowspan=2>30</td> </tr> <tr> <td>15</td> <td>40</td> </tr> </tbody> </table>

Et cetera.

How can this be effectively fixed?

Since the tables are given by a horizontal line in the markup, you need to sprinkle the logic for changing the columns through all tr s:

Pseudo-code ERB

thing3() and thing5() return true if thing3right != thing3left

  % table
   % thead
     % tr
       % th thing 1
       % th thing 2
       - if thing3 ()
         % th thing 3
       - else
         % th {: colspan => "2"} Thing 3s
       % th thing 4
       - if thing5 ()
         % th thing 5
       - else
         % th {: colspan => "2"} Thing 5s
       % th thing 6
       % th thing 7
     - if! thing3 () or! thing5 ()
       % tr.subcategory
         - if! thing3 () &&! thing5 ()
           % th {: colspan => "2"}
           % th Right
           % th Left
           % th
           % th Right
           % th Left
           % th {: colspan => "2"}
         - elsif thing3 () &&! thing5 ()
           % th {: colspan => "4"}
           % th Right
           % th Left
           % th {: colspan => "2"}
         - elsif! thing3 () && thing5 ()
           % th {: colspan => "2"}
           % th Right
           % th Left
           % th {: colspan => "4"}
   % tbody
     % tr
       % td = @ whatever.thing1
       % td = @ whatever.thing2
       % td = @ whatever.thing3right
       - if! thing3 ()
         % td = @ whatever.thing3left
       % td = @ whatever.thing4
       % td = @ whatever.thing5right
       - if! thing5 ()
         % td = @ whatever.thing5left
       % td = @ whatever.thing6
       % td = @ whatever.thing7

This works, but it is very difficult to use and update. It becomes exponentially more complex with every column that has subcategories.

How can I display this data in an accessible form, which can also be planned in an extensible and easily updated form?

+6
source share
1 answer

If I understand correctly, you will want to use colspan and rowspan in the table headers; this will make them accessible and require some of the efforts that you create them dynamically. Regarding templates, you have an idea of ​​what data will be returned, so see if you can add some of the most common ones, and then create from this template (s). I modified the code shop with an example, all this at the bottom.

http://codepen.io/jalbertbowden/pen/epgxs

+6
source

More articles:


All Articles