├── 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 | 4 | 5 | 6 | Responsive accessible table 7 | 8 | 9 | 10 |
11 |

Responsive accessible table

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
My top 6 favourite movies
TitleRelease yearGenreDirectorIMDb rating
Jurassic Park1993Action, Adventure, Sci-FiSteven Spielberg8.1 out of 10
Halloween1978HorrorJohn Carpenter7.8 out of 10
Saw2004HorrorJames Wan7.6 out of 10
The Lord of the Rings: The Two Towers2002AdventurePeter Jackson8.7 out of 10
Anchorman: The Legend of Ron Burgundy2004ComedyAdam McKay7.2 out of 10
Train to Busan2016HorrorSang-ho Yeonn7.6 out of 10
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: auto; 3 | max-width: 960px; 4 | } 5 | 6 | /* Standard table styling, change as desired */ 7 | table { 8 | border-collapse: collapse; 9 | border-spacing: 0; 10 | } 11 | 12 | caption { 13 | font-size: 24px; 14 | font-weight: 700; 15 | text-align: left; 16 | } 17 | 18 | th { 19 | border-bottom: 1px solid #bfc1c3; 20 | font-size: 19px; 21 | padding: 0.5em 1em 0.5em 0; 22 | text-align: left; 23 | } 24 | 25 | td { 26 | border-bottom: 1px solid #bfc1c3; 27 | font-size: 19px; 28 | padding: 0.5em 1em 0.5em 0; 29 | } 30 | 31 | /* Responsive table styling */ 32 | .responsive-table { 33 | margin-bottom: 0; 34 | width: 100%; 35 | } 36 | 37 | thead { 38 | border: 0; 39 | clip: rect(0 0 0 0); 40 | -webkit-clip-path: inset(50%); 41 | clip-path: inset(50%); 42 | height: 1px; 43 | margin: 0; 44 | overflow: hidden; 45 | padding: 0; 46 | position: absolute; 47 | white-space: nowrap; 48 | width: 1px; 49 | } 50 | 51 | tbody tr { 52 | display: block; 53 | margin-bottom: 1.5em; 54 | padding: 0 0.5em; 55 | } 56 | 57 | tbody tr td { 58 | display: block; /* browsers that don't support flex */ 59 | display: flex; 60 | justify-content: space-between; 61 | min-width: 1px; 62 | text-align: right; 63 | } 64 | 65 | @media all and (-ms-high-contrast: none) { /* IE11 flex fix */ 66 | tbody tr td { 67 | display: block; 68 | } 69 | } 70 | 71 | .responsive-table__heading { 72 | font-weight: 700; 73 | padding-right: 1em; 74 | text-align: left; 75 | word-break: initial; 76 | } 77 | 78 | @media (max-width: 768px) { 79 | tbody tr td { 80 | padding-right: 0; 81 | } 82 | tbody tr td:last-child { 83 | border-bottom: 0; 84 | } 85 | tbody tr { 86 | border-bottom: 3px solid grey; 87 | } 88 | } 89 | 90 | @media (min-width: 769px) { 91 | thead { 92 | clip: auto; 93 | -webkit-clip-path: none; 94 | clip-path: none; 95 | display: table-header-group; 96 | height: auto; 97 | overflow: auto; 98 | position: relative; 99 | width: auto; 100 | } 101 | 102 | tbody tr { 103 | display: table-row; 104 | } 105 | 106 | tbody tr td { 107 | display: table-cell; 108 | text-align: left; 109 | } 110 | 111 | .responsive-table__heading { 112 | display: none; 113 | } 114 | } 115 | --------------------------------------------------------------------------------