Developing Accessible and Responsive Tables with CSS and JavaScript

4 min readMar 22, 2024

In the realm of web development, ensuring the accessibility and responsiveness of data tables is crucial for delivering content that is not only universally readable but also functional across a broad spectrum of devices. Tables are a fundamental element for displaying structured data, but they often pose challenges when it comes to smaller screens and accessibility devices. This article explores techniques that leverage CSS and JavaScript to make data tables both accessible and responsive, ensuring that all users, regardless of device or ability, can interact with your data effectively.

Embracing Accessibility in Tables

Accessibility in web design ensures that users with disabilities can perceive, understand, navigate, and interact with websites and tools. For tables, this means enabling screen readers and other assistive technologies to accurately interpret and convey information contained within them.

Semantic HTML for Screen Readers

Begin with semantic HTML to ensure your tables are accessible. Use the <table>, <th>, and <caption> elements appropriately to define the structure of your table, headings, and its description, respectively.

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widgets</td>
      <td>50</td>
      <td>$1,000</td>
    </tr>
    <!-- Additional rows -->
  </tbody>
</table>

ARIA Roles and Attributes

Accessible Rich Internet Applications (ARIA) roles and attributes offer additional detail to assistive technologies about the roles and states of web elements. For tables, using role="table" or role="grid" can enhance the way a screen reader interprets the data.

Enhancing Responsiveness with CSS

With the foundation for accessibility laid, the next challenge is ensuring your tables look great and remain functional on any screen size.

Overflow Containers

One simple technique is to wrap your table in a div with overflow-x: auto;. This method allows the table to maintain its natural layout while providing a horizontal scrollbar for smaller screens.

.table-container {
  overflow-x: auto;
}

Responsive Grid Layout

For a more advanced solution, use CSS Grid to transform the table into a more responsive format. This involves hiding the table headers and displaying each row as a grid, ensuring the data is readable on small screens.

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    position: relative;
    padding-left: 50%;
    text-align: right;
  }
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }
  /* Label the data */
  td:nth-of-type(1):before { content: "Product"; }
  td:nth-of-type(2):before { content: "Quantity"; }
  td:nth-of-type(3):before { content: "Sales"; }
}

Leveraging JavaScript for Interactivity

To further improve the user experience, JavaScript can be used to dynamically adjust tables based on user interactions or screen sizes.

Sorting and Filtering

Implementing sorting and filtering functions allows users to navigate large tables efficiently. Event listeners can be added to table headers to trigger sorting functions, while input fields can serve as filters to hide or show relevant rows based on user queries.

Collapsible Sections

For very large tables, JavaScript can be used to create collapsible sections. This allows users to focus on the most relevant information, expanding sections as needed.

Convenient hosting for your WordPress sites

Looking for good hosting for your WordPress sites? Pay attention to Host4Biz. It is a reliable hosting with modern servers in Europe and a Ukrainian team.

And with the promo code MYHOST10 you will get a 10% discount on your first payment. To do this, register here and enter the code before paying.

Another great option for WordPress hosting is Hostinger. Register your account via the link https://hostinger.com.ua?REFERRALCODE=1VOLODYMYR55 and follow updates in my blog

Conclusion

Developing accessible and responsive tables with CSS and JavaScript is essential for creating inclusive and user-friendly web experiences. By starting with a solid foundation of semantic HTML and enhancing functionality and layout with CSS and JavaScript, developers can ensure that their data tables are not only accessible to users with disabilities but also adaptable to any screen size or device. This dual focus on accessibility and responsiveness not only improves the user experience but also aligns with best practices in web development, making your website more appealing to a broader audience.

Note: There are affiliate links in the link given above and if you buy something, I’ll get a commission at no extra cost to you.