├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Accessible and Responsive tables
2 |
3 | Prototype application to create accessible and responsive tables.
4 | https://fenwick17.github.io/responsive-accessible-table/
5 |
6 | ## Use case
7 | This is suitable for all tables where row is more important than the column. This should not be used when columns are more important
8 |
9 | ## How it works
10 | On mobile it collapses each table row into its own section. This will appear with the column heading on the left, and the value on the right. The behaviour through a screenreader will be exactly the same as that of the desktop version.
11 | Each element has a role assigned to it, which allows the mobile version to keep table behaviour as it would be on desktop when using a screenreader.
12 | The table has been tested by various HMRC members, as well as someone who is visually impaired and uses a screenreader daily on a variety of devices.
13 |
14 | [Blog post with step by step guidance](https://www.afenwick.com/blog/2021/responsive-accessible-table/)
15 |
16 | ## Steps to install
17 | `npm install`
18 | `npm start`
19 |
20 | | Screen reader | Tested |
21 | | ------------- | :------:|
22 | | VoiceOver | ✔|
23 | | JAWS | ✔|
24 | | NVDA | ✔|
25 | | TalkBack | ✔|
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |