HTML and CSS Reference
In-Depth Information
<
div
class
="
content-area
"
style
="
display:none;
"></
div
>
We don't do that because a screen reader won't pick up an element if the style is set to
display:none
, and it also muddies up the HTML with unnecessary presentational information.
When you use a jQuery method like
hide()
, that's exactly what it does: it will set a
style
attribute on the target area and add a display property of
none
. It's
very easy to implement,
but not very good for accessibility
. It also violates the principles of progressive
enhancement when you inject style into the document like that (we're all sorts of messed up,
huh?). It's not uncommon for this method to be used within a tabbing interface to hide content.
The result is that the content is nonexistent to a screen reader. Once we realize that adding
style from JavaScript isn't ideal in most cases, we can move it into the CSS and reference it as
a class:
CSS
.hide
{
display
:
none
;
}
jQuery
$
(
'.content-area'
).
addClass
(
'hide'
);
We still have to address the accessibility problem of hiding content with
display:none
, but
since we're not using a built-in jQuery method anymore, we can control exactly how content
gets hidden (whichever accessible method you prefer is probably fine). For example we could
do something like:
CSS
.hide
{
position
:
absolute
;
top
:
-9999px
;
left
:
-9999px
;
}
.remove
{
