How to Hide Content about a11yproject.com

[davatron5000]

@jnurthen,
Awesome. I'll add that to the article and push the .screen-reader-text bit down.

Out of curiosity, do you know the general AT support of aria-label and aria-labelledby? Widely supported? The only test I could is an older browser test:
http://www.paciellogroup.com/blog/aria-tests/aria-labelledby-input.html

[jnurthen]

Dave,

Sounds good. I'd also move the "how to hide content from everyone" section
right to the bottom. Generally folks know how to do this using only
display:none and the need to use both visibility:hidden and display:none is
really such a corner case that I'm happy if developers don't even bother
thinking about it and just use display:none.

It isn't really AT that supports aria-label and aria-labelledby - it is the
browser (in most cases). The support is generally pretty good on the major
accessible platforms (FF/IE9+/Safari) for Form fields. It is much worse for
other control types such as links where the support is really pretty
spotty. We're currently writing WCAG techniques for these so have been
looking at the accessibility support in some detail. I'm certainly
interested in re-running Steve's tests again on the latest browser
platforms as I believe it would be interesting to see how far we have come.
I'll try to get to that when I have a hour or 2 to spare.

Regards,
James

On Tue, Jan 15, 2013 at 2:24 PM, Dave Rupert [email protected]:

@jnurthen https://github.com/jnurthen,
Awesome. I'll add that to the article and push the .screen-reader-textbit down.

Out of curiosity, do you know the general AT support of aria-label and
aria-labelledby? Widely supported? The latest things I could find is:
http://www.paciellogroup.com/blog/aria-tests/aria-labelledby-input.html

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-12292948.

[stevefaulkner]

davatron, these tests (though still a year old) provide a better idea of aria-labelledby support: http://www.html5accessibility.com/tests/form-labels.html

[grayghostvisuals]

@jnurthen
Did I hear you correctly? Are you saying you encourage the use of display: none for off screen text?

I'm happy if developers don't even bother
thinking about it and just use display:none.

THE H5BP method

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

[jnurthen]

No - not at all. I was talking about this part of the document with this
comment:

Screen readers sometimes ignore
display:nonehttp://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/.
Which means the content will be read despite being “hidden”. To hide
content completely from screen readers use the following:

/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/
*/
.hidden {
display:none;
visibility:hidden;
}

I think having this as the lead part of this document is confusing, The
number of cases where you need both visibility:hidden and display:none to
hide content FROM screen readers is miniscule. Just using display:none
works in most cases - and IMO in those that it doesn't its really a screen
reader bug.

Also - IMO having a .hidden class which uses display:none in the stylesheet
isn't a good idea. I much prefer my hiding of content for all users to use
inline styles in case a user is overriding the style sheet. Whether content
is hidden or shown isn't really presentation - it is content so logically
it actually fits in the HTML document, not in the style sheet.

Regards,
James

On Wed, Jan 16, 2013 at 8:28 AM, Dennis Gaebel [email protected]:

@jnurthen https://github.com/jnurthen
Did I hear you correctly? Are you saying you encourage the use of display:
none for off screen text?

I'm happy if developers don't even bother
thinking about it and just use display:none.

THE H5BP method

/*

• Hide only visually, but have it available for screenreaders: h5bp.com/v
  */

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;}

/*

• Extends the .visuallyhidden class to allow the element to be focusable
• when navigated to via the keyboard: h5bp.com/p
  */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;}

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-12326631.

[davatron5000]

Okay everyone. I'll take another pass at the article soon to see if I can incorporate some of these thoughts.

• Definitely will include a brief aria-label and aria-labelledby example as a "this is even better than hiding content" example for modern browsers.
• Will include footnotes for @stevefaulkner's test suite. That answered my question perfectly, thanks!

@jnurthen Thanks for the feedback. Few questions.

Just using display:none works in most cases - and IMO in those that it doesn't its really a screen reader bug.

Based on this old article it would seem that the biggest inconsistency is with Windows Eyes (5.5 circa 2007). Do we know if Windows Eyes (edit: 12% market share) has the same behavior still? Or if it doesn't still have that, at what version was that changed?

IMO having a .hidden class which uses display:none in the stylesheet isn't a good idea. I much prefer my hiding of content for all users to use inline styles in case a user is overriding the style sheet

I agree with your point here, but that's sort of an issue of personal preference. display:none is a valid and common CSS rule and it would seem that most developers simply aren't aware of the issue. For example, if you look at our good friend Twitter Bootstrap, they have a .hidden declaration, probably from H5BP, but then when they show/hide things based on the size of the viewport, they stop using visibility:hidden.

.hidden {
  display: none;
  visibility: hidden;
}

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

.visible-desktop {
  display: inherit !important;
}

/* It gets worse from here... */

This is just a real world example of what most developers end up doing. Ultimately the best advice is conditional on whether or not that Windows Eyes bug/inconsistency still exists or when it changed.

[grayghostvisuals]

It'd be sahweeet to see the outcome from this helping to change @h5bp and @twitter Bootstrap methods mentioned above. Maybe we can even hear what their thoughts are on this discussion and why it is like that for them currently.

Cheers 🍺

[grayghostvisuals]

Just wanted to add that the responsive nav project by @viljamis toggles the aria-hidden attribute when content is either visible or not.

[svinkle]

This issue has become "stale" — @jnurthen, feel free to open a new issue if you'd like to continue.