Web accessibility developers by Bao AN - eXo SEA

1,165 views

Published on

This is a presentation come from eXo Platform SEA.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,165
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Because next week, Cross team will create issues related to Accessiblity to all team, all Tls need to be informed about this subject.
  • The objectif of Web Accessibility is help disabilities people to understand the meaning of a web page which means that: understand a text, an image, a video . All user can have equal access to information and functionality, that's why a site is designed, developed, and edited correctlty. About history: There are two major Web standards used today to define accessible Web content for people with disabilities - Section508 is published in nineteen ninety eight by US gouvement electronic and information technology to meet accessibility requirements. - Then W3C published a recommendation for version WCAG version1 and 2 in two thousand eight. This guidelines is recognized as a standard as served as a basis for legislation and evaluation method in many countries, specially in european countries, there are some little changing about accessibility standard, for example in France there is RGAA (called Referentiel), this guidelines created in 2009
  • WCAG 2 has tree levels: A, double A and triple A , a higher level includes lower level plus some new rules more difficult. The rules containt restrictions utilisation about html tags, CSS, Scripts, Colors and contrast, media like flash, video, also about behavior and presentation. Please note that RGAA rules are the nearly same with WCAG,
  • Because european laws And the clients need to validate our products Accessible We need to focus with Level AA, it's very important subject for eXo All of gouverment site is late to this standard
  • CROSS Team had tested many web accessibilty testing tools, comercial version and free version, AChecker is an open source Web accessibility evaluation tool. It can be used to review the accessibility of Web pages based on a variety international accessibility guidelines
  • Exo's produts will follow a series of test and validation before a certificate by an expert the first step is Automation then Human, finally an expert will certificate accessiblity
  • when developing any web content, you should start with the basic technology supported and then only provide enhanced features as an option if they user’s browser supports it. This approach is called progressive enhancement. Progressive enhancement doesn’t focus on browser compatibility. Instead, it focuses first on the content, then on presentation of that content, and then on any scripting. This way, regardless of the device or browser a visitor is using, they’ll be able to see your content without any issues. First concentrate on the content structure. By creating well-structured, semantic HTML as the base of your website, you’ll have an easier time with the presentation level of your design. Once your HTML and basic functionality are all set, you’ll want to turn to presentation elements. The vast majority of browsers, including many mobile browsers, support CSS
  • Accessibility will be always supported on eXo's products Web accessibility will be monitored and maintanted periodically
  • Web accessibility developers by Bao AN - eXo SEA

    1. 1. Web accessibility for eXo’s products NGUYEN Bao An [email_address] CROSS Team Developers version
    2. 2. Summary Introduction Roadmap for eXo Evaluate Reporting Issues organization in Jira Best practices Demos
    3. 3. Introduction Why Web Accessibility ? Europe: France and Belgium legislation require web accessibility for all governmental website eXo has some governmental clients
    4. 4. Introduction Definition: Make Web content more accessible to people with disabilities. Web &quot;content&quot; generally refers to the information in a Web page or Web application, including text, images, forms, sounds, and such <ul><li>History: </li></ul><ul><li>USA – Section508 = 1998 </li></ul><ul><li>W3C – WCAG 2.0 Level A, AA , AAA = December 2008 </li></ul><ul><li>Europe </li></ul><ul><ul><ul><li>France: RGAA = october 2009 </li></ul></ul></ul><ul><ul><ul><li>England, Italia, etc </li></ul></ul></ul><ul><ul><ul><li>Asia </li></ul></ul></ul><ul><ul><ul><li>Japan: JIS </li></ul></ul></ul><ul><li>* WCAG (Web Content Accessibility Guidelines) </li></ul><ul><li>** RGAA (Référentiel Général d’Accessiblité pour les Administrations) </li></ul>
    5. 5. Introduction <ul><li>* WCAG (Web Content Accessibility Guidelines) </li></ul><ul><li>** RGAA (Référentiel Général d’Accessiblité pour les Administrations) </li></ul><ul><li>WCAG 2.0 </li></ul><ul><ul><li>Level A: 189 rules </li></ul></ul><ul><ul><li>Level AA: 258 rules (Level A + rules) </li></ul></ul><ul><ul><li>Level AAA: 305 rules (Level AA + rules) </li></ul></ul><ul><li>Rules </li></ul><ul><ul><li>html tags (a, img, h1..h6, button, ol, ul, etc …) </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Scripts </li></ul></ul><ul><ul><li>Color and contrasts </li></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>Behavior and presentation </li></ul></ul>WCAG 2.0 = 98 % RGAA
    6. 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
    7. 7. Evaluate – Automation tools <ul><li>Automation tools </li></ul><ul><ul><ul><li>W3C validator </li></ul></ul></ul><ul><ul><ul><ul><li>XHTML 1.0 Transitional: http://validator.w3.org/ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>CSS 2.1: http://jigsaw.w3.org/css-validator/ </li></ul></ul></ul></ul><ul><ul><ul><li>Achecker </li></ul></ul></ul>Lets talk about Achecker tool... eXo Products Automation tools Certified by an expert Human checks
    8. 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. 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. 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. 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
    12. 12. Reporting Priority FOCUS on Known problems then Potential problems <ul><li>1/ Weekly report to measure eXo Products ACCESSIBILITY level, split by Known and Potential problem </li></ul><ul><ul><li>At the moment </li></ul></ul><ul><li>- 21 Known problems = ~ 1737 errors </li></ul><ul><li>- 50 Potential problems = ~ 6119 potential errors </li></ul><ul><li>Link: https://wiki-int.exoplatform.org/display/PCROSS/ACCESS+Reports+PLF3.5+GA </li></ul>
    13. 13. Issues organization in JIRA <ul><li>2 kind of issues: </li></ul><ul><ul><li>Bugs: for Known and Potential problems identified using Achecker </li></ul></ul><ul><ul><li>New features: </li></ul></ul><ul><ul><ul><li>eXo Products allow people to create content (especially eXo Content) some existing features need to be improved or created , a list will be provided soon to PLs, TLs and Technical Leaders </li></ul></ul></ul><ul><ul><ul><li>Specifications before development are mandatory and needed </li></ul></ul></ul>Work on the issues by Priority : critical first, then major, then minor, and finally trivial
    14. 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. 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. 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. 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. 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. 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. 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. 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. 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
    23. 23. Best practices <ul><li>First, make sur that your webpage is HTML validated and CSS validated </li></ul><ul><li>Second, HTML tags: </li></ul><ul><li>- img with a pertinent alt=‘’ </li></ul><ul><li>- no <b> but <strong>, no <i> but <em> </li></ul><ul><li>- h1 > h2 > h3 > h4 > h5 > h6 </li></ul><ul><li>- table with summary <table summary=&quot;&quot;> and caption </li></ul><ul><li>- a href with title=‘title of link’ </li></ul><ul><li>- input, textarea, select with label </li></ul><ul><ul><ul><ul><li><form action=&quot;..&quot; method=&quot;...&quot;> <label for=&quot; search &quot;>Search in a site</label> <input type=&quot;text&quot; name=&quot;search&quot; id=&quot; search &quot; /> <input type=&quot;submit&quot; value=&quot;Execute search&quot; /> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></form> </li></ul></ul></ul></ul><ul><li>- textarea with label </li></ul><ul><li>- select with label </li></ul><ul><li>- web page has a language default (lang=‘en’) </li></ul><ul><li>- title of a web page must be unique </li></ul><ul><li>- has a site map </li></ul><ul><li>- web site has a section for accessibility presentation </li></ul><ul><li>- and more … </li></ul>
    24. 24. Best practices <ul><li>When you build a web page, keep in mind : </li></ul><ul><ul><ul><li>Logical way, respect elements's order. </li></ul></ul></ul><ul><ul><ul><li>Not only concentrate on interface presentation. </li></ul></ul></ul><ul><ul><ul><li>Use HTML tags correctly (with accurate information) </li></ul></ul></ul><ul><li>An example of img tag: </li></ul>IMG839.jpg avoided Rename to puppy.jpg better
    25. 25. Best practices Progressive enhancement method <ul><li>1 start with content (words and pictures) </li></ul><ul><li>2 Using only semantic html/xhtml mark-up , we make sure that this content makes complete sense. This is the most important bit - it is the only bit that will be seen by: </li></ul><ul><ul><li>search engines </li></ul></ul><ul><ul><li>users with many mobile devices </li></ul></ul><ul><ul><li>users with vision-disabilities who use assistive technologies that allow web pages to be &quot;read&quot; to them etc </li></ul></ul><ul><ul><li>other external systems </li></ul></ul><ul><li>As such, when the content is seen &quot;as is&quot;, it must make complete sense and tell the full story. </li></ul><ul><li>3 Next, using separate CSS files and images , we add the graphic-design elements (the presentation , including page layout, colours, fonts sizes etc). This allows us to make our clients' websites appear attractive and on-brand, whilst allowing users (and search engines) who can't &quot;see&quot; those sites, to still make full sense of their content. </li></ul><ul><li>4 Finally we &quot;layer-over&quot; the behavior , typically, non-html technologies, such as Flash, JavaScript, audio, and video . Search engines, many mobile devices and most assistive technologies make little or no sense of most non-html technologies, so it is important to ensure that meaningful, well-structured content underpins all such behavioral-enhancements. </li></ul>
    26. 26. Best practices - Benefits <ul><li>Cross-browser compatibility : </li></ul><ul><li>Screen reader, internet browser </li></ul><ul><li>Higher SEO </li></ul><ul><ul><li>Google guidelines : </li></ul></ul><ul><ul><li>http://www.google.com/support/webmasters/bin/answer.py?hlrm=en&answer=35769#1 </li></ul></ul><ul><li>Bandwidth savings  </li></ul><ul><li>Positive PR effect, meet web accessibility legal  </li></ul><ul><li>Easier management </li></ul>
    27. 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. 28. DEMOS
    29. 29. Tools and Links <ul><li>Achecker site : </li></ul><ul><li>http://achecker.ca/checker/index.php </li></ul><ul><li>Failed example : </li></ul><ul><li>- http://www.exoplatform.com/company/en/home </li></ul><ul><li>Passed example : </li></ul><ul><li>- http://www.accesskeys.org/ </li></ul><ul><li>More example : </li></ul><ul><li>http://www.w3.org/WAI/demos/bad/ </li></ul><ul><li>Lynx </li></ul><ul><li>Ubuntu (synaptic > lynx) Mac (lynxlet) </li></ul><ul><li>Firefox plugins : </li></ul><ul><ul><li>Web developer toolbar </li></ul></ul><ul><ul><li>Accessibility Evaluation toolbar </li></ul></ul><ul><ul><li>WAVE toolbar </li></ul></ul><ul><li>aDesigner : </li></ul><ul><li>http://www.eclipse.org/actf/downloads/tools/aDesigner/ </li></ul>
    30. 30. Contact <ul><li>CROSS Mailing list </li></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><li>Skype ID : - Damien Lauberton = damien.lauberton </li></ul><ul><li>- Nguyen Bao An = ngbaoan </li></ul><ul><li>- Le Thi Thu Ha = thuhale84 </li></ul>
    31. 31. Thank you!

    ×