WiscWeb - Using the wpDataTables Plugin

In this document:

• Activate
• Usage
• Vendor documentation
• Important considerations
• Google Sheets tables
  • Setup
  • Troubleshooting
• Accessibility barriers

Activation

This plugin is not activated in WiscWeb projects by default. However, Administrators can activate it in the project by following the instructions in WiscWeb - Self service plugin activation / deactivation.

Usage

wpDataTables allows you to create tables and charts that you can edit within WordPress or import from Google Sheets (or several other spreadsheet mediums). See the links below for how to perform basic functions, as well as a link to the full documentation.

Vendor documentation

Full vendor Documentation for wpDataTables can be found on their website.

• Creating a table within wpDataTables
• Creating a table from an existing data source (.csv, .xls, Google Sheet)

Important considerations

Please note that when you insert a wpDataTable into a Text Block using the icon within formatting toolbar, you will be presented with a View option for that table.

These views add additional code into the shortcode value, which may cause unintended results regarding the ability to search within your published table.

It is our recommendation to remove the additional "table_view= " code, so that the call is only for the table itself.

Google Sheets tables

Steps for linking a Google Sheet to wpDataTables

There are specific steps that must be followed in order to be able to share a Google Sheet to wpDataTables. If these steps are not followed, your table will not render correctly.

Step 1: Publishing the Google Sheet to the web

1. In your Google Sheet, choose File > Share > Publish to the Web
   
   
   
   
2. Choose the desired settings (Entire Document or just specific tabs)
   
   
   
   
3. Click Publish

Step 2: Copy the Sheet URL and paste into wpDataTables

You must copy the URL in the browser, not the URL listed in the "Publish to the Web" section.

1. In your browser address bar, copy the URL of the Google Sheet
   
   
   
   
2. Make sure that you have a new wpDataTable set up and have chosen to "Create table from existing data source" and click Next
   
   
   
   
3. The Data Source type should be "Google Spreadsheet."
   
   
   
   
4. Paste the URL into the "Input file path or URL" field and click Apply
   
   
   
   

Google Sheets troubleshooting/tips

• It is important to note that Google Sheets that are located in a Team Folder cannot be shared to wpDataTables. Move your document elsewhere in order to link it. 
  
  
• A common issue is that users are trying to copy/paste the shareable URL rather than the URL that appears in the address bar. This will not connect the table and you won't be able to pull in the content. 
  
  
• Several users have reported issues whereby tables with a lot of customizations or functions in Google Sheets can be glitchy or not display at all. It is recommended that you simplify your tables as much as possible so that wpDataTables can render them. Or, try inline styling a table, instead. wpDataTables typically cannot process Google Sheets that contain the following:
  
  
  • merged cells
  • queries/formulas
  • frozen rows
  • colors (background colors in cells and text colors)
  • filterable columns

Accessibility barriers

In May of 2023, the Center for User Experience completed an accessibility evaluation of the wpDataTables plugin. Several accessibility barriers were identified. The issues were immediately reported to the vendor for remediation. However, at this time, the vendor has not committed to changes. 

The following are the known barriers. Where possible, we've provided workarounds or alternative solutions that are more accessible. 

In-table search function

wpDataTables has an option for including an in-page keyword search. For someone navigating the site using a screen reader, this function: 

1. Does not announce that entering text into this field will filter the results of the table.
2. Does not provide the user with any details once the table is actually filtered. 
3. Provides no status update that the search has been performed or results have been found.

The recommendation is to avoid use of this field where possible:

1. Navigate to the Sorting and Filtering tab for the table.
2. Uncheck the box for Enable search block.

No visual indication of keyboard focus in tables

There is no visual indication of keyboard focus as a user navigates through the tables, including the export buttons, sortable heading cells, and search fields. The only indication that happens is a blinking cursor that appears when the user is in a search field.

Horizontal scrolling

For several of the table types, horizontal scrolling is introduced starting at 100% magnification. UW-Madison's accessibility guidance encourages support up to 400% magnification without introducing horizontal scrolling or other magnification barriers. 

The recommendation is to select the option to limit the width of the table and uncheck the option for horizontal scrolling: 

1. Navigate to the Display tab for the table.
2. Select the option to Limit the table width to page width.
3. Select the option to Wrap words to new lines.
4. Make sure the option to Show a horizontal scrollbar is unchecked. 

Placeholder text is low contrast

The placeholder text in the cells used to filter table content is too low contrast to meet WCAG standards.

Unfortunately, there is no alternative recommendation here.

Pagination links

Navigation buttons appear below a table when the table content is split up into several pages. For users navigating the site with a screen reader, these links don’t have very much context. They are announced as “Previous link, 1 link, 2 link, 3 link, Next link." There is help text between the table and the links that describes the displayed content (“Showing 1 to 50 of 137 entries,” for example), and there is a status update when a user selects another page of content (Showing 51 to 100 of 137 entries), so eventually the purpose becomes clear, but out of context the user might not realize the purpose of these navigation links.

The recommendation is to consider removing the pagination of the table: 

1. Navigate to the Display tab for the table.
2. Uncheck the option to Show pagination block below table.