Re: CSS Techniques - Using an invisible header text in the sidebar navigation.

A couple of points:
Using 'off-screen' positioning via CSS' is better than 'invisible'. Those who just take off after reading the technique title will simply use display:none if they are not aware of off-screen method.

Off-screen works with links, form labels such that it is supported by screen readers / magnifiers. Other content like just headings for instance "Left navigation" or "You are here ..." (for breadcrumb) are read by screen readers but not by magnifiers in my experience.
Also one must guard against widespread  and blatant use of  off-screen text. I see it being used to give 'alt-text' for images rendered via CSS or even for images of text.That does not help all users with vision impairment and is a misuse of off-screen technique.
Sailesh Panchhang     
--- On Tue, 8/2/11, Detlev Fischer <fischer@dias.de> wrote:


From: Detlev Fischer <fischer@dias.de>
Subject: Re: CSS Techniques - Using an invisible header text in the sidebar navigation.
To: w3c-wai-gl@w3.org
Date: Tuesday, August 2, 2011, 5:02 AM


Hi,

I'd like to comment on the technique "Using an invisible header text in the sidebar navigation" proposed by Devarshi Pant.

As far as I can see the WCAG techniques do not yet cover the use of hidden elements as explicit navigation aids for screeen reader users (except C7: Using CSS to hide a portion of the link text), so this seems a valuable suggestion in general.

I agree with the Response from the Working Group that this should be an advisory technique. In my view, it would be well placed as advisory technique for SC 2.4.6 Headings and Labels rather than SC 2.4.10; despite the potential problems of incorrect rendering of content hidden via CSS, it seems useful enough to be included on the AA conformance level. I agree that a safe (accessible) method for hiding the heading (e.g., by off-screen positioning) should be included so this is likely to be a HTML Technique rather than a General Technique.

My only concern would be that the use of invisible *headings* (probably a better descriptor than 'header text') might better be described in a more general way since it might apply not only to navigation bars but also to other elements on the page. I also agree with the WG commnent that reference to a particular heading level should be avoided.

A more appropriate title for the technique might be "Using invisible headings to structure page content". It might be worthwhile stating that headings visible for all are often preferable and that this technique would apply mainly to cases where the visible pattern clearly indicates the function for sighted users. Navigation bars are a point in case. Another example would be site search, which is often used without explicit heading and fairly conventional and of familiar affordance for sighted users.

Site search may therefore constitute a useful second example for the application of this technique.

As for the Test Procedure suggested, I do not think it neessary to refer to screen readers as the heading structure can also be seen when turning off CSS (bookmarklets my help in addition to highlight them / mark their level). An alternative would be generating the headlines structure via the IE Web Accessibility Toolbar (structure > headings) - in a sense, a worse approach since the headings outline generated does not show the content underneath the headlines.

An additional point for test procedure would be to check that headings are not hidden using display:none as this will hide them also for most screen readers.

Regards,
Detlev


Am 13.07.2011 20:02, schrieb Loretta Guarino Reid:
> On Mon, Jun 20, 2011 at 10:49 AM, WCAG 2.0 Techniques Submission Form
> <nobody@w3.org <mailto:nobody@w3.org>> wrote:
> 
> 
>     Submitter's Name: Devarshi Pant
>     Submitter's Email: devarshipant@gmail.com
>     <mailto:devarshipant@gmail.com>
> 
>     Technique ID: UNKNOWN
>     Short Name: Using an invisible header text in the sidebar navigation.
>     Technique Category: CSS Techniques
>     Success Criterion Reference: UNKNOWN
> 
>     Applicability:
>     This technique allows screen reader users to differentiate sidebar
>     navigation links from other links in the page.
> 
>     UA Issues:
>     None
> 
>     Description:
>     The objective of this technique is to allow screen reader users to
>     get to sidebar links by adding an invisible heading positioned off
>     screen. The wording of the header is something like, “Sidebar
>     Navigation:” and is a semantic &lt;H3&gt; header text.
> 
>     Example 1 Head: Left Navigation driven website
>     Example 1 Description:
>     A blind user navigates the page using the headings list. A level
>     three header that reads &quot;Sidebar Navigation:&quot; etc., allows
>     a user:
>     1) To gain quick entry into the sidebar
>     2) To understand the structure of the page
>     3) To correlate the links underneath the header text
> 
> 
>     Resource 1 Title: WebAIM Article on off-screen positioning
>     Resource 1 URI: http://webaim.org/techniques/css/invisiblecontent/
> 
>     Related Techniques:
>     G96
>     G112
>     G117
>     G128
>     G141
> 
>     Test Procedure:
>     1. Pull up the headings list using the screen reader.
>     2. Notice the header that states “Sidebar Navigation:” etc.
>     3. Check if activating the header places the focus inside the sidebar.
>     4. Tabbing once, check, if the second element to receive focus is
>     below the invisible header.
> 
> 
>     Expected Result:
>     Checks 1, 2, 3, and 4 above are true.
> 
> ================================
> Response from the Working Group
> ================================
> 
> Thank you for submitting this technique. The working group has reviewed
> it and has the following feedback:
> 
>  1. This is not a sufficient technique for SC 2.4.6, which requires that
>     headings and labels be descriptive, but does not require that they
>     be present on the page. As such, SC 2.4.6 addresses the text used
>     for the heading or label.
>  2. This could be an advisory technique, that is, a technique that is
>     not sufficient for one of the success criteria, but which may make
>     the contents more accessible. However, it is still not clear which
>     success criteria this should be advisory to. Possibly to Success
>     Criterion 2.4.10 (Section Headings are used to organize the content)
>     or to Guideline 2.4 (Provide ways to help users navigate, find
>     content, and determine where they are).
>  3. We have some concerns about using invisible text in CSS, especially
>     with ARIA landmarks on the horizon. The CSS for hiding them is not
>     100% stable. Especially in right-to-left layouts, there are problems
>     which left-to-right layouts don't have. There are also ever changing
>     decisions by screen readers about what patterns they support. This
>     technique would need to include the technical details for how to
>     hide the text using CSS.
>  4. We also have concerns with requiring level 3 headings, rather than
>     whatever heading element works in the context of the page structure.
>  5. The related techniques do not seem relevant to this technique, in
>     that they are not presenting alternative techniques for addressing
>     this requirement.
>  6. The test procedure should describe what needs to be true of the
>     coding, not how to test operationally. While we find it necessary to
>     provide operational tests for general techniques, they are less
>     reliable than tests that focus on the underlying technology. See the
>     published CSS techniques for examples of how to describe CSS tests.
> 
> If you would like to revise the technique to address these issues, we
> would be happy to reconsider it.
> 
> 
> Loretta Guarino Reid, WCAG WG Co-Chair
> Gregg Vanderheiden, WCAG WG Co-Chair
> Michael Cooper, WCAG WG Staff Contact
> 
> 
> On behalf of the WCAG Working Group


-- ---------------------------------------------------------------
Detlev Fischer PhD
DIAS GmbH - Daten, Informationssysteme und Analysen im Sozialen
Geschäftsführung: Thomas Lilienthal, Michael Zapp

Telefon: +49-40-43 18 75-25
Mobile: +49-157 7-170 73 84
Fax: +49-40-43 18 75-19
E-Mail: fischer@dias.de

Anschrift: Schulterblatt 36, D-20357 Hamburg
Amtsgericht Hamburg HRB 58 167
Geschäftsführer: Thomas Lilienthal, Michael Zapp
---------------------------------------------------------------

Received on Wednesday, 3 August 2011 00:48:17 UTC