Crowdsourcing an Accessible Periodic Table of Accessibility

Last updated: March 6, 2015

Note:  All links going to other websites will open in the same window. Use the Back button to return to our site.

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.

Screen capture of tweet about periodic table for accessibility
A screenshot of @dboudreau's tweet that inspired this blog post. Click on image for full size.

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 (no longer available as of May 18, 2014). 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?

Update: May 18, 2014 – There is an accessible periodic table at http://www.syngentaperiodictable.co.uk/periodic-table.php?keyStage=5 from Syngenta Learning Zone.

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.

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?