I have enjoyed installing and using Piwik on my site these last several months. However I have come up against a problem with the cookie opt-out facility. I am endeavouring to improve the overall functional accessibility of my site and am using two of the standard validators to assist with this. The problem arises on my Cookies Policy page because the Piwik opt-out is included as an iframe.
I have been able to comply with the requirments of WCAG / Section508 (Cynthia Says) by some gentle tweaking of the iframe code (mainly adding required “content”)
I have been unable to satisfy the requirements of FAE1.1 - the University of Illinois Functional Accessibility Evaluator. This is because it treats the data embedded by the iframe as a separate document - and that document is not properly formatted according to its requirements. As the content and the function of the iframe appears really very small (a short text statement and a single checkbox) could this not be converted to a form or other devise which will incorporate directly into the page?
If you wish to test this, the following is my Cookie Policy page:
For the integration of using a CSS file for the iframe I had already modified the following file:
Template plugins/CoreAdminHome/templates/optOut.tpl
In this template it is possible to modifiy/integrate the missing parts.
However, according to “never hack core” this is only recommended if you can oversee the consequences.
The modification will be overwritten during an update.
This seems to work - certainly the text alters when you check and uncheck the checkbox. The page also validates correctly against the FAE1.1 evaluator. The problem which the unchanged tpl file causes is the introduction of a second header to the page.
It just remains to be seen whether my own actions (when I have opted out as administrator) remain unrecorded in analytics.
I realise I will need to make sure I carry out this deletion whenever there is a Piwik update.
With the iframe you usually insert another complete html page into your page. So you could open the content of the iframe independently using the source of the iframe.
It’s important to use an URL encoder for the CSS-path as described in the document above.
Nice solution as I can adjust the design of the iframe to the style of each website.
This is the result using my modfied template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Piwik Opt-Out</title>
</head>
<body>
<h1>Piwik Opt-Out</h1>
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool.
<br/>
Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
<br/><br/>
<form method="post" action="?module=CoreAdminHome&action=optOut&language=en">
<input type="hidden" name="nonce" value="0f3b3c8523fa806652046b275f3f9125" ></input>
<input type="hidden" name="fuzz" value="1350725628"></input>
<input onclick="this.form.submit()" type="checkbox" id="trackVisits" name="trackVisits" ></input>
<label for="trackVisits"><strong>
You are currently opted out. Click here to opt in. </strong></label>
</form>
</body>
</html>
What I really want to do is to build the form part of the optout into my existing page without the use of an iframe at all. My existing page already has the necessary declarations, language and
- so the optout must not duplicate them. I can see that it would be possible to add a link entitled “If you want to opt out, click here” and that would open a new page.
In a similar manner, I had a lot of trouble validating pages that had an embedded active Google map in them (these were iframes) - again because FAE reports that the page had two headers and two title attributes. Eventually I cured this by replacing the map on the page with an image and referred to the active map as a link.
This is one remaining example of a map built using an external facility built as a standard html page which is then “included” on the page itself. This page will not validate:
)