Trucos CSS
CSS Trick

Alt Text for CSS Content

Add accessible descriptions to images injected via CSS content property.

#css #accessibility #a11y #content

Browser Support

✓ Chrome 77+ ✓ Firefox 104+ ✓ Safari 17.4+ ✗ Edge

Alt Text in CSS Content

Add accessible descriptions to CSS-injected images using / syntax.

.icon::before {
  content: url("icon.svg") / "Description";
}

Live Demo

Content Alt Text
A11Y
20px
CSS Code
.external-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
color: white;
font-weight: 600;
border-radius: 0.5rem;
text-decoration: none;
}
.external-link::after {
content: "↗" / "External link icon";
font-size: 20px;
line-height: 1;
}
.sr-hint {
margin-top: 1rem;
padding: 0.75rem;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 0.5rem;
font-size: 0.8rem;
color: #22c55e;
text-align: center;
}

The forward slash separates the image from its accessible description.

Comparte este CSS trick

Comentarios