Re: Hiding heading level ones

Hey John,

Great to hear from you. Thank you very much for the thoughtful reply
and the .offscreen-text CSS.

You wrote:
> if each page on
> your site always visually started with an <h2>, and was styled such that the
> "snappy marketing text" served as a good visual "heading" of what is on the
> page, then what?  Would those users with cognitive and learning disabilities
> really be locked out? I argue no, as for the most part they are using the
> visual styling of the headings to grok the semantic structure, and not the
> enumeration of headings in the code.

That's an excellent question that I have asked and haven't gotten an
answer to yet. New pages (say within a department or college) in the
CMS could be consistent by starting with an <h2>. I hope I am wrong
but I fear that the <h2> will not  be used to quickly orient users to
the page but for rather promotional/marketing text.

> From my perspective, if all you are using the <h1> for is to echo back what
> is also in the <title>, then I would suggest that it is a bit of a mis-use
> of the <h1>, and that for sighted users it likely isn't a big deal.

Then the real solution seems to be to turn the <h2> into an <h1> and
forget hiding. anything:
<h1>Snappy Marketing Heading to Quickly Orient Everyone</h1>
 <!-- Rest of the page -->

> I've often noted as well that for some reason, many authors think that the
> content of the <h1> and the <title> should be the same - although why that
> is I do not know

I usually cite:
http://www.w3.org/QA/Tips/Use_h1_for_Title

Thanks again!

Best Regards,
Laura

Laura Carlson wrote:
>
>> A Web developer in our marketing department has asked if the following
>> markup, which is meant for use in Drupal themes and Dreamweaver
>> templates throughout the organization, would meet WCAG AA with the
>> notion that screen readers will be able to receive a good heading for
>> the page and some snappy marketing text could go in the <h2>.

><SNIP>
>
>> <h1 class="hidden">Page Title</h1>
>>  <!-- No other content -->
>> <h2>THIS IS WHERE THE DOCUMENT HEADING GOES.</h2>
>>
>> Thoughts on that markup and WCAG AA?
>
> Quick question: Fill in the blank - 2, 4, 6, __, 10
>
> Who didn't come up with eight?
>
> Through observation and discussion, I've long held that the "level" of the
> heading(s), while providing some semantic information, is less useful than
> the relationships created by headings at different levels. In my question
> above, you likely understood the pattern (that if a=2, and b=4, and c=6,
> then d MUST=8) - the relationship is far more important than the
> character/number itself. I'd go so far as to say that if you built a web
> site (multiple pages) that only used even numbered headings, while "weird"
> and perhaps even a little off-putting, that for those users who rely on
> _structured semantic headings_ to navigate, that they would pick it up very
> quickly, and have no problem navigating my "even headings only" site. (Not
> for one minute however am I advocating this, I simply toss it out as a straw
> man argument for contemplation.)
>
> Does it *really* matter if each page visually starts with an <h2>, if the
> content of that <h2> is meaningful, unique and helps orient the end-user to
> what the page contains? What real hardship is caused if each page visually
> starts at an <h2>, and then uses heading structures properly, so that users
> can comprehend that all of the <h3>'s are children of any given <h2>, and
> that an <h4> MUST be the child of its parent <h3>? We've long discussed
> whether a page should have more than one <h1>, and frankly I think the jury
> is still out on that one - most agree that it is probably a very rare
> instance, but that edge and corner cases could exist... yet I think it would
> be fairly trivial to find pages with hidden <h1>s and then multiple <h2>s -
> effectively creating the same "edge case" but without being "wrong".
>
> I've often noted as well that for some reason, many authors think that the
> content of the <h1> and the <title> should be the same - although why that
> is I do not know (perhaps because the <title> content is not rendered well
> in browsers?). It very much feels like that here - heck Laura's sample code
> even states:
>
> 	<h1 class="hidden">Page Title</h1>
>
> ... yup, page TITLE, and then our friend Sailesh wrote:
>
>> Non-SR users will not see a page title.
>> Yes in some situations one may have an h1 and no content before the
>> next heading.
>
> From my perspective, if all you are using the <h1> for is to echo back what
> is also in the <title>, then I would suggest that it is a bit of a mis-use
> of the <h1>, and that for sighted users it likely isn't a big deal. What is
> more important is that the <h2>snappy marketing text</h2> is going to be
> styled to quickly orient the sighted user to *that* page, and that headings
> used after that initial <h2> are properly structured usage.
>
>> I stated that if he hides the <h1> he would be locking out people with
>> cognitive and learning disabilities who would benefit from the ability
>> to identify content by a visible <h1>. My advice to him was to keep the
>> <h1> visible and intuitively easy to understand.
>
>...or so goes the common wisdom, but let me ask you this: if each page on
>  your site always visually started with an <h2>, and was styled such that the
> "snappy marketing text" served as a good visual "heading" of what is on the
> page, then what? Would those users with cognitive and learning disabilities
> really be locked out? I argue no, as for the most part they are using the
> visual styling of the headings to grok the semantic structure, and not the
> enumeration of headings in the code.
>
> In fact, back when the W3C was working on XHTML2, the proposal was to
> eliminate the enumeration, and simply use <h> - allowing the user agent to
> build the "outline algorithm" mechanically.
> (http://www.w3.org/TR/xhtml2/mod-structural.html#sec_8.5.)
>
>
>> I have cited Info and Relationships Success Criteria 1.3.1, "When such
>> relationships are perceivable to one set of users, those relationships
>> can be made to be perceivable to all."
>
> Correct, but nowhere does it state that the relationship model must always
> start at "1", especially when 1=redundant information, and "2" is styled in
> such a way as to serve the practical function of "1" - it's a game at that
> point: the intent is met, if not the pure-play mechanics.
>
> Laura, sometimes when using system-wide CMS tools (like Drupal) across an
> organization your templates need to meet the majority requirement. If all of
> the sites using Drupal (for example) have a consistent heading navigation
> structure [sic], then I don't see any real harm in having all pages visually
> start with appropriately styled <h2>'s - in fact I would be more concerned
> that the <title> and <h1> content is repeating itself for no practical
> reason, and even then it is a minor concern.
>
>
>>
>>  In addition I have pointed him to:
>>  http://www.d.umn.edu/itss/training/online/structure/coding/index.html#w
>>  riting
>>
>>  Other thoughts?
>>
>
> Yup, you offered the following code sample for <strike>hidden</strike>
> <ins>off-screen</ins> text:
>
> > <style>
> > .hidden {
> > position: absolute;
> > top: -9999px;
> > left: -9999px;
> > }
> > </style>
>
> Our testing has shown that in some rare instances, this will introduce a
> horizontal scroll bar in some browsers, even if you cannot actually scroll
> L-to-R - the visual bar still manifests.  A well-tested and "better"
> solution is to use CSS differently:
>
> .offscreen-text {
> 	font-size:0;
> 	width:0;
> 	height:1px;
> 	position:absolute;
> 	overflow:hidden;
> 	z-index:-1000;}
>
> My $0.05 Canadian (Canada no longer has $0.01 coins <grin>)
>
> JF
> ------------------------------
> John Foliot
> Web Accessibility Specialist
> W3C Invited Expert - Accessibility
> Co-Founder, Open Web Camp

Received on Tuesday, 25 November 2014 20:28:27 UTC