508 Compliant Tables

551
14
Jump to solution
03-03-2020 10:39 AM
BryanHemmer
Occasional Contributor III

We would like to build HTML tables in builder and I know the subject of HTML/CSS editing has been brought up ad nauseam by me but a co-worker had a question. Will there be a way to build 508 compliant tables that can be read with screen readers? Simply embedding an image of a table does not carry the table data along with it, and alt text solution describing the table seems arduous.

0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Frequent Contributor

Hi Bryan -- We don't have adding tables on our short term roadmap, but we have discussed it. Can you provide a little more information about the tables your colleague wants to add? Does the table have numeric information or text? How many rows/columns would the table typically have? What formatting options would be desired for the table (row shading/color, text size, etc)?

Currently, you can embed a web-based spreadsheet or even just a simple HTML page with just a table hosted on a web server or web hosting service.

Owen

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

14 Replies
OwenGeo
Esri Frequent Contributor

Hi Bryan -- We don't have adding tables on our short term roadmap, but we have discussed it. Can you provide a little more information about the tables your colleague wants to add? Does the table have numeric information or text? How many rows/columns would the table typically have? What formatting options would be desired for the table (row shading/color, text size, etc)?

Currently, you can embed a web-based spreadsheet or even just a simple HTML page with just a table hosted on a web server or web hosting service.

Owen

Owen Evans
Lead Product Engineer | StoryMaps
BryanHemmer
Occasional Contributor III

Table specs,

  • Numeric and text information (first row more than likely text heading and first column being either text or numeric).
  • At the most 24x24 rows/columns. Anymore than that it gets to be too much.
  • Formatting would be,
    • row shading
    • ability to change text (or numbers) such as font size, applying bold, italic, or underline
    • maybe change color of information but right out of the gate it isn't necessary
    • ability to adjust width and height of cells or an auto-adjust feature

We do not have the ability to host so embedding with an iFrame isn't doable. Thanks for the response Owen!

OwenGeo
Esri Frequent Contributor

Thanks for the requirements, Bryan. Can you also please provide a few examples of what the table would be used for? What specific info might appear in the table, and what role would it play in the story? If you have any links to classic stories or other articles that have this type of info, that would be helpful. This info will help us understand how this feature would be used.

Owen Evans
Lead Product Engineer | StoryMaps
BryanHemmer
Occasional Contributor III

We are moving towards going digital with our reports on forests in various states (examples Minnesota Forests 2013 and  Forests of Minnesota, 2017). Within these reports there are standard tables like these,

or,

These tables also need to be in the new reports. I was able to build a sample table in Journal by editing the source code but like you've said before, that isn't possible. I can paste the code here if that will help but the Journal I use to test ideas and concepts isn't public.

I can't off the top of my head of any classic story maps that utilized that technology. The conversation came up because my colleague was having a meeting with our publication shop about the ability to use HTML tables due to a recent push to increase the accessibility of our apps. As you can see it can prove quite cumbersome to try and describe these tables with alt-text.

OwenGeo
Esri Frequent Contributor

This is helpful and exactly what I was looking for. Thanks for taking the time to provide this additional info. I will document this supporting info along with this feature request.

Owen Evans
Lead Product Engineer | StoryMaps
BryanHemmer
Occasional Contributor III

For giggles did you want the table code I used to make an HTML table in Journal?

0 Kudos
OwenGeo
Esri Frequent Contributor

Couldn't hurt. :)

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
BryanHemmer
Occasional Contributor III

Here is the table,

Common nameNumber (million trees)aNet Volume (million ft3)bAboveground
biomass (thousand tons)a
Average annual
net growth
(thousand ft3)b
Average annual
mortality
(thousand ft3)b
Average annual harvest removals (thousand ft3)b
White oak
(Quercus alba)
49.51,021.728,418.812,498.77,615.23,941.3
Silver maple
(Acer saccharinum)
64.6886.218,570.519,965.315,536.4527.2
Black oak
(Quercus velutina)
36.3636.217,726.36,994.012,107.84,403.2
Northern red oak
(Quercus rubra)
20.9436.312,372.01,793.612,126.42,095.0
Eastern cottonwood
(Populus deltoides)
12.6408.07,503.811,856.64,670.7930.5
Black walnut
(Juglans nigra)
48.5348.78,728.513,840.43,075.5652.5
Shagbark hickory
(Carya ovata)
73.5345.211,503.66,260.72,841.32,443.3
Green ash
(Fraxinus pennsylvanica)
93.9342.49,348.55,652.87,323.92,161.7
Sugar maple
(Acer saccharum)
127.6339.210,441.98,765.51,324.02,995.9
American sycamore
(Platanus occidentalis)
11.5329.36,805.57,119.72,390.2--
Hackberry
(Celtis occidentalis)
145.0317.98,705.112,730.92,980.1569.4
Pignut hickory
(Carya glabra)
35.9310.810,080.65,369.72,340.51,084.3
       

