Crowdsourcing an Accessible Periodic Table of Accessibility

In November, Denis Boudreau tweeted about a periodic table of SEO ranking factors. He concluded that somebody really ought to do one for accessibility as well.

A screenshot of @dboudreau's tweet that inspired this blog post.

Periodic table? The periodic table as explained in Wikipedia is “a tabular display of the 118 known chemical elements organized by selected properties of their atomic structures.” Because the periodic table is a pattern that many people recognize, it has been used as a template for other periodic tables. Examples I have discovered are the periodic table of typography and the periodic table of Adobe shortcuts.

These are all very visual. If you can’t see them, you are out of luck. You can’t ooh and aah over their design. If the clever design of the periodic table were used for accessibility topics, the table itself would have to be accessible. What an excellent challenge!

Searching for an accessible periodic table

I wondered whether there was an accessible periodic table freely available on the internet to demonstrate how such a thing was constructed. The National Center for Blind Youth in Science (NCBYS) has a reference to a periodic table. This reference includes a warning: “Please note that this site is difficult to navigate with a screen reader.” It doesn’t say impossible, but what does difficult mean? I clicked through to the NCBYS’ listed periodic table. It looked like something from the 1990s, and it used frames and no doctype! From the source file, I dug out the actual source of a supposedly accessible periodic table. I question its accessibility because the source code of the table shows no tags like

<th>

or

<scope>

I then discovered that clicking on an element lead to a URL that read

http://periodictable.com/Elements/001/index.html

Hmmm. If a blind person discovered this syntax, could they go through the elements of the table (not HTML elements!) by changing 001 to 002 or 003, etc., etc.? Very tedious if you had to retype part of a URL, for sure, but the text would be readable with minor garbage here and there.

What’s the basic structure of a periodic table?

This analysis is part of my pondering the question: how do you set up an accessible periodic table? I know how to do an accessible table. I always have to look it up because I code tables so rarely, but I have page 116 bookmarked in my copy of Web accessibility for people with disabilities by Michael G. Paciello for this purpose. This is for straightforward tables, however. A periodic table is not straightforward. There are several layers of groupings for the contents.

How do you make this irregularly shaped table accessibile? How do you structure it?

Searching for accessible techniques for accessible tables

There is a very detailed and long guideline about developing accessible learning applications. These are guidelines from the IMS Global Learning Consortium for topic-specific accessibility, which covers maths, sciences, charts, music, and much more. Techniques and resources are included.

Who says an accessible periodic table needs to be on the web these days? There’s an app for that… according to this discussion of the “first ever and only VoiceOver accessible periodic table of elements”. EleMints makes an accessible periodic table of elements for the iPad and iPhone. It’s a nice inspiration!

Another resource discusses the good and bad examples of accessible table layouts. This is Wikipedia discussing its own accessible table layout. Very meta, but useful for this discussion. Notice how they turn to the Lynx browser to evaluate the result.

What’s the content of a periodic table on accessibility?

Getting back to Denis’ idea. The table being discussed should be about accessibility and it should be accessible. Two related tasks. At the core is the content. What are we trying to construct? We can make a snazzy table, but all the unicorns and rainbows in the world can’t disguise a lack of real, solid content in that table.

What is the content, and what are the relationships within that content? What are the elements, groups, and periods in a periodic table about accessibility?

Your mission, Jim, should you choose to accept it

This is not Mission: Impossible, and not every reader of this blog post is named Jim. I think it is a Mission: Possible, and we can all contribute to its construction. In fact, when I read Denis’ original tweet, I immediately thought it was the perfect project for geeky, accessibility fans.

Can we do this together? First, we need to discuss content because it will shape our work. The table is a given, yet tweaking should be possible depending on the content. I’d like to kick off the project here. If someone wants to build a better sandbox for discussion, please do so and share the URL here.

What are your thoughts?