Javascript How to Make Read More Hide Show Toggle Called Out by a Phrase

You want to hibernate something on a page, then:

          .hide {    brandish: none; }        

Merely wait! By applying that class to an element yous've immediately fabricated that content "inaccessible" past screen readers. You lot've probably known this forever, but still, the poison apple sneaks into our code once in a while.

I don't want to re-hash all the specifics. Your best bet is to read "At present You Meet Me" past Aaron Gustafson on A List Apart to get an understanding of this if you don't already.

One style to encourage yourself to practise the right affair is by creating more appropriate class names. Your regular hide class should position the content off screen, which still leaves information technology screen reader accessible:

          .hide {    position: absolute !of import;    top: -9999px !important;    left: -9999px !of import; }        

I use !important here because if you've gone to the trouble to add together a "hide" class to something, you probably mean information technology and don't desire to think too hard nigh if the specificity value is strong enough. And if you know that you lot demand to brandish: none something, the course should assist you understand it:

          .call up-this-will-NOT-be-read {    display: none !of import; }        

Some other option for accessible hiding comes from some Snook inquiry and the HTML5 boilerplate:

          .visuallyhidden {    position: accented;    overflow: hidden;    clip: rect(0 0 0 0);    meridian: 1px; width: 1px;    margin: -1px; padding: 0; edge: 0;  }        

OK you lot got it. Easy peasy when you're totally in command of class names and all you practise is apply and remove them. Simply things get a little tricker with JS libraries that employ their own CSS. For example in jQuery, subsequently y'all .slideUp(), y'all'll have a display: none in the inline CSS to bargain with. Yes, screen readers run JavaScript and yeah, that's still a problem.

Again Aaron Gustafson has u.s.a. covered there, who suggests applying the accessible class proper name after the sliding is done and so removing the display: none by sliding information technology the other direction.

          var $button = $('#myButton'),     $text   = $('#myText'),     visible = true;  $button.click(role() {   if (visible) {     $text.slideUp('fast',function() {       $text.addClass('hide')            .slideDown(0);     });   } else {     $text.slideUp(0,function() {       $text.removeClass('hibernate')            .slideDown('fast');     });   }   visible = !visible; });        

Here'southward a demo of that:

See the Pen Hiding with jQuery by CSS-Tricks (@css-tricks) on CodePen.

Now we take the tools nosotros need to stop using display: none and start using more than accessible "hiding" methods.

FAQ pages

If you lot're hiding the answer until the question is clicked, hide with an attainable class name. Careful yous don't .hide() and then slideToggle(), that'due south non good plenty!

Labels

Information technology's tempting to use placeholder text as a label replacement (particularly now with some browsers improved UX of leaving the text until yous actually type), merely don't display: none or remove the labeldue south. I recently heard a heartbreaking story about a blind girl trying to apply for higher and the grade had missing labels so she had no thought what to put in what fields. So if you're going to utilise placeholder text as a characterization replacement, use an accessible hiding technique for the labels.

Tabs

But because a console of content isn't the "currently agile" one doesn't mean it should be inaccessible. Hide it with an accessible hiding technique instead. Or, you may not even demand to. If all the panels are the same acme, you can merely flip-flop which ones is visible by adjusting z-index.

@media queries

Turning on Voice Over in OS Ten and using Safari is a screen reader. At present imagine that Safari window was open to a very narrow width and the page had some @media queries for handling smaller viewports. And say that @media query hides some things with display: none in order to amend visually accomodate the space. This could be good or bad for accessibility. Are you lot hiding a bunch of crap that isn't of import to the page? Or are you hiding useful things that a person using a screen reader should take access to like they normally would.

No Adept Here

This entire post is based on the premise that display: none is bad for accessibility. It's not based on my deep and thorough understanding of screen readers and general accessibility. If yous accept more to add, things to correct, or personal experience to share, please do.

spearsaftely1985.blogspot.com

Source: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

Share this post