I thought I was fixing a small accessibility issue.<\/p>\n\n\n\n
We had tables rendering with only So I assumed this would be quick.<\/p>\n\n\n\n It wasn\u2019t.<\/p>\n\n\n\n Here\u2019s what we were working with:<\/p>\n\n\n\n To a human, this is easy to understand.<\/p>\n\n\n\n To a screen reader, it\u2019s just a grid of cells with no hierarchy.<\/p>\n\n\n\n No headers. No relationships. No structure.<\/p>\n\n\n\n And that\u2019s where the real problem was.<\/p>\n\n\n\n Bold text made it look<\/em> like we had headers.<\/p>\n\n\n\n But HTML doesn\u2019t care about how things look\u2014it cares about what they are<\/em>.<\/p>\n\n\n\n If everything is a That means assistive technologies can\u2019t:<\/p>\n\n\n\n The UI was clear. The structure wasn\u2019t.<\/p>\n\n\n\n My first instinct was to \u201cfix everything\u201d:<\/p>\n\n\n\n But I had to pause.<\/p>\n\n\n\n Just because something looks<\/em> like a caption doesn\u2019t mean it is one.<\/p>\n\n\n\n So instead, I made the smallest safe improvements:<\/p>\n\n\n\n The goal wasn\u2019t perfection\u2014it was correctness without guessing<\/strong>.<\/p>\n\n\n\n I expected all tables to look like this:<\/p>\n\n\n\n But some looked like this:<\/p>\n\n\n\n My code initially missed those rows entirely.<\/p>\n\n\n\n Which led to a bug where I returned That one line broke everything.<\/p>\n\n\n\n In the parser I was using:<\/p>\n\n\n\n That difference isn\u2019t obvious until it is.<\/p>\n\n\n\n It\u2019s the kind of thing that doesn\u2019t show up in the UI right away\u2014but can quietly break content.<\/p>\n\n\n\n I optimized the parsing with Then I used random keys.<\/p>\n\n\n\n Which forced React to re-mount everything anyway.<\/p>\n\n\n\n Same result. Just more complicated.<\/p>\n\n\n\n The fix was simple:<\/p>\n\n\n\n I added a filter to only process At first glance, it looked unnecessary.<\/p>\n\n\n\n But parsed HTML often includes:<\/p>\n\n\n\n Without that filter, I\u2019d end up processing things that weren\u2019t actually cells.<\/p>\n\n\n\n When your input isn\u2019t fully controlled, defensive code isn\u2019t optional.<\/p>\n\n\n\n This wasn\u2019t about tables.<\/p>\n\n\n\n It was about alignment.<\/p>\n\n\n\n Does your code structure reflect the meaning of what you\u2019re building?<\/p>\n<\/blockquote>\n\n\n\n Because when it doesn\u2019t, the UI might still look fine\u2014but the experience breaks for the people who rely on that structure the most.<\/p>\n\n\n\n And those issues are easy to miss if you\u2019re only looking at the screen.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" I thought I was fixing a small accessibility issue. We had tables rendering with only…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-engineering-lab"],"_links":{"self":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=41"}],"version-history":[{"count":1,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<tr><\/code> and <td><\/code>. Visually, everything looked fine. Bold text made headers stand out. The layout made sense.<\/p>\n\n\n\n
\n\n\n\nWhen \u201clooks right\u201d isn\u2019t actually right<\/h2>\n\n\n\n
<table>\n <tr>\n <td><b>Year Title<\/b><\/td>\n <td><b>2024<\/b><\/td>\n <td><b>2025<\/b><\/td>\n <\/tr>\n <tr>\n <td><b>Assets<\/b><\/td>\n <\/tr>\n <tr>\n <td>Money<\/td>\n <td>$xxx<\/td>\n <td>$yyy<\/td>\n <\/tr>\n<\/table>\n<\/code><\/pre>\n\n\n\n
\n\n\n\nLesson #1: Don\u2019t confuse styling with meaning<\/h2>\n\n\n\n
\n
<td><\/code> = data<\/li>\n\n\n\n<th><\/code> = header<\/li>\n<\/ul>\n\n\n\n<td><\/code>, nothing is a header.<\/p>\n\n\n\n\n
\n\n\n\nLesson #2: Don\u2019t assume more than the data tells you<\/h2>\n\n\n\n
\n
\n
<thead><\/code><\/li>\n\n\n\n<th><\/code><\/li>\n\n\n\n
\n\n\n\nLesson #3: Real-world HTML is messy<\/h2>\n\n\n\n
<table>\n <tr>...<\/tr>\n<\/table>\n<\/code><\/pre>\n\n\n\n<table>\n <tbody>\n <tr>...<\/tr>\n <\/tbody>\n<\/table>\n<\/code><\/pre>\n\n\n\nnull<\/code>\u2026
and accidentally removed the entire table.<\/p>\n\n\n\n
\n\n\n\nLesson #4: Small implementation details matter more than you think<\/h2>\n\n\n\n
\n
undefined<\/code> \u2192 keep the node<\/li>\n\n\n\nnull<\/code> \u2192 remove the node<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nLesson #5: Performance fixes can cancel themselves out<\/h2>\n\n\n\n
useMemo<\/code> so it wouldn\u2019t run on every render.<\/p>\n\n\n\n\n
\n\n\n\nLesson #6: Defensive code is not overengineering<\/h2>\n\n\n\n
<td><\/code> and <th><\/code> elements.<\/p>\n\n\n\n\n
\n\n\n\nWhat I actually changed<\/h2>\n\n\n\n
\n
<thead><\/code> and <tbody><\/code> for structure<\/li>\n\n\n\n<th><\/code><\/li>\n\n\n\n
\n\n\n\nThe real takeaway<\/h2>\n\n\n\n
\n