title: Marking up implicit column header for accessibility in HTML
body: <p>I'm providing a table of data which will roughly look like this:</p>
  
  <pre><code>|                   |  2009  |  2010  |  2011  |
  | location 1        |  pass  |  pass  |  fail  |
  | location 2        |  fail  |  pass  |  pass  |
  </code></pre>
  
  <p>For normally sighted readers, the meaning of the first column - location names - is clear and it looks better visually to leave off the column header. However, that's not helpful to people using a screen reader, and, unsurprisingly, fails WAI validation.</p>
  
  <p>My markup looks like:</p>
  
  <pre><code>&lt;table&gt;
   &lt;thead&gt;
     &lt;tr&gt;
       &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;!-- question here --&gt;
       &lt;th&gt;2009&lt;/th&gt;
       &lt;th&gt;2010&lt;/th&gt;
       &lt;th&gt;2011&lt;/th&gt;
     &lt;/tr&gt;
   &lt;/thead&gt;
   ...
  </code></pre>
  
  <p>So my question is: what should I add to the indicated <code>th</code> so that it will provide support and context for people who need it, but won't add visual clutter for people who don't?</p>
  
  <p>One option I have thought of is to add the column title to the markup, but then render it invisible using CSS for sighted readers. However, I wonder if there's a better (more semantic) way using ARIA metadata or something similar?</p>