Hidden vs Visible CSS Rules

[00:00:00]
>> Marcy Sutton: Okay, so some more tools for your own debugging cuz I'm gonna send you off to do your own debugging journey here in a moment. This could be come in handy for you. So hidden versus visible CSS. This can really impact things like, where are your focus can go?

[00:00:15]
What HTML is actually read aloud in a screen reader? And I have a Demo button here that I can go and play with in developer tools. I'm gonna dock the dev tools over here on the right so we can see what's going on. So this Demo button, if I Ctrl+Click and Inspect element, I can play with it in this Styles panel.

[00:00:37]
So I have a CSS class here called visually hidden and this is a utility class that I have in every CSS file of every project. It might be called like sr-only. It might be visually hidden without a dash in it, you can call it whatever you want. But the general premise is that it will take an HTML element and render it so that it's part of the pages accessibility information, but it's hidden visually.

[00:01:04]
So this can be useful for things like spans that have screen reader text in them. Headings that you wanna add to a section for semantic purposes, but aren't in the design or aren't in the layout. Visually hidden is a really common utility, but it does render. So sometimes it's not the right tool because you wanna hide something from everyone which would be displayNone.

[00:01:27]
So let's play along with this. I'm gonna start by adding visually-hidden, since I have that class in this files, now we can see it matches. And that button, it's rendering, but it's pulled out of the flow of the document, so it's not reserving that space anymore. And if I go over here in the dev tools, I have the Accessibility inspector.

[00:01:52]
And I can see that it has contents of Demo button. So for a screen reader or assistive technology, I'm still putting that information through accessible APIs. So let's go back to this button, let's play with this other options that we have here cuz there is multiple tools. So I'm gonna delete that class and the next one we look at is a opacity.

[00:02:14]
So I'm just gonna add the style, I'll do opacity: 0;. It reserved its space. So it has not been pulled out of the flow of the layout. It's reserving space, so that might be something I could use to animate. If I need to transition something in, visually hidden those properties are not animateable.

[00:02:37]
displayNone, which we'll look at in a second is also not animateable. So opacity is a tool that you might use in your toolbox. But if I go and look at this, it also says, Demo button. So its contents are being passed through just like the visually hidden class.

[00:02:53]
So it's a way of visually hiding things that reserve the space and still get rendered, technically. So let's look at the next one. So that's opacity: 0. Let's do display: none;. So that pulled it out of the flow, that hid it from everyone. displayNone is also a really common tool that you might use because it hides it from the display and it hides it from assistive technology.

[00:03:17]
Let's see, refresh this. So sometimes if you change the styles on the fly and you're using the Chrome Accessibility Inspector, you might need to click off the button or element and come back because it needs to refresh the tree. But it's now saying that this element is not rendered and it's being ignored.

[00:03:33]
So there is no accessibility information. And if you have things that are maybe inactive, there are parts of your interface that you aren't using right now and they're hidden from view and from everyone, displayNone is a really great tool for that. And then the last one we'll look at is visibility: hidden.

[00:03:52]
So this one also reserved the space for the look at the accessibility of this,. Click off again and come back, just to make sure that it's up to date. This one will, so it reserves the space, but it hides its accessibility information. So it's kind of like opacity, except that it is taking that accessibility information away.

[00:04:15]
So that's another tool that you might use. Maybe you, let's see, when would you use visibility hidden? Sometimes you just need something in the layout that's gonna stay there but you don't want it to be adding to the accessibility information of the page. So when you're debugging and looking for keyword issues and looking at these things, these are some of the styles that you might be looking for.

[00:04:39]
Maybe it's applied just in the middle of a larger class or something. It's good to know how those CSS properties impact accessibility.