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


Summary

Introduction

Roadmap for eXo

Evaluate

Reporting

Issues organization in Jira

Best practices

Demos

2



Introduction

Why Web Accessibility ?

Europe: France and Belgium legislation require web accessibility for all governmental website

eXo has some governmental clients

3



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



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



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



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



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



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



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



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



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



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




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







ECMS

[ACCESS] ACHECKER-106 All onmouseout event handlers have an associated onblur event handler.

link



15







ECMSCS



linklink



16







ECMSCSPORTAL




linklinklink



17







ECMSCSPORTALSOCIAL





linklinklink


link


18







ECMSCSPORTALGTN SOCIAL






linklinklinklinklink



19







ECMSCSPORTALKS GTN SOCIAL







linklinklinklinklinklink



20




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



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



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



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



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



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



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


DEMOS

28



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



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


Thank you!

31

Technology

Web accessibility developers by Bao AN - eXo SEA