Adapting data table to improve web accessibility
Pauli P. Y. Lai · 2013 · Proceedings of the 10th International Cross-Disciplinary Conference on Web Accessibility (W4A) · doi:10.1145/2461121.2461143
Summary
This paper addresses the challenge of making web data tables accessible to screen reader users, particularly when tables are not properly marked up with semantic HTML tags like <th>, <thead>, and <tfoot>. Screen readers present content linearly, so large tables become incomprehensible — users forget the column heading by the time the last row is read. Even in table navigation mode, screen readers fail when tables lack proper markup, and different screen readers handle complex tables (with rowspan, colspan, multiple header rows) inconsistently. The author proposes a method to automatically extract table structure from unstructured tables and reorganise them into hierarchical, multi-level abstractions that users can navigate level by level. The approach works in three stages: first, identifying whether a table is a data table or layout table by measuring visual similarity between cells (Hparallel and Vparallel relationships using CSS properties like font family, size, weight, colour, and background); second, identifying the table direction (row-wise, column-wise, or both-wise) and extracting headers, captions, and footers using boundary detection in difference matrices; and third, reorganising the table into a tree of menu pages where users select numbered options to drill into specific sections.
Key findings
The table structure analysis algorithm was tested on 40 webpages containing over 14,600 table cells and 1,600+ rows/columns, with similarity thresholds (th_cell and th_rowcol) both set at 0.5 achieving correct identification of all records. The approach uses visual properties rather than HTML semantic tags to distinguish headers from data — based on the observation that even when developers do not use <th> tags, they typically style headers differently from data cells (bold, different background colour, etc.). For complex tables with multiple header rows, the algorithm integrates headers hierarchically — for example, creating compound labels like "Imported-Cherries-A Grade" from three levels of column headers. The adapted output presents tables as Interactive Voice Response System (IVRS)-style menu pages, allowing mobile phone users to navigate by pressing number keys. This approach works for both PC screen reader users and mobile users with visual disabilities.
Relevance
Data tables remain one of the most persistent accessibility challenges on the web. Despite WCAG guidance on table markup, vast numbers of legacy and poorly-coded tables exist without proper semantic structure, making them effectively inaccessible to screen readers. This paper's approach of inferring table structure from visual styling rather than relying on semantic HTML addresses the reality that many tables will never be properly marked up by their authors. The hierarchical navigation model — allowing users to drill into specific table sections rather than listening to the entire table linearly — aligns with the Raman Principle of providing alternative ways to query information rather than simply linearising visual content. The dual applicability to both desktop screen readers and mobile devices is practically important, as mobile accessibility for blind users presents even greater constraints on information density. While the approach was demonstrated with relatively simple tables, the underlying methodology of using CSS-based visual analysis to recover semantic structure has broader applicability to web content adaptation.
Tags: blindness · screen readers · data tables · content adaptation · web accessibility · mobile accessibility · information architecture