Implementing Accessibility inLiferay 6.1Julio CamareroLiferay Core Developer, WCM Lead
Accessibility?  Accessibility is the degree to which a product, device,          service, or environment is available to  ...
.. some numbers ...                                                24,819,000 (9.9%)Almost 1 out of 5 peoplesuffers some d...
... some numbers ...        birth             accident   old   other     No                disease              age       ...
... some numbers ...        birth             accident   old   other     No                disease              age       ...
... some numbers ...                     listen       walk or see            talk personal capacity   mental        move  ...
.. and what about the web? Inclusive practice of making websites usable by people of                   all abilities and d...
Why ?
Number of potential users increasesc
es...  m e u n it   isa    rt oppo
Better userexperience
Motivation for accessibility• The number of potential users increases• Let’s give the same opportunities to everyone• Tech...
let me show you one example...
Users who will take advantage...• Disabled users and ...   • old people   • people with slow internet connections   • peop...
Technology is changing the game...
Technology is changing the game...     x
Technology is changing the game...     x
How do disabled people use the web?
How do disabled people use the web?Resize the page
How do disabled people use the web?Resize the page                                 change                                c...
How do disabled people use the web?Resize the page                                 change                                c...
How do disabled people use the web?
How do disabled people use the web?Use the keyboard
How do disabled people use the web?Use the keyboard                            Specific                            devices...
is my website accessible?
Validation and Certifications• There are standards to validate a site is accessible     (WCAG1.0, WCAG2.0, Section 508, RG...
WCAG2.0 (by W3C)• Guidelines independent of the technology (flash, html...)• They provide “enough” successful criterion (b...
ARIA• Recommended technique by WCAG2.0• Provides semantic information to our HTML to give more    context to users using a...
... and is Liferay   accessible?
Yes, but keep in mind...              Your Content   Liferay                  35%         15%                     Your the...
Liferay Validation• Our Goal  • Validate AA level of WCAG2.0 in all the portal  • Validate HTML5• Where are we right now? ...
...and we keep improving• We have worked hard to validate WCAG2.0:   • apply ARIA   • improve our markup   • more details ...
Our goal• All Liferay Portlets and Themes should be    accessible out of the box• Provide tools to make it easier to creat...
Are there any Websites built with Liferay withcertified Accessibility?
Accessible Websiteshttp://www.liferay.com/es/community/wiki/-/wiki/Main/Accessible+Liferay+Websites
what aboutWCAG2.0?  Level A and Level AA
Perceptible   Content must be perceptible by all users (visually,     by sound...)
Perceptible   Content must be perceptible by all users (visually,     by sound...)   Information can not be only visual!  ...
Additional and Hidden text• Use CSS classes to hide/show elements    dynamically.  • aui-helper-hidden: Hides the element ...
Operable   Content must be operable by users with differnet     devices (mouse, keyboard...)                    All these ...
Operable   Content must be operable by users with differnet     devices (mouse, keyboard...)  Avoid using mouse-only event...
Use ckEditor• WCAG2.0 compliant    <liferay-ui:input-editor />• Provides a good user experience in    most screen readers.
Understandable   Users must be able to understand the content,     how it is organized and how to interact with it.
Understandable   Users must be able to understand the content,     how it is organized and how to interact with it.    Sho...
Robust   Content must be properly structured to allow user     applications understand it.
Robust   Content must be properly structured to allow user     applications understand it.   • Avoid tables for layouts   ...
Use Liferay Components•   Maintained and improved by Liferay incorporating feedback      from millions of users•   Alloy F...
Write Semantic Html• A link should be a link (<a>)• Headers should go in order (<h1>, <h2>, <h3>...)• A list should be a l...
Html validation• We have some tricks which improve performance but     don’t validate html.• It can be enabled in the conf...
Some Advices
Commonmistakes
Specific-device Events• Avoid using javascript events which only work with    some devices:   • onMouseOver, onMouseOut, o...
How can I test if my    website is   accessible?
How to test 90% of user experiences  1. Is it easy to use?  Would my mother be able to use  it by herself? 25%
How to test 90% of user experiences      2. Resize the text, disable      CSS and Images      can it still be used?      50%
How to test 90% of user experiences            3. Does it work without the            mouse?               75%
How to test 90% of user experiences                     4. And if I blind my eyes?                     using a screenreade...
How to test 90% of user experiences1. Is it easy to use?      Would my mother be able to use it by herself?2. Resize the t...
Conclusions• Accessibility is becoming more and more a key element    in the success of a project• Liferay provides tools,...
Thank you!julio.camarero@liferay.com   @liferay                             @juliocamarero
Images Used (Creative Commons)•   Population: http://www.flickr.com/photos/anirudhkoul/3786725982/sizes/l/•   wall: http:/...
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
Upcoming SlideShare
Loading in …5
×

Implementing Acessibility in Liferay 6.1

2,642 views

Published on

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

No Downloads
Views
Total views
2,642
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Implementing Acessibility in Liferay 6.1

  1. 1. Implementing Accessibility inLiferay 6.1Julio CamareroLiferay Core Developer, WCM Lead
  2. 2. Accessibility? Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible
  3. 3. .. some numbers ... 24,819,000 (9.9%)Almost 1 out of 5 peoplesuffers some disability 24,117,000 (9.6%)(half of them are can beconsidered severe) 202,860,000 (80.6%) with a disability, not severe 48.9 million people with a severe disability in the USA with no disability
  4. 4. ... some numbers ... birth accident old other No disease age specified
  5. 5. ... some numbers ... birth accident old other No disease age specified 77.4%
  6. 6. ... some numbers ... listen walk or see talk personal capacity mental move care to lear
  7. 7. .. and what about the web? Inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality
  8. 8. Why ?
  9. 9. Number of potential users increasesc
  10. 10. es... m e u n it isa rt oppo
  11. 11. Better userexperience
  12. 12. Motivation for accessibility• The number of potential users increases• Let’s give the same opportunities to everyone• Technical Advantages: • SEO improvement • Usability• Legal requirement (section 508)
  13. 13. let me show you one example...
  14. 14. Users who will take advantage...• Disabled users and ... • old people • people with slow internet connections • people with old computers or old software • unexperienced users in the internet • people using a mobile phone • people who don’t understand well the website language • Robots! (search engines...)
  15. 15. Technology is changing the game...
  16. 16. Technology is changing the game... x
  17. 17. Technology is changing the game... x
  18. 18. How do disabled people use the web?
  19. 19. How do disabled people use the web?Resize the page
  20. 20. How do disabled people use the web?Resize the page change contrast, remove css
  21. 21. How do disabled people use the web?Resize the page change contrast, remove css screenreaders
  22. 22. How do disabled people use the web?
  23. 23. How do disabled people use the web?Use the keyboard
  24. 24. How do disabled people use the web?Use the keyboard Specific devices for interacting with focused items
  25. 25. is my website accessible?
  26. 26. Validation and Certifications• There are standards to validate a site is accessible (WCAG1.0, WCAG2.0, Section 508, RGAA...)• There are automatic validators that can help you detect commons errors but they can’t certificate accessibility• There are entities that certificate the Accessibility of your website regarding a standard
  27. 27. WCAG2.0 (by W3C)• Guidelines independent of the technology (flash, html...)• They provide “enough” successful criterion (but not necessary) so that your website is accessible.• 3 levels of conformity: A, AA y AAA.• Based on 4 principles: • Perceptible, Operable, Understandable, Robust
  28. 28. ARIA• Recommended technique by WCAG2.0• Provides semantic information to our HTML to give more context to users using a screen-reader (menu, progressbar, popup...)• Already applied in most of our components
  29. 29. ... and is Liferay accessible?
  30. 30. Yes, but keep in mind... Your Content Liferay 35% 15% Your theme 50%
  31. 31. Liferay Validation• Our Goal • Validate AA level of WCAG2.0 in all the portal • Validate HTML5• Where are we right now? • We guarantee AA Level para non-authenticated users (covered by EE support) • Around 80% AA Level for signed in users collaborating and creating content • Around 70% AA Level for administration tasks
  32. 32. ...and we keep improving• We have worked hard to validate WCAG2.0: • apply ARIA • improve our markup • more details in my blog: http://www.liferay.com/es/web/julio.camarero/blog• Partners and community contributors • Liferay is open source , any part of the code can be modified, improved and CONTRIBUTED!! :) • Problem notifications and suggestions in forums/JIRA• Adding accessibility tests to our automated QA tests
  33. 33. Our goal• All Liferay Portlets and Themes should be accessible out of the box• Provide tools to make it easier to create accessible sites using Liferay.• Even more, make it hard to make your website non accessible if you use the tools we provide.
  34. 34. Are there any Websites built with Liferay withcertified Accessibility?
  35. 35. Accessible Websiteshttp://www.liferay.com/es/community/wiki/-/wiki/Main/Accessible+Liferay+Websites
  36. 36. what aboutWCAG2.0? Level A and Level AA
  37. 37. Perceptible Content must be perceptible by all users (visually, by sound...)
  38. 38. Perceptible Content must be perceptible by all users (visually, by sound...) Information can not be only visual! • information base on colors or css • images without alt attribute (alt=””) • multimedia files without transcription
  39. 39. Additional and Hidden text• Use CSS classes to hide/show elements dynamically. • aui-helper-hidden: Hides the element to all users • aui-helper-hidden-accessible: Hides an element visually but it is still found and ready by screen readers
  40. 40. Operable Content must be operable by users with differnet devices (mouse, keyboard...) All these are implemented in our classic theme! :)
  41. 41. Operable Content must be operable by users with differnet devices (mouse, keyboard...) Avoid using mouse-only events in javascript: onMouseOver, onDoubleClick, onRightClick... (onclick is ok) • navigation menus • trapped users! • Users with a keyboard should be able to reach any level of the navigation menus All these are implemented in our classic theme! :)
  42. 42. Use ckEditor• WCAG2.0 compliant <liferay-ui:input-editor />• Provides a good user experience in most screen readers.
  43. 43. Understandable Users must be able to understand the content, how it is organized and how to interact with it.
  44. 44. Understandable Users must be able to understand the content, how it is organized and how to interact with it. Show in a simple and consistent way to the user where she is and how to get to other places • menus always in the same position • use breadcrumbs • link to the begining of content • avoid weird things :S
  45. 45. Robust Content must be properly structured to allow user applications understand it.
  46. 46. Robust Content must be properly structured to allow user applications understand it. • Avoid tables for layouts • use the proper markup for tables when organizing data • use the proper markup for forms • apply ARIA to js components
  47. 47. Use Liferay Components• Maintained and improved by Liferay incorporating feedback from millions of users• Alloy Forms • Visual consistency with the portal • Tested to generate accessible forms: <aui:form>, <aui:fieldset>, <aui:input>, <aui:select>, <aui:a> ... • <aui:column> and <aui:layout> to achieve “table” layout using only css• Alloy UI Widgets (http://alloyui.liferay.com) • valid markup • using ARIA • work using the keyboard (without mouse)
  48. 48. Write Semantic Html• A link should be a link (<a>)• Headers should go in order (<h1>, <h2>, <h3>...)• A list should be a list (<li>)• Html 5 provides a lot of new semantic tags: header, section, footer...• etc...
  49. 49. Html validation• We have some tricks which improve performance but don’t validate html.• It can be enabled in the configuration (portal.properties) com.liferay.portal.servlet.filters.validhtml.ValidHtmlFilter=true
  50. 50. Some Advices
  51. 51. Commonmistakes
  52. 52. Specific-device Events• Avoid using javascript events which only work with some devices: • onMouseOver, onMouseOut, onMouseUp, onMouseDown, onDoubleClick, onRightClick... • if you use them, provide alternative for other devices (at least the keyboard but only consider touch mobile devices) • onClick works with the keyboard (enter)• Tablets and mobile phones won’t work with mouse events (although they have their own events: touchStart, touchMove... etc)
  53. 53. How can I test if my website is accessible?
  54. 54. How to test 90% of user experiences 1. Is it easy to use? Would my mother be able to use it by herself? 25%
  55. 55. How to test 90% of user experiences 2. Resize the text, disable CSS and Images can it still be used? 50%
  56. 56. How to test 90% of user experiences 3. Does it work without the mouse? 75%
  57. 57. How to test 90% of user experiences 4. And if I blind my eyes? using a screenreader... 90%
  58. 58. How to test 90% of user experiences1. Is it easy to use? Would my mother be able to use it by herself?2. Resize the text, disable CSS and images. Can it still be used?3. Does it work without the mouse?4. and if I blind my eyes? Using a screen-reader
  59. 59. Conclusions• Accessibility is becoming more and more a key element in the success of a project• Liferay provides tools, examples and guidelines to create accessible websites... we don’t want to leave anybody out!• It is important to test your developments. Technology is changing and we are all learning about web accessibility.
  60. 60. Thank you!julio.camarero@liferay.com @liferay @juliocamarero
  61. 61. Images Used (Creative Commons)• Population: http://www.flickr.com/photos/anirudhkoul/3786725982/sizes/l/• wall: http://www.flickr.com/photos/adrianismyname/6207758517/sizes/l/• woman: http://www.flickr.com/photos/adonis_pulatus/5881940531/sizes/l/• wheelchair: http://www.flickr.com/photos/yourdon/2819627118/sizes/l/• mother stroller: http://www.flickr.com/photos/paul-w-locke/6849441063/sizes/l/• wheelchair injured: http://www.flickr.com/photos/elizabethclaireoleary/4815049279/sizes/l/• Elevator: http://www.flickr.com/photos/25103209@N06/2625260355/sizes/l/• crutches: http://www.flickr.com/photos/repose/4930951225/sizes/l/• biking: http://www.flickr.com/photos/cityeyes/4005533058/sizes/z/

×