Table 2.—Number, volume, biomass, growth, mortality, and removals of live trees on forest land by species for the top 12 tree species by net volume, Illinois, 2017

Here is the code. When I put this in Journal I get row shading and bolded headers but here it doesn't look like it is applied. But nevertheless here it is,

<style id="Forests_of_Illinois_2017_6203_Styles" type="text/css"><!--table
    {mso-displayed-decimal-separator:"\.";
    mso-displayed-thousand-separator:"\,";}
.sectionsWrapper{
overflow:hidden;
}
#Table2{
overflow-x:scroll;
overflow-y:hidden;
}
.font56203
    {color:windowtext;
    font-size:8.0pt;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;}
.font66203
    {color:windowtext;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;}
.font76203
    {color:windowtext;
    font-size:8.0pt;
    font-weight:400;
    font-style:italic;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;}
.font86203
    {color:windowtext;
    font-size:8.0pt;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;}
.xl656203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:windowtext;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:left;
    vertical-align:bottom;
    background:whitesmoke;
    mso-pattern:black none;
    white-space:normal;}
.xl666203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:windowtext;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:left;
    vertical-align:bottom;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:normal;}
.xl676203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:"0\.0";
    text-align:center;
    vertical-align:middle;
    background:whitesmoke;
    mso-pattern:black none;
    white-space:nowrap;
    mso-text-control:shrinktofit;}
.xl686203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:"\#\,\#\#0\.0";
    text-align:center;
    vertical-align:middle;
    background:whitesmoke;
    mso-pattern:black none;
    white-space:nowrap;
    mso-text-control:shrinktofit;}
.xl696203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:"0\.0";
    text-align:center;
    vertical-align:middle;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:nowrap;
    mso-text-control:shrinktofit;}
.xl706203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:"\#\,\#\#0\.0";
    text-align:center;
    vertical-align:middle;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:nowrap;
    mso-text-control:shrinktofit;}
.xl716203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:windowtext;
    font-size:8.0pt;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:left;
    vertical-align:bottom;
    border-top:.5pt solid #E1E1E1;
    border-right:none;
    border-bottom:none;
    border-left:none;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:normal;}
.xl726203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:left;
    vertical-align:bottom;
    border-top:.5pt solid #E1E1E1;
    border-right:none;
    border-bottom:none;
    border-left:none;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:normal;}
.xl736203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:left;
    vertical-align:bottom;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:nowrap;}
.xl746203
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:windowtext;
    font-size:8.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    mso-font-charset:0;
    mso-number-format:General;
    text-align:center;
    vertical-align:middle;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:normal;}
