696176 - Affiliates: banner coding does not validate

Status: VERIFIED FIXED

(Firefox Affiliates Graveyard :: affiliates.mozilla.org, defect)

Description

[Ken Saunders]

User Agent: Mozilla/5.0 (Windows NT 6.0; rv:10.0a1) Gecko/20111008 Firefox/10.0a1
Build ID: 20111008030946



Actual results:

Affiliates promotional banner code does not pass W3C validator. At least for HTML 4.01 Strict.
there is no attribute "BORDER"
NET-enabling start-tag requires SHORTTAG YES
Example:
<img src="http://affiliates-cdn.mozilla.org/media/uploads/banners/upgrade-tall-blue-EN.png" alt="" border="0" />
This validates
<img src="http://affiliates-cdn.mozilla.org/media/uploads/banners/upgrade-tall-blue-EN.png" alt="">

Most blogging and content management systems sets img border to 0 in their style sheets, but if it is felt that it should be added to the affiliates code, inline styles could be used instead and it would pass.

<img style="border: 0px" src="http://affiliates-cdn.mozilla.org/media/uploads/banners/upgrade-tall-blue-EN.png" alt="">

Also, the alt attribute should not be left blank. Just having it passes validation, but it doesn't help those that it is intended to by being left blank.

Comment 1

[Schalk Neethling [:espressive]]

1) We should have a img { border: 0; } in out style sheet which will remove the need for border="0" as well as the inlien alternative. I f someone then wants a border around an image they con override the above for their specific needs.

2) We should never have an empty alt attribute, if there is no content for an image rather do not add the attribute at all.

I am taking this one but, will need some assistance with the values for the alt attribute as I am sure this will also be localized and hance, I will need to appropriate keys.

Comment 2

[Schalk Neethling [:espressive]]

2) We should never have an empty alt attribute, <strike>if there is no content for an image rather do not add the attribute at all.</strike>

Comment 3

[Fred Wenzel [:wenzel]]

(In reply to Schalk Neethling from comment #1)
> 1) We should have a img { border: 0; } in out style sheet which will remove
> the need for border="0" as well as the inlien alternative. I f someone then
> wants a border around an image they con override the above for their
> specific needs.

I don't think we give people any style information. As far as I know, we just give them an image tag to put on their blogs. That tag needs to contain everything.

> 2) We should never have an empty alt attribute, if there is no content for
> an image rather do not add the attribute at all.

That's not valid in HTML before HTML5 (neither HTML4 nor XHTML). So either fill in an alt tag or add one that's empty, don't omit it. I woudl even add a closing slash (<img src=... />) because that's valid in HTML5 *and* XHTML.

Comment 4

[Schalk Neethling [:espressive]]

[:wenzel] Completely agree, that is why I wanted to strike out the last bit of that comment, don;t know what I was thinking ;) And +1 on the self closing tag for img and style info, the author that uses the code should determine whether they want a border or not.

Comment 5

[Fred Wenzel [:wenzel]]

(In reply to Schalk Neethling from comment #4)
> the author that uses the code should
> determine whether they want a border or not.

Possibly. If ``style="border:0"`` ensures that our banners look good anywhere, then I am fine doing that as well. On the downside, that violates CSP[1]. Looks like a battle we can't win. Since browsers don't add a border on a linked image by default anymore (right?), we could just leave it up to the developer indeed.

[1] https://wiki.mozilla.org/Security/CSP

Comment 6

[Schalk Neethling [:espressive]]

[:wenzel] I believe best to leave it up to the developer/site owner

Comment 7

[Paul Booker]

(In reply to Schalk Neethling from comment #6)
> [:wenzel] I believe best to leave it up to the developer/site owner

+1 We could also provide the developer/site owner with some simple documentation on affiliates.mozilla.org

// Paul Booker

Comment 8

[Schalk Neethling [:espressive]]

https://github.com/mozilla/affiliates/pull/63

Comment 9

[Osmose [:osmose, :mkelly]]

Fixed in https://github.com/mozilla/affiliates/commit/e122c45b67f4fdab5a0247754c0240753563744e

Comment 10

[Matt Brandt [:mbrandt]]

QA verified on prod. The alt tag is no longer empty, contains translated strings, and the "border=0" has been dropped from the html snippet.

<a href="http://affiliates.mozilla.org/link/banner/5572"><img src="http://affiliates.mozilla.org/media/uploads/banners/download_beta_small.png" alt="Download Beta" /></a>

<a href="http://affiliates.mozilla.org/link/banner/5837"><img src="http://affiliates.mozilla.org/media/uploads/banners/download-small-blue-ES.png" alt="Descargar: Rápido, Divertido y Genial" /></a>