Make Shaarli W3C compliant

[nodiscc]

Originally reported at sebsauvage#192

http://validator.w3.org/ reports 141 errors and 34 warnings on my Shaarli.

[virtualtam]

Running the W3C validator on the public pages of a Shaarli instance containing links to various media (URLs, notes, images, videos), I spotted the following (and easily fixeable) issues:

All pages

• the stylesheet URL is not compliant;
• the alt attribute is mandatory for images.

Home page

• & is not escaped in QRcode links (redundant with Move QR code as a plugin #57?);
• the name attribute is obsolete for links;
• paging IDs are duplicated (top and bottom), classes should be used instead;
• specifying Javascript as the <script> language is deprecated.

Tag cloud, Picture wall

• <center> is deprecated.

Picture wall

• the template declares <div class="picwall_container">, which should be an ID (which is the case in the CSS).

Daily

• & is not escaped in previous/next day links;
• the code used for the dashes surrounding the daily date is invalid and should be replaced by —, see:
  • C1 control range characters are forbidden by HTML5 and should be replaced by Unicode values (Wikipedia);
  • What is the difference between EM Dash #151; and #8212;? (Stack Overflow).

Install page

• the action attribute of the install form must be non-empty;
• the valign attribute on the td element is obsolete.

[nodiscc]

I added checkboxes to each compliance item in the list, feel free to check them if they are resolved. @ArthurHoaro did fix some of them in fe16b01 8079dfd.

[virtualtam]

Thanks for your work @ArthurHoaro, I'll take some time this weekend to take a look at the latest additions :-)

[virtualtam]

Hi, here are the last remaining issues ;-)

All pages

• the stylesheet URL is not compliant;

still present when using a custom CSS: touch inc/user.css should make it appear in the validator:

Error Line 11, Column 81: Bad value inc/user.css?version=0.0.42 beta for attribute href on element link: Illegal character in query: not a URL code point.

…ink type="text/css" rel="stylesheet" href="inc/user.css?version=0.0.42 beta" />

Syntax of URL:
    Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

• the alt attribute is mandatory for images

QRcode images are missing the alt="Some alternative name" attribute; maybe alt could be used instead of title (see http://www.w3.org/wiki/HTML/Elements/img)?

Line XX, Column YY: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

….domain.tld/?BqqvMx"><img src="images/qrcode.png" title="QR-Code"></a></div> -

[dper]

The alt and title tags are not the same. The former is displayed when the image doesn't or can't load. The latter shows up on mouseovers. If you don't know what to use as an alt value, a reasonable idea is the name of the image file itself.

[virtualtam]

@dper hence the link to the W3 documentation.

The point here is that QRcode images are missing an alt attribute, and may not necessarily need to have title="QR-Code" defined (it doesn't bring anything, semantically speaking).

An alternative could be to provide all QR images with meaningful values of alt and title, e.g.

<img src="images/qrcode.png" alt="QR-Code" title="QR-Code for <link timestamp>">

[dper]

@virtualtam Yes. That's why I offered a suggestion of something that already exists and is meaningful. :-) You can make the alt tag be the file name, if you don't have a better option, and it's informative to a certain degree.

I agree that the title tag is probably not needed. Having hover text of QR-code on a QR code is not very pointful. People looking at the image will probably notice what it is when they look at it.