Toggle Visibility When Hiding Elements

The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition then we should always use the visibility attribute, too:

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

See the Pen avNqoe by CSS-Tricks (@css-tricks) on CodePen.

Remember opacity and visibility still leave an element in the document flow. If you need to remove it from flow, there is more work to do. In fact here's a way to think about them...

can make thing invisible can make thing unclickable removes from doc flow can be transitioned can be reversed on child
opacity ya no no yes no
visibility ya ya no yes yes
display ya ya ya no no
pointer-events no ya no no no

If you need to change the display value of an element after a fading, that's tougher. Not really possible in CSS since display isn't transitionable. Snook has written about this, including some JavaScript to help.

Comments

  1. User Avatar
    Nico
    Permalink to comment#

    I had the same problem for my accessible carrousel http://a11y.nicolas-hoffmann.net/carrousel/ : I had to detect when the transition end to add classes on “hidden” content.

    Sometimes it is a real pain in the ass to manage :-\

  2. User Avatar
    Johan
    Permalink to comment#

    It is not just for screen readers but also for keyboard focus navigation.
    There should be another column in that table:

    can make thing unfocusable

    opacity
    no

    visibility
    ya

    display
    ya

    pointer-events
    no

  3. User Avatar
    Johan
    Permalink to comment#

    (markdown table fail, here’s a code block)

      |-----------------|----------------------------|
      |                 | can make thing unfocusable |
      |-----------------|----------------------------|
      | opacity         | no                         |
      |-----------------|----------------------------|
      | visibility      | ya                         |
      |-----------------|----------------------------|
      | display         | ya                         |
      |-----------------|----------------------------|
      | pointer-events  | no                         |
      |-----------------|----------------------------|
    
  4. User Avatar
    Spicy Magpie
    Permalink to comment#

    Though outside the scope of hiding an element, I found a (honest) mistake:

    Actually, the opacity can be deactivated for the children if the target browser has support for the background-blend-mode, mix-blend-mode and isolation CSS properties.

    Those ones have a very limited support, though; older browsers will suffer.

  5. User Avatar
    Eno
    Permalink to comment#

    I’m a bit late, but in the table it should say that visibility cannot be transitioned, since an element can only be fully visible or not (there is no “half-visible” elements). Only thing we can do is use a transition-delay, which is not exactly the same as transitioning the visibility directly.

  6. User Avatar
    Merbin Joe
    Permalink to comment#

    Nice Post, try to add next back button for move to next post. Here very difficult to find your posts.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag