Web accessibility developers by Bao AN - eXo SEA
-
Upload
thuydang -
Category
Technology
-
view
941 -
download
1
description
Transcript of Web accessibility developers by Bao AN - eXo SEA
www.exoplatform.com
Copyright 2011 eXo Platform
Web accessibility for eXo’s products
NGUYEN Bao [email protected]
mCROSS Team
Developers
version
1
2www.exoplatform.com
Copyright 2011 eXo Platform
Summary
Introduction
Roadmap for eXo
Evaluate
Reporting
Issues organization in Jira
Best practices
Demos
2
3www.exoplatform.com
Copyright 2011 eXo Platform
Introduction
Why Web Accessibility ?
Europe: France and Belgium legislation require web accessibility for all governmental website
eXo has some governmental clients
3
4www.exoplatform.com
Copyright 2011 eXo Platform
Introduction
Definition:Make Web content more accessible to people with disabilities. Web "content" generally refers to the information in a Web page or Web application, including text, images, forms, sounds, and such History:
USA – Section508 = 1998
W3C – WCAG 2.0 Level A, AA, AAA = December 2008
Europe • France: RGAA = october 2009• England, Italia, etc
Asia• Japan: JIS
•* WCAG (Web Content Accessibility Guidelines)•** RGAA (Référentiel Général d’Accessiblité pour les Administrations)
4
5www.exoplatform.com
Copyright 2011 eXo Platform
Introduction
•* WCAG (Web Content Accessibility Guidelines)•** RGAA (Référentiel Général d’Accessiblité pour les Administrations)
WCAG 2.0– Level A: 189 rules – Level AA: 258 rules (Level A + rules)– Level AAA: 305 rules (Level AA + rules)
Rules – html tags (a, img, h1..h6, button, ol, ul, etc …)– CSS– Scripts– Color and contrasts– Flash– Behavior and presentation
WCAG 2.0 = 98 % RGAA
5
6www.exoplatform.com
Copyright 2011 eXo Platform
Roadmap for eXo
European laws required all governmental websites must accessible by April 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
6
7www.exoplatform.com
Copyright 2011 eXo Platform
Evaluate – Automation tools
eXo Products
Automation tools Certified
by an expert
Human checks
Automation tools
• W3C validator–XHTML 1.0 Transitional: http://validator.w3.org/–CSS 2.1: http://jigsaw.w3.org/css-validator/
• Achecker
Lets talk about Achecker tool...
7
8www.exoplatform.com
Copyright 2011 eXo Platform
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)
8
9www.exoplatform.com
Copyright 2011 eXo Platform
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]
9
10www.exoplatform.com
Copyright 2011 eXo Platform
Evaluate – Human checks
eXo’s products
Automation tools Certificate
d by an expert
Human Check
Tool- Lynx browser
- Firefox plugins- Web accessibility toolbar- Web developer tool bar- Wave toolbar
- Adesigner
Accessibility Test Referential for testers = Test Campaign
10
11www.exoplatform.com
Copyright 2011 eXo Platform
Evaluate
eXo Products
Automation tools Certificate
d by an expert
Human checks
Combination with automation tools + human checks to verify all elements accessible
W3C validatorAchecker
Lynx browserFirefox pluginsaDesignerNVDAWAVE
11
12www.exoplatform.com
Copyright 2011 eXo Platform
Reporting
Priority
FOCUS on Known problems then Potential problems
1/ Weekly report to measure eXo Products ACCESSIBILITY level, split by Known and Potential problem
– At the moment- 21 Known problems = ~ 1737 errors- 50 Potential problems = ~ 6119 potential errors
Link: https://wiki-int.exoplatform.org/display/PCROSS/ACCESS+Reports+PLF3.5+GA
12
13www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
2 kind of issues: – Bugs: for Known and Potential problems identified using
Achecker
– New features:
• 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
• Specifications before development are mandatory and needed
13
Work on the issues by Priority: critical first, then major, then minor, and finally trivial
14www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://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
14
15www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://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”
15
16www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://achecker.ca/checker/suggestion.php?id=106
[ACCESS] ACHECKER-106 All onmouseout event handlers have an associated onblur event handler.CROSS
ECMSCS
[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.
linklink
Example of one issue
Label = “ACCESS-AA”
16
17www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://achecker.ca/checker/suggestion.php?id=106
[ACCESS] ACHECKER-106 All onmouseout event handlers have an associated onblur event handler.CROSS
ECMSCSPORTAL
[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.
linklinklink
Example of one issue
Label = “ACCESS-AA”
17
18www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://achecker.ca/checker/suggestion.php?id=106
[ACCESS] ACHECKER-106 All onmouseout event handlers have an associated onblur event handler.CROSS
ECMSCSPORTALSOCIAL
[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.
linklinklink
Example of one issue
link
Label = “ACCESS-AA”
18
19www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://achecker.ca/checker/suggestion.php?id=106
[ACCESS] ACHECKER-106 All onmouseout event handlers have an associated onblur event handler.CROSS
ECMSCSPORTALGTN 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.
linklinklinklinklink
Example of one issue
Label = “ACCESS-AA”
19
20www.exoplatform.com
Copyright 2011 eXo Platform
Issues organization in JIRA
CROSS issues are parent in all issues
Achecker generates IDhttp://achecker.ca/checker/suggestion.php?id=106
[ACCESS] ACHECKER-106 All onmouseout event handlers have an associated onblur event handler.CROSS
ECMSCSPORTALKS 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.
linklinklinklinklinklink
Example of one issue
Label = “ACCESS-AA”
20
21www.exoplatform.com
Copyright 2011 eXo Platform
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)
21
22www.exoplatform.com
Copyright 2011 eXo Platform
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
22
23www.exoplatform.com
Copyright 2011 eXo Platform
Best practices
First, make sur that your webpage is HTML validated and CSS validated
Second, HTML tags:- img with a pertinent alt=‘’- no <b> but <strong>, no <i> but <em>- h1 > h2 > h3 > h4 > h5 > h6- table with summary <table summary=""> and caption- a href with title=‘title of link’- input, textarea, select with label
<form action=".." method="..."> <label for="search">Search in a site</label> <input type="text" name="search" id="search" /> <input type="submit" value="Execute search" />
</form>- textarea with label- select with label- web page has a language default (lang=‘en’)- title of a web page must be unique- has a site map- web site has a section for accessibility presentation- and more …
23
24www.exoplatform.com
Copyright 2011 eXo Platform
Best practices
When you build a web page, keep in mind :•Logical way, respect elements's order.•Not only concentrate on interface presentation.•Use HTML tags correctly (with accurate information)
An example of img tag:
IMG839.jpg avoided
Rename topuppy.jpg better
24
25www.exoplatform.com
Copyright 2011 eXo Platform
Best practices
Progressive enhancement method
1 start with content (words and pictures)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:
search enginesusers with many mobile devicesusers with vision-disabilities who use assistive technologies that allow
web pages to be "read" to them etc other external systems
As such, when the content is seen "as is", it must make complete sense and tell the full story.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 "see" those sites, to still make full sense of their content.4 Finally we "layer-over" 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.
25
26www.exoplatform.com
Copyright 2011 eXo Platform
Best practices - Benefits
Cross-browser compatibility :Screen reader, internet browser
Higher SEO – Google guidelines : http://www.google.com/support/webmasters/bin/answer.py?
hlrm=en&answer=35769#1
Bandwidth savings
Positive PR effect, meet web accessibility legal
Easier management
26
27www.exoplatform.com
Copyright 2011 eXo Platform
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 disabilityhttp://www.un.org/disabilities/convention/facts.shtml
27
www.exoplatform.com
Copyright 2011 eXo Platform
DEMOS
28
29www.exoplatform.com
Copyright 2011 eXo Platform
Tools and Links
Achecker site :http://achecker.ca/checker/index.php
Failed example :- http://www.exoplatform.com/company/en/home
Passed example :- http://www.accesskeys.org/
More example : http://www.w3.org/WAI/demos/bad/
LynxUbuntu (synaptic > lynx) Mac (lynxlet)
Firefox plugins :– Web developer toolbar– Accessibility Evaluation toolbar– WAVE toolbar
aDesigner :http://www.eclipse.org/actf/downloads/tools/aDesigner/
2929
30www.exoplatform.com
Copyright 2011 eXo Platform
Contact
CROSS Mailing list• [email protected]• [email protected]• [email protected]
Skype ID : - Damien Lauberton = damien.lauberton- Nguyen Bao An = ngbaoan- Le Thi Thu Ha = thuhale84
30
www.exoplatform.com
Copyright 2011 eXo Platform
Thank you!
31