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

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 Tuesday, 2 August 2011 21:21:55 UTC