Accessible Responsive Tables

The two tables below look exactly the same at the desktop breakpoint. The difference is that the second one is adds some in-context headers at the small screen break point and remains accessible, despite changing the display properties from table to block for responsiveness.

Inaccessible Responsive Markup

Name Rank Age Description
Nelson Mandela 1 95 Former political prisoner who upon his release was elected president of South Africa in 1994.
Steve Nash 2 39 NBA legend who won the MVP in 2005 and 2006 with the Phoenix Suns, and played in eight NBA All-Star games.

Accessible Responsive Markup

Name Rank Age Description
Name Nelson Mandela Rank 1 Age 95 Description Former political prisoner who upon his release was elected president of South Africa in 1994.
Name Steve Nash Rank 2 Age 39 Description NBA legend who won the MVP in 2005 and 2006 with the Phoenix Suns, and played in eight NBA All-Star games.