Hidden table header example

This table has the following features

• The "Visible" table header which is intended to remain static is hidden from AT using aria-hidden="true" and role="presentation"
• The Screen reader table header is hidden off-screen
• The Links (intended to enable sorting - not functional in this example) are made non-focusable in the "Visible" header using tabindex=-1
• The focusable links are off-screen so we use JavaScript to simulate a focus on the "visible" header
• onclick events to do the sorting are needed on both headers

The aim of this is to avoid using role="grid" for a table as we don't want to create a fully interactive table and want to rely on the screen-readers table modes to interact with the tables