0

Beginner question so forgive me.

I have alt tags on images for accessibility.

However when the image is unavailable it displays the alt which is a title for a movie. Below this is the actual title for the movie. The title is displayed twice which doesn't look great.

So is there a way of not displaying the alt tag? whilst still of course keeping it for screen readers etc?

If so then how.

If not then can you style the alt?

Noob question I know, I just want to stick to best accessibility practices whilst make nice looking sites.

Improve this question
5
  • How often are your images unavailable? That should be your main concern, not hiding alt text
    – Smokey Dawson
    Commented Mar 3, 2020 at 2:14
  • There is no such thing as an "alt" tag. Do you mean the alt attribute?
    – Rob
    Commented Mar 3, 2020 at 2:20
  • Does this answer your question? Can I style an image's ALT text with CSS?
    – Rob
    Commented Mar 3, 2020 at 2:23
  • I know you have an accepted answer for this but could you share a code snippet (just the outputted HTML) of each movie section. Odds are you don't need any alt attributes at all as the images are decorative (so alt="" can be used and role="presentation"). At the moment it sounds like it is less accessible with alt attributes as screen reader users would hear the same text twice, once for the image, once again for the title.
    – GrahamTheDev
    Commented Mar 3, 2020 at 7:56
  • A more complicated topic than one might think. I tested situations where both alt text and title text were present across browsers and screen readers a while back, and I found the resulting announcements were wildly unpredictable. Based on both empirical evidence and the W3 decision tree, the empty alt attribute (as @melvinalvarez suggests) is optimal when title text or other adequate labeling exists.
    – cage rattler
    Commented Mar 3, 2020 at 15:02

2 Answers 2

Reset to default
2

yes, you can style alt tags and it is good practice especially in email newsletters or platforms that might block image loading. All you have to do is to either add inline styling on the img tag or add the styles externally within the img (font, color, size, alignment, etc.)

The next best thing you can do for your title and alt problem is to still use an alt tag but leave it blank. This would allow screen readers to still recognize the existence of the alt tag while still having context as the title of the movie will still be displayed/read.

Improve this answer
0

However when the image is unavailable it displays the alt which is a title for a movie. Below this is the actual title for the movie. The title is displayed twice which doesn't look great.

I believe this is what you want:

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
<img class="hide-text" src="example.com" alt="some text">

See also: Replacing the -9999px hack (new image replacement).

Of course you can apply any other text styling. Text readers will still read the alt text.

So is there a way of not displaying the alt tag? whilst still of course keeping it for screen readers etc?

Add the text that describes the image with a the aria-hidden attribute, this tells compatible screen readers to skip the element.

Note: Ideally you would add the visible description of the image with a <figure> and <figcaption>.

See also: Some Things About alt Text.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.