-->
</style>
<div id="Table2">
<table border="0" cellpadding="0" cellspacing="0" class="xl736203" width="721">
    <tbody>
        <tr height="45">
            <td class="xl716203" height="45" width="143">Common name</td>
            <td class="xl726203" width="87">Number (million trees)<sup>a</sup></td>
            <td class="xl716203" width="92">Net Volume (million ft<sup>3</sup>)<sup>b</sup></td>
            <td class="xl716203" width="104">Aboveground<br />
            biomass (thousand tons)<sup>a</sup></td>
            <td class="xl716203" width="93">Average annual<br />
            net growth<br />
            (thousand ft<sup>3</sup>)<sup>b</sup></td>
            <td class="xl716203" width="93">Average annual<br />
            mortality<br />
            (thousand ft<sup>3</sup>)<sup>b</sup></td>
            <td class="xl726203" width="109">Average annual harvest removals (thousand ft<sup>3</sup>)<sup>b</sup></td>
        </tr>
        <tr height="30">
            <td class="xl656203" height="30" width="143">White oak<br />
            (Quercus alba)</td>
            <td class="xl676203">49.5</td>
            <td class="xl686203">1,021.7</td>
            <td class="xl686203">28,418.8</td>
            <td class="xl686203">12,498.7</td>
            <td class="xl686203">7,615.2</td>
            <td class="xl686203">3,941.3</td>
        </tr>
        <tr height="30">
            <td class="xl666203" height="30" width="143">Silver maple<br />
            (Acer saccharinum)</td>
            <td class="xl696203">64.6</td>
            <td class="xl696203">886.2</td>
            <td class="xl706203">18,570.5</td>
            <td class="xl706203">19,965.3</td>
            <td class="xl706203">15,536.4</td>
            <td class="xl696203">527.2</td>
        </tr>
        <tr height="30">
            <td class="xl656203" height="30" width="143">Black oak<br />
            (Quercus velutina)</td>
            <td class="xl676203">36.3</td>
            <td class="xl676203">636.2</td>
            <td class="xl686203">17,726.3</td>
            <td class="xl686203">6,994.0</td>
            <td class="xl686203">12,107.8</td>
            <td class="xl686203">4,403.2</td>
        </tr>
        <tr height="30">
            <td class="xl666203" height="30" width="143">Northern red oak<br />
            (Quercus rubra)</td>
            <td class="xl696203">20.9</td>
            <td class="xl696203">436.3</td>
            <td class="xl706203">12,372.0</td>
            <td class="xl706203">1,793.6</td>
            <td class="xl706203">12,126.4</td>
            <td class="xl706203">2,095.0</td>
        </tr>
        <tr height="30">
            <td class="xl656203" height="30" width="143">Eastern cottonwood<br />
            (Populus deltoides)</td>
            <td class="xl676203">12.6</td>
            <td class="xl676203">408.0</td>
            <td class="xl686203">7,503.8</td>
            <td class="xl686203">11,856.6</td>
            <td class="xl686203">4,670.7</td>
            <td class="xl676203">930.5</td>
        </tr>
        <tr height="30">
            <td class="xl666203" height="30" width="143">Black walnut<br />
            (Juglans nigra)</td>
            <td class="xl696203">48.5</td>
            <td class="xl696203">348.7</td>
            <td class="xl706203">8,728.5</td>
            <td class="xl706203">13,840.4</td>
            <td class="xl706203">3,075.5</td>
            <td class="xl696203">652.5</td>
        </tr>
        <tr height="30">
            <td class="xl656203" height="30" width="143">Shagbark hickory<br />
            (Carya ovata)</td>
            <td class="xl676203">73.5</td>
            <td class="xl676203">345.2</td>
            <td class="xl686203">11,503.6</td>
            <td class="xl686203">6,260.7</td>
            <td class="xl686203">2,841.3</td>
            <td class="xl686203">2,443.3</td>
        </tr>
        <tr height="30">
            <td class="xl666203" height="30" width="143">Green ash<br />
            (Fraxinus pennsylvanica)</td>
            <td class="xl696203">93.9</td>
            <td class="xl696203">342.4</td>
            <td class="xl706203">9,348.5</td>
            <td class="xl706203">5,652.8</td>
            <td class="xl706203">7,323.9</td>
            <td class="xl706203">2,161.7</td>
        </tr>
        <tr height="30">
            <td class="xl656203" height="30" width="143">Sugar maple<br />
            (Acer saccharum)</td>
            <td class="xl676203">127.6</td>
            <td class="xl676203">339.2</td>
            <td class="xl686203">10,441.9</td>
            <td class="xl686203">8,765.5</td>
            <td class="xl686203">1,324.0</td>
            <td class="xl686203">2,995.9</td>
        </tr>
        <tr height="30">
            <td class="xl666203" height="30" width="143">American sycamore<br />
            (Platanus occidentalis)</td>
            <td class="xl696203">11.5</td>
            <td class="xl696203">329.3</td>
            <td class="xl706203">6,805.5</td>
            <td class="xl706203">7,119.7</td>
            <td class="xl706203">2,390.2</td>
            <td class="xl746203" width="109">--</td>
        </tr>
        <tr height="30">
            <td class="xl656203" height="30" width="143">Hackberry<br />
            (Celtis occidentalis)</td>
            <td class="xl676203">145.0</td>
            <td class="xl676203">317.9</td>
            <td class="xl686203">8,705.1</td>
            <td class="xl686203">12,730.9</td>
            <td class="xl686203">2,980.1</td>
            <td class="xl676203">569.4</td>
        </tr>
        <tr height="30">
            <td class="xl666203" height="30" width="143">Pignut hickory<br />
            (Carya glabra)</td>
            <td class="xl696203">35.9</td>
            <td class="xl696203">310.8</td>
            <td class="xl706203">10,080.6</td>
            <td class="xl706203">5,369.7</td>
            <td class="xl706203">2,340.5</td>
            <td class="xl706203">1,084.3</td>
        </tr>
        <!--[if supportMisalignedColumns]-->
        <tr height="0">
            <td width="143"> </td>
            <td width="87"> </td>
            <td width="92"> </td>
            <td width="104"> </td>
            <td width="93"> </td>
            <td width="93"> </td>
            <td width="109"> </td>
        </tr>
        <!--[endif]-->
    </tbody>
</table>
</div>

<p><span style="color:#2F4F4F"><span style="font-size:12px">Table 2.&mdash;Number, volume, biomass, growth, mortality, and removals of live trees on forest land by species for the top 12 tree species by net volume, Illinois, 2017</span></span></p>

0 Kudos
MattiasEkström
Regular Contributor

Hi @OwenGeo 

This thread is about 1,5 yeras old and there's is still no way to add a simple table with just a few columns. Is there any plans on adding support for tables soon?

We really need this, to embed a separat page for just a simple table with 2-3 columns and 5-10 rows isn't really a good option specially when the small-screen-mode doesn't embed content but just links to it.

0 Kudos