• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Another Newbie issue: How do you add alts and target to a background image?

Participant ,
Dec 16, 2021 Dec 16, 2021

Copy link to clipboard

Copied

I'm making progress. Solidly into the; Do it. Now do it over, stage of proceedings, but I' getting more familiar with the program.

 

Before I start saving templates, I have what I *think* may be a minor issue to deal with.

 

I have background images. One is a tiled fill over the body area behind the apparant "page" The other  one sits front and center in what I believe would be called the masthead area of the page with the title of that particular collection or the page's purpose. That one is an actual image. I am assuming that it probably ought to be identified?

 

It's linked through the CSS Designer, and it shows up in the selector's list, and I can go to the CSS code and edit it. But being linked through the CSS designer as a background image, it doesn't show up in source code. Only its continer does. I don't know of any reliable way of making it show up in the properties panel to give it an alt or a target description.

 

I was fumbling around with it and it turned up once, but I couldn't get get the link to stick by using either the pointer gismo that you drag to the files list *or* through navigating to it through the folder directories. Nor could I get it to stick when I copy/pasted it from one box to the other. It would paste in, but not stay when I hit return.

 

And then I lost the property panel's recognition that it exists, and since I don't know how I got it to show up the first time, I don't know how to get it back.

 

I could be chasing a chimera and one needn't bother with giving background images an alt at all. But I don't know that. Thought that it would be reasonable to ask before saying the hell with it and carrying on anyhow.

 

Anyone?

Views

157

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Expert , Dec 17, 2021 Dec 17, 2021

Background images don't get alt attributes. That is only for content that doesn't load, either because the file is missing, or if the viewer is using a screen reader.

There's no way to add an alt attribute to images that are being brought in through CSS. It's only added inside <img> tags.

A general rule of thumb: HTML is for content, CSS is for style. 

Votes

Translate

Translate
Community Expert , Dec 17, 2021 Dec 17, 2021

All depends on what the image is used for. 

 

Decorations and patterns don't need to be described to screen readers.  But brands, logos, text, products and anything else of importance should be described for accessibility reasons. 

 

The rule of thumb is this:

  • Use CSS background images for decorations only. 
  • Use HTML <img> for important foreground images.  Add ALT and TITLE attributes to <img> as required by W3C and WCAG standards.

 

Votes

Translate

Translate
Community Expert ,
Dec 17, 2021 Dec 17, 2021

Copy link to clipboard

Copied

Background images don't get alt attributes. That is only for content that doesn't load, either because the file is missing, or if the viewer is using a screen reader.

There's no way to add an alt attribute to images that are being brought in through CSS. It's only added inside <img> tags.

A general rule of thumb: HTML is for content, CSS is for style. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 17, 2021 Dec 17, 2021

Copy link to clipboard

Copied

Thank you. That sorts that problem nicely.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 17, 2021 Dec 17, 2021

Copy link to clipboard

Copied

All depends on what the image is used for. 

 

Decorations and patterns don't need to be described to screen readers.  But brands, logos, text, products and anything else of importance should be described for accessibility reasons. 

 

The rule of thumb is this:

  • Use CSS background images for decorations only. 
  • Use HTML <img> for important foreground images.  Add ALT and TITLE attributes to <img> as required by W3C and WCAG standards.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 17, 2021 Dec 17, 2021

Copy link to clipboard

Copied

LATEST

Sounds like I'm going to have to go back and rebuild my masthead. I can split the background and foreground elements and save the foreground ones as .pngs. 

 

I'm definitely in the; "Do it. Now do it over" stage of this.  At least by the end of it, I'll have learned something.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines