This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0. I’ve always wondered why.
Even in James Edwards’ “The anatomy of visually-hidden” I didn’t find the answer because he wasn’t sure either. While testing a client’s site a few minutes ago, I found at least one good reason.
/* A typical .visually-hidden class */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}My client has skip links on their site, and they work perfectly fine in Chrome and Firefox but not in Safari. They use the following code for hiding links visually:
.skip-links a:not(:focus) {
overflow: hidden;
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}As it turns out, links are not focusable in Safari if they have 0 dimensions. Adding 1px padding, border, or width and height fixes the issue.
.skip-links a:not(:focus) {
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
border: 0;
margin: 0;
}So, there you go. That's why you want to keep the 1px height and width in your visually-hidden classes. You can test it in this CodePen.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-07-19T00:00:00+00:00) Visually hidden links with 0 dimensions. Retrieved from https://www.scien.cx/2023/07/19/visually-hidden-links-with-0-dimensions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.