Several months ago, I started a podcast with a nephew of mine. In a quest to feed what I lovingly call the monster because the podcast always needs content, I was researching some NFL statistics and it was a poignant reminder of what a challenge it is to find consistently usable tables on the web.
These NFL tables on individual player statistics for my basic criteria are reasonable. Column and row headers are marked. Column headers are actionable, meaning they are links. Even the sort direction is properly indicated. Great, I’m thinking here could be a handy resource.
Reading through the links on the page, I notice a link that says Next Gen Stats. Well, it actually says Next Gen Stats target=1 if you are using a screen reader as a result of an ARIA-Label that needs some obvious attention. Now I’m thinking this could be interesting. These Next Gen Stats are the details about how fast athletes are moving and all the other interesting data being gathered these days. Not so fast though.
The first page I go to here has one of the more vexing issues I experience with tables. Column headers are separated here into a separate single row table. The data itself is a second table and as a result, the data is more difficult to review–mind you, not impossible but it requires you first figure out what’s going on and then keep track of the column names as you review information.
Last, I opt to review some team statistics. At first glance, these tables seem potentially good, much like the individual player tables. Column and row headers are marked. That said, even though column headers are reachable from the keyboard, they are not created as links, so this is a step backwards in my opinion. On the positive, sort order is indicated.
Row headers in this case become a more interesting situation. With NVDA and Narrator, the team name is read as the row header such as, Packers, Vikings, Bears and Lions. JAWS adds a wrinkle because you get text such as logos/GB
Unlabeled graphic – Packers as the row header. While I didn’t fully investigate the source of this difference, my first impression is that JAWS is including part of the image source from the <picture> tag whereas Narrator and NVDA are not. I’d suspect proper alt tags on the images within the picture tag or some other markup would correct things.
Recall, I was just trying to feed my podcast monster here and yet this seemingly simple task of looking up a few statistics shows what a mess tables are still for accessibility.
Comments