CSS icon accessibility

[cookiecrook]

Since these icons are not accessible by default, you could make them so through the CSS "alt" or older "-webkit-alt" from an older draft of CSS Generated Content Level 3 or 4, or the newer / syntax of the content property.(Commenting from mobile; hit back if you have trouble finding a link.)

.class::before {
    content: "" / "search"; /* alt text for gen content */
    alt: "search"; /* older syntax */
    -webkit-alt: "search"; /* legacy support */
}

[cookiecrook]

You can use these with attr() too.

[wentin]

Nice! I plan to add this soon. Just before pesedo element is often occupied, need to make sure it doesn't change the appearance of the icons.

[cookiecrook]

alt and -webkit-alt won't change any visual display. If you are already using content you'd need to use the original property definition and then overwrite it with the newer syntax.

content: 'foo'; /* works for any browser */
content: 'foo' / 'alt'; /* redefines previous rule in newer browsers that recognize the new syntax; line ignored by older browsers. */