SuzyUK - 3:11 pm on Nov 24, 2010 (gmt 0)

I stumbled upon an interesting content hiding technique the other day while looking for the latest on image replacement.
Using CSS clip as an Accessible Method of Hiding Content [adaptivethemes.com]

I couldn't really figure out the importance of this method over another until I read (a few times!) the discussion behind this - a Drupal Core issue [drupal.org]

This brought me back here: accessibility and <h1> header images [webmasterworld.com] - which after reading confused me further until I realised that here at WebmasterWorld, the talk tends to center around using things for SEO, and mainly involves hidden H1's and header images/logos

IMO there is a difference in reasons for hiding content/images - and the Drupal discussions highlight what they are - thank you

I read that AT (Assisted Technology) users use the <Hx> tags to "tab" through documents so the ability to be able to put <hx> headings, above every section of content, form or image gallery is a good thing, a navigational aid if you like, even though they may not be necessary for visual users who can see a search form or random image block for what they are. Is that then the genuine legitimate reason for hiding headers whether for image replacement purposes or not.

I'm not thinking about just the header logo (which by the way I do try to put as an actual image not replaced and not as an H1 header either) I'm talking about section headings, - HTML5 <section>s must all have headings - they play an important role together in the hierarchy of the document or <article>, which in turn is no more than the navigation of it, whether by user or BOT

from the Adaptive Themes post:

Its relatively easy to hide content in Drupal using CSS, however its a whole different ball game to hide content and keep it accessible to all site visitors. Disabled web users may be using a screen reader or other Assistive Technology. For Drupal 7 we wanted a way to hide content that worked in all browsers and avoided many of the issues associated with current techniques.

my bold, and you could just substitute Drupal for whatever ;)

The beauty of the clip method would apparently be that all, or at least all tested, according to the above two links, AT's "read" content hidden by it

what is it?

.my-hidden-element { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6 & 7 */ clip: rect(1px, 1px, 1px, 1px); }

(any px amount, except 0 (zero), will do - as long as all four values are the same.. [added to clarify] - 0px works but is not read by ALL of the technologies tested hence the recommendation to use a non-zero value)

Apparently Drupal 7 is to have headers for all sections (in line with HTML5 recommendations) and the ability for the end user of the CMS to hide them would be essential for theming I suppose, which is why it surfaced in Core.

I can also imagine that this "hiding headings" will take over from the opposite way to tackle the same issue, as far a CMS providers are concerned anyway, which is to use CSS to insert pseudo content for visual labels only, this would not only be harder to convey semantically I suppose, but also harder to implement programatically - and I'm not altogether sure the various media stylesheets are up to it anyway? besides if AT users are already familiar with "tabbing" through heading elements and all or most technologies appear to have implemented some way, shortcut, for their users to do this (Opera has it implemented too I think) doesn't that make it, heading replacement/hiding, a legitimate use case - should we be adding headings as a navigational aid whether we need them visually or not

any thoughts?