setting text color to transparent for hiding accessibility content?

问题

I have a bunch of tags with background-images properties that I would like to give some content for screenreaders but I obviously can't give it an alt attribute since they are not <img> tags.

Would screenreaders be able to read the content as long as I set the text color to transparent?

I would not like to use display:none or visibility:hidden as I've read that screenreaders will not read those content and can also be penalized by google for hiding content. What are my options to accomplish this?

回答1:

You could use transparent foreground color - this might have the side effect of drawing a big boundary around the text when a screen reader like VoiceOver is turned on - this can be a problem for a user using a screen reader with a screen magnifier. The top-left positioning technique works but suffers from focus loss problems on some platforms.

The best way to do it for simple text is to use the following CSS class:

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

来源：https://stackoverflow.com/questions/30514471/setting-text-color-to-transparent-for-hiding-accessibility-content