Create accessible HTML tables in RStudio?

General
,
3

Hi @betsyrosalen,

It is early days, but I'm in the planning phase of creating a package or a collection of accessible UI components for shiny. (I'm looking for collaborators too!)

The first element I've worked on is a responsive, accessible data table component. The challenge, as you stated, was to make to produce a function that follows good accessible practices and semantic html rules. I also wanted the ability to add attributes for scope when applicable and make it possible to add stricter levels of accessibility for complex layouts (this part is still ongoing). The function datatable produces a a table that follows good accessibility guidelines and semantic HTML practices.

Behind the scenes, there are two helper functions that generate the html markup for the table header and the table body. To make the table more accessible, the header function adds the attribute scope="col" to all headers. The body function renders the first column of every as a header and adds the attribute scope="row". However, this is assuming that the first column contains header information that corresponds to the entire row. I'm still thinking of a more appropriate method for turning this aspect off. If supplied, the function also renders a caption to the table and adjusts aria-* attributes as necessary.

Here's an example using the first two rows iris dataset. You can ignore the data-colname attribute I'm still working on this part.

# in r
datatable(data = iris[1:2,], id="iris", caption = "Iris Dataset")

<table class="datatable" id="datatable-iris" aria-labelledby="datatable-iris-caption">
  <caption id="datatable-iris-caption">Iris Dataset</caption>
  <thead>
    <tr>
      <th scope="col">Sepal.Length</th>
      <th scope="col">Sepal.Width</th>
      <th scope="col">Petal.Length</th>
      <th scope="col">Petal.Width</th>
      <th scope="col">Species</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-colname="Sepal.Length">5.1</th>
      <td data-colname="Sepal.Width">3.5</td>
      <td data-colname="Petal.Length">1.4</td>
      <td data-colname="Petal.Width">0.2</td>
      <td data-colname="Species">setosa</td>
    </tr>
    <tr>
      <th scope="row" data-colname="Sepal.Length">4.9</th>
      <td data-colname="Sepal.Width">3</td>
      <td data-colname="Petal.Length">1.4</td>
      <td data-colname="Petal.Width">0.2</td>
      <td data-colname="Species">setosa</td>
    </tr>
  </tbody>
</table>

Hope that helps!

(Here's the link to the function: https://github.com/davidruvolo51/shinyAppTutorials/blob/master/responsive-datatables/scripts/datatable.R)

EDITS:

I forgot how to save the html markup. Here's a short example

t <- datatable(data = iris, id="iris", caption = "Iris Dataset")
writeLines(as.character(t), "~/Desktop/iris_datatable.html")
1 Like