Resources Page Table Layout Accessibility improvements

[StephDriver]

From #329

The Problem

on mobile, this ends up being too wide for the screen even though it changes column size, such that it cannot be read without scrolling the screen. This seems to be because there is a right side boarder to the white rectangular text block - that then requires the text block itself to be scrolled horizontally.

this may be more navigable with assistive tech if there was a row header cell defined (all row cells are currently td, no th except in the header itself). The first column: 'name', which is also a link to the resource in question and therefore unique would seem to be a good candidate for becoming a row header.

is this really a data-table within the meaning of the WCAG or is it a layout preference and so shouldn't be done as a table?

Tasks

• [ ] is this a data-table or a layout preference? should table syntax even be used?
  • [ ] if table, then define the header cells for both rows and columns. Each item in the table should make sense if read as: "column header, row header, data cell". Without row and column header cells, this is not possible.
  • [ ] if not a table, then reformat without table syntax.
• [ ] ensure new layout works on mobiles (narrow windows).

[StephDriver]

also review tables in https://www.openlibhums.org/plugins/supporters/site/library-partnership-fees/ for row & column headers.