Navigation path

Use of the template europa (accessible version)

The code of the current Interinstitutional europa.eu template has been modified to make it fully accessible and compatible with WCAG 2.0 accessibility guidelines.

 

XSL files, HTML structure and new templates for europa.eu

To easily integrate the new europa accessible template in your website, we created new XSL files in the folder europa.eu/wel/template_2009/v2 (XSl presentation). There is an XSl for each XML type (short_content, gallery, event, etc.).

The path for the href xsl:include attribute in the xsl is "wcmcom/europa.eu/template_2009/v2/include_europa.xsl".

This file includes the following XSLs:

  • <xsl:include href="../../common.xsl"/> This is the original common.xsl from europa.eu
  • <xsl:include href="./modified_templates.xsl"/> This xsl contains all the specific templates for the new europa.eu. The name of these templates end with "_2009".
    • There are the following templates:
      <xsl:template name="init_2009">
      <xsl:template name="init_web_references_2009">
      <xsl:template name="list_services_2009">
      <xsl:template name="menu_europa_2009">
  • <xsl:include href="../../label_translations.xsl"/> This is the original label_translations.xsl from europa.eu
  • <xsl:include href="./label_translations_europa.xsl"/> This XSl contains the translations for the new europa.eu.
  • <xsl:include href="../../common_europa.xsl"/> This is the original common_europa.xsl from europa.eu
  • <xsl:include href="./header_footer_europa.xsl"/> This XSL contains the new header and the new footer templates for europa.eu
  • <xsl:include href="../../menu_linkgroup_europa.xsl"/> This is the original menu_linkgroup_europa.xsl from europa.eu
  • <xsl:include href="../../components_europa.xsl"/> This is the original components_europa.xsl from europa.eu

We can find some examples of the HTML version in europa.eu/wel/template_2009/v2/ .

 

There are two options:

1. You migrate an existing site in europa.eu

In this case, you have to follow the instructions below:

  1. Put all your XML files on the "wip" status
  2. Change the include file to wcmcom/europa.eu/template_2009/v2/include_europa.xsl
  3. Modify the init with the init_2009 and the menu with the menu_2009. If you use the init_web_references, we can replace with the init_web_references_2009.
  4. If you don’t use the init_web_reference but the following links:

    <link type="text/css" rel="stylesheet" href="/wel/stylesheets/ii/europa.css" />
    <link type="text/css" media="print" rel="stylesheet" href="/wel/stylesheets/ii/print.css" />
    <link type="text/css" rel="stylesheet" href="/wel/stylesheets/ii/menu.css" />
    <link type="text/css" rel="stylesheet" href="/wel/stylesheets/ii/local.css" />
    <script type="text/javascript" language="javascript" src="/wel/scripts/ii/langnav.js" />

    You can either replace this links with the init_web_references_2009, either replace with the following links:

    <link rel="stylesheet" type="text/css" href="/wel/template-2009/v2/stylesheets/europa.css">
    <link media="print" rel="stylesheet" type="text/css" href="/wel/template-2009/v2/stylesheets/print.css">
    <script src="/wel/template-2009/v2/scripts/corporate.js" type="text/javascript"></script>
  5. Modify the body tag (add the attributes id with the value top and remove the onLoad attribute), add a div tag with an attribute id (value "euLayout") below the body tag (end tag up the end tag body).
  6. Add a div tag with an attribute class (value "euContainer") below the end tag of the header template
  7. Add a div tag with an attribute id (value "euContent") below the end tag of the template menu_2009
  8. If you use the ii_header template, you have to rename it in header. Idem with the ii_footer.
  9. Regenerate the test file
  10. Compare the HTML structure from the test file with the HTML structure from the example files (in  europa.eu/wel/template_2009/v2/)
  11. If there are differences or problems, we have to modify the xsl, and so on.

If there are no differences or problems, we can regenerate all the files.

Warning: The above instructions are guidelines to help to migrate an existing site in europa.eu. They aren’t complete, each site is different. Therefore, there will be adjustments to make.

2. You create a new site in europa.eu

You just have to use the new accessible templates for your site.