Skip to content
a11y-examples

Shauna Keating

HCI 530 Advanced Accessibility

April 19, 2026

For a better experience, visit: https://shkeating.github.io/a11y-examples/tables/common-failures/

Common Failures

Table 1: Tables for layout

Section titled “Table 1: Tables for layout”
Page Layout Structure
The quick brown foxjumps over thelazy dog.
Accessibility isa fundamental rightfor all users.
Never use tablesjust to positionelements on a screen.
Screen readers willread this left to rightand it will sound awful.

Table 2: Bad Data Table

Section titled “Table 2: Bad Data Table”
  • General SC 1.3.1 Failures
    • leaves the caption element blank.
    • th table headers are empty.
  • WCAG Failure Technique F90
    • incorrectly associates table header and content via the header and id attributes. $85,000 cell associated to non existent id
  • WCAG Failure Technique F91
    • not correctly marking up table headers (e.g., using a standard td element with CSS classes to visually fake a header for “Employee Name” instead of using an actual th element)
  • WCAG Failure Technique F92
    • using role="presentation" on a table that contains real tabular data, which completely strips the table semantics and hides the data grid from screen readers
  • th missing scope attributes. th elements should use scope="col" or scope="row" to clearly identify their relationship to the data.
  • combines separate pieces of data into a single column, listing assigned equipment for phone and laptop in same assigned equipment column.
  • uses br elements to create visual line breaks inside a cell to fake a row (in the cells under Assigned Equipment). If a user resizes the text, the data will no longer align correctly.
  • for the rows using “zebra striping” to distinguish even and odd rows, uses colors with a poor contrast ratio between the text and the background.

Table 3: Div “Table”

Section titled “Table 3: Div “Table””
  • uses div elements and CSS to visually recreate a “table” without the appropriate semantic HTML structure.
Product
Price
Wireless Mouse
$25.00
Mechanical Keyboard
$80.00
USB-C Hub
$45.00
Ergonomic Office Chair
$250.00
27-inch 4K Monitor
$320.00

Table 4: Responsive CSS & Tabindex Mistakes

Section titled “Table 4: Responsive CSS & Tabindex Mistakes”
  • Uses display: block; in the CSS. While visually stacking the data for mobile, this CSS override removes the table semantics in the browser’s accessibility tree. Screen readers treat it like a generic list of text.
  • Uses tabindex="0" on every cell, forcing keyboard users to Tab through all of the data instead of using their typical table navigation controls
  • WCAG Failure Technique F87
    • Inserts non-decorative content (“Status: ”) using CSS ::before pseudo-elements. This data might not be read by all screen readers and cannot be easily highlighted or copied by users.
Server Status Grid
Server NameUptimeHealth
Alpha-0199.9%Online
Beta-0285.4%Degraded

Table 5: Going Against Best Practices

Section titled “Table 5: Going Against Best Practices”
  • does not include a semantic caption element, relying instead on a standard heading (h3) positioned above the table. Screen reader menus will list this table as “unnamed.”
  • misuses the scope attribute by applying scope="col" to row headers and scope="row" to column headers.
  • uses an empty td element to create visual indentation/spacing, creating confusing “dead zones” for keyboard and screen reader navigation.

Quarterly Sales Goals

Q1Q2
North America$500,000$550,000
New York Office$150,000
Europe$420,000$480,000