September 15 Meeting Report: Headings and Tables

At our September meeting, we followed up on two topics that we had covered in previous meetings.

The main portion of our meeting was spent on techniques for using a graphic to replace a heading. The issue is that you obviously can't have both the heading and the graphic visible, and I had always just given the heading the property display:none to remove it from visibility in a styled page.

What I learned from reading The Art & Science of CSS is that this technique has accessibility issues. As Cameron Adams, the author of the chapter on this subject, told me by email, the reason is that many current text-to-speech readers will ignore elements that have the display:none property. Cameron referred me to this article on screen reader visibility.

We discussed three techniques from his chapter for substituting a graphic for a heading, each with its own pluses and minuses:

• Negative indent the heading with some high number: text-indent: -9999px; .


• Put an empty span within the heading and make the image the background of that span.


• Use a Flash replacement technique, such as described in this article on sIFR.
  

We finished with a demo by one of our members of a calendar that he prepared for his church group's website. He adapted the CSS techniques for styling a table that we discussed in June. Those techniques were taken, again, from The Art & Science of CSS.