This is a presentation come from eXo Platform SEA.

1. Web accessibility for eXo’s products NGUYEN Bao An [email_address] CROSS Team Developers version

2. Summary Introduction Roadmap for eXo Evaluate Reporting Issues organization in Jira Best practices Demos

3. Introduction Why Web Accessibility ? Europe: France and Belgium legislation require web accessibility for all governmental website eXo has some governmental clients

6. Roadmap for eXo European laws required all governmental websites must accessible by A pril 2012 eXo Products will be certificated “ Accessible ” using = WCAG 2.0 Level AA PLF Roadmap - 28/12/2011: Platform 3.5.1 - 29/02/2012: Platform 3.5.2 - 04/04/2012: Platform 3.5.3 = compliance with WCAG 2.0 Level AA

8. Evaluate - Achecker Achecker: - Tool to check Accessibility level on a HTML page - Total number of checkable rules using this tool = 310 - can be used as a Web services REST - free and open source Achecker tool link: http://achecker.ca/checker/index.php (Achecker eXo instance will arrive soon)

9. Evaluate – Achecker Achecker allow us to detect several kind of problems: - Known problems: problems that we are able to detect automatically using Achecker tool, easy to fix most of the time - Potential problems: potential problems that are detected by Achecker, a human check is needed to determine if it is a real problem... Each Achecker rule are describe with a full documentation, access this doc via: http://achecker.ca/checker/suggestion.php?id=[ACHECKER ID]

10. Evaluate – Human checks Tool - Lynx browser - Firefox plugins - Web accessibility toolbar - Web developer tool bar - Wave toolbar - Adesigner Accessibility Test Referential for testers = Test Campaign eXo’s products Automation tools Certificated by an expert Human Check

11. Evaluate eXo Products Automation tools Certificated by an expert Human checks Combination with automation tools + human checks to verify all elements accessible W3C validator Achecker Lynx browser Firefox plugins aDesigner NVDA WAVE

14. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS Label = “ACCESS-AA” Example of one issue

15. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS ECMS [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. link Example of one issue Label = “ACCESS-AA”

16. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS ECMS CS [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. link link Example of one issue Label = “ACCESS-AA”

17. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS ECMS CS PORTAL [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. link link link Example of one issue Label = “ACCESS-AA”

18. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS ECMS CS PORTAL SOCIAL [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. link link link Example of one issue link Label = “ACCESS-AA”

19. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS ECMS CS PORTAL GTN SOCIAL [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. link link link link link Example of one issue Label = “ACCESS-AA”

20. Issues organization in JIRA CROSS issues are parent in all issues Achecker generates ID http://achecker.ca/checker/suggestion.php?id= 106 [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. CROSS ECMS CS PORTAL KS GTN SOCIAL [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. [ACCESS] ACHECKER- 106 All onmouseout event handlers have an associated onblur event handler. link link link link link link Example of one issue Label = “ACCESS-AA”

21. Issues organization in JIRA Very important: - Because regex search doesn't perform a dynamic search, CROSS Team can not provide a correct search result, each team need to work on the issues according to their experience and knowledge - Please, spend time to estimate all issues related to your Products - Focus on the FRONT end (public mode) : work on each issue and keep in mind that the main fixes should be done on the FRONT end files (java if they are used to product html, gtmpl, css, js, html) that are used especially in Public Mode (not login)

22. Best practices No frame Contrast and color Seperation CSS ↔ HTML alt ='' Site map and search engine title W3C validator HTML CSS Javascript alternative Validation from server

27. Best practices - Education Web Accessibility is not an event that happens once and then it's over. It is an ongoing process. Web accessibility will be monitored and maintainted periodically Today : 10% of the World’s population , or 650 million people , live with a disability http://www.un.org/disabilities/convention/facts.shtml

28. DEMOS

31. Thank you!