Resolve .hide/.hidden/.sr-only redundancy/confusion

[cvrebert]

.hide & .sr-only both have the same final effect.
.hide & .hidden have confusingly similar names, but do slightly different things.

Visibility table:

Visual user	Screen reader	Class	Implementation summary
No	No	.hidden	// Hide from screenreaders and browsers
No	YES (usually)	.hide	display: none !important;
No	YES	.sr-only	// Only display content to screen readers

[ckundo]

Historically, screen readers have sometimes ignored display: none.

http://a11yproject.com/posts/how-to-hide-content/
http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/

[cvrebert]

I propose deprecating .hide in favor of the other two (the appropriate replacement depends on which semantic the developer actually intended). We can then see about renaming .hidden to .hide in v4 (and probably also rename .sr-only to something better).

[ckundo]

You might consider using aria-hidden with a CSS attribute selector instead of a class name when the result is screen reader specific.

W3C's aria techniques:

It is recommended that authors key visibility of elements off this attribute, rather than change visibility and separately have to remember to update this property. CSS 2 provides a way to select on attribute values ([CSS]). The following CSS declaration makes content visible unless the aria-hidden attribute is true; scripts need only update the value of this attribute to change visibility:

[aria-hidden="true"] { visibility: hidden; }

[cvrebert]

We generally have a policy of avoiding attribute selectors when possible, for performance reasons.

[ckundo]

I see, besides standardizing markup I thought maybe attribute selectors might be a performance boost, per this post: http://stackoverflow.com/a/18116119

One of the hidden benefits to using attributes over classes is a performance gain in JavaScript. Instead of having to check for the presence of a class on an element (which is remarkably easy to get wrong), browsers have supported getAttribute, hasAttribute, and setAttribute for a long time.

[cvrebert]

We meant the performance of the "style engine"/renderer, not JS.