Accessible infographic for Dutch Government (Webrichtlijnen)



I’m a designer working for a lot of government clients in the Netherlands. There are strict rules for sites, regarding accessibility. Pretty much WCAG 2.0, buit there is a validation system which rejects almost everything. And no one can tell me why, because they themselves know nothing about it. Basically “Computer says no”. A lot of my clients want interactive infographics, I can design and make them work in Hype, and there it ends because of their demands, see below.

I’m looking for a Hype Expert who can take my designed and working infographic and can make it compliant to these rules:

• No navigation / tabs are being used.

  • Find information and interaction within the infographic within a page.
  • The markup language used is HTML5. This HTML5 must be fully valid according to the W3C HTML Validator.
  • The CSS (Version 2 or 3) used must be fully valid according to the W3C CSS Validator.
  • The infographic should work well in the following browsers:
    O Explorer (9 and above)
    O Mozilla Firefox
    O Google Chrome
    O Safari
    O opera
    For these browsers, we will support at least the last five updates
  • The following standards and file formats are used:
    O jQuery (Version 1.8)
    O Raphael (version 2.0.1)
    O JSON / XML for datasets
    O Scalable Vector Graphics (SVG) (Note IE8 Fallback)
  • The paths in the CSS and JavaScript file must be relative. The files are automatically loaded by our CMS on the page.
  • Paths for creating Ajax requests should be variable and their presence should be disclosed.
  • For browsers without javascript, an alternative is available (see also U.3 ‘Layers Layout’).
  • For browsers without text-browsers (CSS) support, the content is available and understandable. In this case, please refer to the display attributes in the CSS (see also U.3 ‘Layers Layout’).
  • Place a DIV tag with a unique class of ID to infographic and structure the CSS so that all elements are provided with their parent. Use as parent the unique class or ID of the surrounding tag such as: .unique-class or id. Element {color: # 000000;}
  • A descriptive document (release notes) is included containing a brief functional description of the infographic and an overview of the files used (per version).
  • The files themselves are supplied in a ZIP file, which contains one folder containing all files. This folder must also contain a code snippet. This is a file with only the HTML code, without DIV tags (but with the unique ID in it).
  • If relevant, the following files are included: HTML5, Geminified Javascript file, Geminified CSS2 / CSS3 file, additional files, such as images or XML.

It’s a long shot I know, but maybe someone has a solution, so I can design with Hype, instead of hiring someone to build everything again from the ground cup. That way saving my clients lots of money.