adding alt to theme background images

  • Unknown's avatar
    elkhartadvocacyforthedisabled · Member ·

    how do I add an alt tag to an existing theme background image to bring the website to basic accessibility standards? I have premium but apparently no one is home on weekends when I time to work on the website. Please help

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, background images are there for aesthetic reasons and do not have to have alt tags. Only images that convey information need to have alt tags. You can read more on that in this post that I found in a search. (Excuse his sort of flippant attitude. :) )

  • Unknown's avatar
    elkhartadvocacyforthedisabled · Member ·

    Yeah it was flippant. By the way alt tags are not there for aesthetic reasons. Without alt tags screen readers for the blind don’t work. It is a basic requirement even for limited 508 standards. DOJ is currently updating regulations on web accessibility and will be making much more stringent ones. So if you have business page you may well get sued in the future for failing to meet even basic standards of accessibility.

  • Unknown's avatar
    elkhartadvocacyforthedisabled · Member ·

    PS: I ran my site through WAVE – an accessibility checker recommended by disability rights agencies and theme I have has major problems.

  • Unknown's avatar
    elkhartadvocacyforthedisabled · Member ·

    Here is what your flippant answer missed. Just for giggles, I ran the main forum page through WAVE. Here are the results:
    2 Errors – the most severe warnings (no form label – 1 and no background image alt tag – 1

    21 Alerts – suspicious link – 1, noscript element – 2, and 18 redundant title texts
    79 contrast errors. – These errors are not the most severe but make it very difficult for people with color blindness and low vision to see the page.

    So, just for aesthetic purposes huh? Word press needs to get on it to avoid being sued. If a persons with severe vision problems tries to use the support forums, they will be out of luck and might just sue word press.

    I’m not an experience programmer but I know the law and you don’t.

  • Unknown's avatar
    thesacredpath · Member ·

    I did not mean to convey that alt tags where there for aesthetic reasons, but the background image itself is there for aesthetic reasons and does not convey any information. Anything added via CSS is considered part of the visual design of a site and should not make it into a screen reader as it could make it more frustrating and difficult for visually impaired visitors to get to the actual content. If an image is meant to convey information, then it most definitely should have an alt, and even a title tag.

    I’m going to contact our theme Accessibility person for you and get them to respond so that you can discuss all this with them.

  • Unknown's avatar
    elkhartadvocacyforthedisabled · Member ·

    the problem is that it doesn’t matter to those inspecting websites. Every single image outside of buttons and things like that have to have an alt tag you will get dinged.

  • Unknown's avatar
    thesacredpath · Member ·

    My understanding is that screen readers do not “read” the CSS since it is a document that is used by browsers to style and position the visual elements of a web page and that they only read what is in the HTML of the page. The background image on your site is set in the CSS because it doesn’t convey any information.

    I’ll offer this that I had read a while ago (just found it again). In particular the section on Unimportant Images and CSS Images: http://www.interactiveaccessibility.com/blog/making-images-visible-blind-users#.VxPbTWOXAeE

    Hopefully our accessibility person can help clear things up on this.

  • Unknown's avatar
    davidalankennedy · Member ·

    Hi there!

    Thanks for caring about accessibility. I make themes here at WordPress.com, and specialize in accessibility. I’ll do my best to answer your questions.

    the problem is that it doesn’t matter to those inspecting websites. Every single image outside of buttons and things like that have to have an alt tag you will get dinged.

    All images in HTML need to have an alt attribute, but that attribute can be empty, like this: alt="" That tells a screen reader that the image is decorative or does not carry any meaning or context important to the content. See: http://webaim.org/techniques/alttext/#basics

    Images inserted with CSS, like background images, can’t have and don’t need alternative text. It’s best practice to not insert an image via CSS that conveys meaning and context to the user. We follow this when making themes, and it’s important for a site owner to do this as well when managing their content. The background image you’re using on your site is decorative and doesn’t need to be conveyed to a screen reader in any way. See: http://webaim.org/techniques/alttext/#background

    From that page:

    It is not possible to add alternative text directly to CSS or other background images. Images that convey content should not generally be placed in page or element backgrounds.

    And:

    Background images can, however, be used for decorative images, thus removing the image from the content flow of the page and removing the need for an empty alt attribute.

    I ran the main forum page through WAVE.

    What page of your site did you test? And how did you test with Wave? Did you use the online version, or one of the browser plugins?

    I ran a few pages of your site through Wave. I found two minor errors, one not related to the theme. I’ve created tickets for these issues so we can fix them.

  • The topic ‘adding alt to theme background images’ is closed to new replies.