8 Replies Latest reply on Sep 18, 2015 12:42 AM by guusguus

    Edge Animate project: How to make it accessible and comply to W3.org

    guusguus Level 1

      I've made an Edge Animate infographic for a digital magazine. My client wants to use it on his website, but this is a Dutch government website which has to comply to the 'webrichtlijnen', the Dutch version of the W3 guidelines.

      What do I have to do to my infographic to get it approved at:

       

      http://validator.w3.org/

       

      For the Dutchies among us, here are the requirements:

       

      Digitaal - dynamische infographics

      Dynamische infographics zijn interactief. Dat wil zeggen dat gebruikers hier bijvoorbeeld op kunnen klikken of elementen in de infographic kunnen bedienen. Naast de voorwaarden voor print- en drukwerk én statische infographics, gelden de volgende voorwaarden:

       

      • Er wordt/worden geen navigatie/tabbladen gebruikt.
      • Informatie en interactie binnen de infographic vinden binnen een pagina plaats.
      • De gebruikte opmaaktaal is altijd HTML5. Deze HTML5 moet volledig valide zijn volgens de W3C HTML Validator.
      • De gebruikte CSS (versie 2 of 3) moet volledig valide zijn volgens de W3C CSS Validator.

       

      Er wordt gebruik gemaakt van de volgende standaarden en bestandsformaten:

       

      • jQuery (versie 1.8): basis JavaScript-library voor dynamische en interactieve websites, onder andere voor het bewerken van het DOM, de CSS en interactie met de webserver (AJAX). Bij gebruik van een jQuery-script of –plugin, moet door middel van de volgende wrapper in de functie gecontroleerd worden of jQuery aanwezig is op de pagina:

           $script.ready(['jquery'], function() {

           // hier komt de code

           }

       

      • Raphaël (versie 2.0.1): JavaScript-library, geschikt voor het tonen van vector-illustraties.
      • JSON / XML voor datasets.
      • Scalable Vector Graphics (SVG).
      • Een unieke ID, aangeleverd door het Beeldcentrum, wordt door opdrachtnemer verwerkt in de code. Dit ID wordt gebruikt om een koppeling te leggen tussen de infographic en de pagina waarop deze wordt getoond.
      • Een beschrijvend document (release notes) wordt meegeleverd met daarin een beknopte functionele beschrijving van de infographic en een overzicht van de bestanden die worden gebruikt (per versie).
      • Indien relevant worden de volgende bestanden meegeleverd: HTML5, geminified Javascript bestand, geminified CSS2 / CSS3 bestand,
      • aanvullende bestanden, bijvoorbeeld JPG of XML.


      Tnx in advance.


      Guus.



        • 1. Re: Edge Animate project: How to make it accessible and comply to W3.org
          Herbert2001 Level 4

          De door EA gegenereerde html voldoet in principe aan de vereiste beschreven standaard (html 5). EA heeft slechts 1 tag nodig om de animatie te integreren in een pagina:

           

          <div id="Stage" class="EDGE-14496328"></div>

           

          De id "Stage" kan worden vervangen met de unieke ID die zal worden aangeleverd door het Beeldcentrum.

           

          Wanneer je je project publiceert, kun je het mapje met alle aanvullende bestanden overleggen aan het Beeldcentrum.

           

          Ik voorzie echter een potentiële hindernis: volgens de aangeleverde standaarden maakt het Beeldcentrum gebruik van jQuery als Javascript functiebibliotheek, terwijl Edge zijn eigen geminified Javascript bestand gebruikt. EA maakt geen gebruik van jQuery. Eventueel kan het Beeldcentrum daar bezwaar tegen maken - in de standaardenomschrijving wordt er met geen woord gerept over andere Javascript functiebibliotheken.

           

          Dat zou ik even navragen.

           

          En aangezien EA's beeldoptimalisatie behoorlijk abominabel is, zou ik de beelden optimaliseren met Color Quantizer (Win) of ImageOptim en ImageAlpha (Mac) na het publiceren voor dat je alles opstuurt naar het Beeldcentrum.  

          • 2. Re: Edge Animate project: How to make it accessible and comply to W3.org
            guusguus Level 1

            Hee Herbert,

             

            Bedankt. Mijn infographic ligt nu bij beheer van de Rijksoverheid en die gaan morgen even testen.

            Ik geef je reactie ook me, kijken of het lukt.

             

            Heb je hier veel ervaring mee, Animate en Webrichtlijnen?

             

            - - - - - - - - -

            Groet,

            Guus

            • 3. Re: Edge Animate project: How to make it accessible and comply to W3.org
              Herbert2001 Level 4

              Ja, klanten kunnen erg specifieke vereisten stellen. En ja, ik heb behoorlijk wat ervaring op dat gebied (niet enkel op het gebied van web, maar ook print, film, animatie, etc.).

              • 4. Re: Edge Animate project: How to make it accessible and comply to W3.org
                guusguus Level 1

                Hee Herbert,

                 

                De animatie verschijnt niet. Heb jij enig idee?

                 

                Helaas verschijnt deze niet op de pagina. De volgende foutmeldingen worden weergeven:

                This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

                ReferenceError: AdobeEdge is not defined

                1. AdobeEdge.loadComposition('Datastroom_FINAL', 'EDGE-9415109', {

                 

                • 5. Re: Edge Animate project: How to make it accessible and comply to W3.org
                  meebo

                  I was just about to post something like this, so I'm going to upvote your thread. I'm in the same boat - I was creating an Edge module that needs to be accessible and I'm not having any luck. Unfortunately I don't speak Dutch! But hopefully we can get some answers in both English and Dutch.

                   

                  I need to make my published Edge project accessible in two ways - I need to be able to make the text content perceivableh so it gets read by screenreaders and I need it to be keyboard controllable. I'm testing in JAWS and VoiceOver, and my tests have multiple issues:

                   

                  1. By default, the title attribute of a DIV (the only option in the accessibility panel) doesn't get read by JAWS though it does get read by VoiceOver.

                  2. Edge makes everything a DIV and then tries to use onclick actions, but unfortunately onclick on a DIV isn't keyboard compatible.

                   

                  I am using the 'Publish content as static HTML', but that doesn't help much as much of the interactions/styles are still injected.

                  I also can't manually edit the DIVs after the fact to add ARIA, tabIndex or href's since Edge is overwriting them at runtime. (please tell me I'm doing it wrong)

                   

                  I went through all of the available tutorial videos and articles on Edge and haven't found any information on getting accessibility to work.

                   

                  Can we get instructions from Adobe on how to make content within an Edge project truly accessible?

                  Who is the Edge Accessibility Lead at Adobe who we can go to for examples/instructions?

                   

                  Here's a quick example article (not my own) of the issues w/ onload and DIVs:(see chart at the bottom).

                  onclick keyboard accessibility: Is your rich JavaScript app keyboard-friendly?

                  • 6. Re: Edge Animate project: How to make it accessible and comply to W3.org
                    Herbert2001 Level 4

                    Wat voor een omgeving / CMS gebruiken ze bij het Beelddcentrum? Drupal?

                    • 7. Re: Edge Animate project: How to make it accessible and comply to W3.org
                      guusguus Level 1

                      Hey Meebo,

                       

                      I'm in way over my head on the technical site, so I can't even start to help you, I'm sorry.

                       

                      I do agree however, that there's a bit of a task here for Adobe. They're building these really nice products, like EA, but that's useless if it can't meet the demands of the real world.

                      And accessibility, although it's a real pain in the backside for designers, is something we have to take seriously in our work.

                      • 8. Re: Edge Animate project: How to make it accessible and comply to W3.org
                        guusguus Level 1

                        Hippo CMS.


                        Herbert, kan ik jou even direct contacten hierover?

                        Via de Adobe Community?