Headers and hidden content

Just got back from the eduWEB conference in Chicago where I presented about content accessibility standards for higher-ed websites.  More on this (and a possible screencast) later, but a couple of issues consistently arose from this and some emails and communication from others on the Drupal 7 Accessibility Task Force that I'm just putting out there.

1. Headings - how many and when? 

Basically, h1 - h6 tags can be used by many assistive technologies to help disabled users scan a page.  Some screen readers can be commanded to "read only headings."  From a semantic standpoint, they also help web content maintain context that would otherwise only be conveyed visually.  Now generally, the rule of thumb is this: one h1 heading, which must be unique OR the name of the site (if this is the homepage or it's otherwise appropriate), with subheadings filled in by h2 headings.  On rare occasions that there are sub-subheadings of content, h3 tags should be used but generally on one page, it's more common to see one big heading, a few smaller headings, and maybe one really small heading.  Anyway, the question has come up recently, is this appropriate?  In certain situations, a page will need the name of the site and a unique title for the page visible on the page.  Do we smush everything into one line then?  Or do we have two h1 headings?  That's essentially like a book with two titles.  Visually it can distract the user and from an accessibility standpoint, would certainly confuse screen readers etc.

Other situations can arise with multiple h1 tags on a page.  Many blog homepages put the post title into h1 tags, which is fine when you're on the entry's own page, but when you have multiple entries, like the last ten appearing on your homepage etc, it's a good idea to bump that down the h2.  However then you can have other problems, like what if the teaser includes an h2 tag?  Do you then have to bump down all the header tags in your entries?  That would throw off the header hierarchy entirely!

Also one quick note about Google SEO and h1 tags -- some authors put a ton of h1 headings onto pages in order to trick Google into loving their pages more...it doesn't work.  In some cases, such as when people actually put all of their content into h1 tags and style it to visually look different, Google will see the trick coming and actually may ignore your page entirely.

So the question here is, what do you think?  There's nothing set in stone on this, there are only opinions and recommendations.  Personally, I'm under the impression that an h1 should be, as stated, like the title of a book.  On some occasions, it's appropriate for a book to have two titles (alternate titles), but it would be just plain weird if nearly every book in your collection had two, three, or four titles.

2. Hidden content

Just as not all forms of web content are accessible to all users without some web accessibility measures, so too do we generate some web content for some users that other users may not need, or will find distracting.  An example of this is captions.  For video with audio content, open- or closed-captioning can be used, open being captions that users can't turn off, and closed being ones that users can.  Closed captions are infinitely preferable.  While captions are used by many users, including deaf users, users with mild to moderate hearing loss, users learning English, and even young users learning to read, not all users want captions.  While captions can help users with some cognitive disabilities by reinforcing a mental focus on the video and audio content, another cognitive disability may make it much harder to focus on anything on the page when the captions are on.  Likewise, some users may just not want them.  So, closed captions are preferred as they can be hidden or shown on a user-by-user basis. 

Now here's the problem; sometimes, content is generated that only users with certain assistive technologies need to be able to see, for example someone using a screen reader.  A "skip to content" hidden link at the start of a page is a common example of this.  However, in order for a site to be accessible, all of the data presented has to be perceivable by all users.  Very often, hidden links are CSS-coded so that, when they receive keyboard focus, they're visible on the screen (margins!).  But in some situations, it may not be immediately apparent where hidden content should be "un-hidden" to when non-screen reader-users try to access it.  An interesting way around this is to code links to be "hidden" in another way (height/overflow, opacity where supported) so that only screen readers can see it, no matter what the keyboard does.  Obviously in order to stay perceivable, it can apply only to data that is supplementary for screen readers and shown elsewhere on the screen.  A couple of questions came up from this; should it be noted in the hidden content that it is screen reader-only?  This would be a good idea to make sure that screen reader-users are entirely in the know about what can and cannot accessed by users without screen readers (invaluable data if making a call to tech support, for example), but it could cause a glut of information.  Plus, is a third redundancy needed in this case?  I'm leaning toward "no," but this may be a case-by-case basis thing.  It seems that the smartest thing to do is to have a hidden-to-all-but-screen readers class, then a hidden-to-all-but-keyboard-accessible class.

That's all for now.  I'll be back later with pictures of Chicago-style pizza!