Liferay provides tools and guidelines to help make websites accessible. Accessibility is important to allow people of all abilities to use websites. Liferay strives to make its own software and components accessible out of the box according to WCAG guidelines. Developers should test their sites by resizing text, disabling CSS/images, using only the keyboard, and using a screen reader to simulate different disabilities and ensure the site is usable by all.

1. Implementing Accessibility in
Liferay 6.1
Julio Camarero
Liferay Core Developer, WCM Lead

2. Accessibility?
Accessibility is the degree to which a product, device,
service, or environment is available to
as many people as possible

3. .. some numbers ...
24,819,000 (9.9%)
Almost 1 out of 5 people
suffers some disability
24,117,000 (9.6%)
(half of them are can be
considered 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. ... some numbers ...
birth accident old other No
disease age specified

5. ... some numbers ...
birth accident old other No
disease age specified
77.4%

6. ... some numbers ...
listen
walk or see talk personal capacity mental
move care to lear

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. Why ?

9. Number of potential users increases
c

10. es...
m e u n it i
sa rt
oppo

11. Better user
experience

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. let me show you
one example...

20. 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...)

22. Technology is changing the game...

23. Technology is changing the game...
x

24. Technology is changing the game...
x

25. How do disabled people use the web?

26. How do disabled people use the web?
Resize the page

27. How do disabled people use the web?
Resize the page
change
contrast,
remove css

28. How do disabled people use the web?
Resize the page
change
contrast,
remove css
screen
readers

29. How do disabled people use the web?

30. How do disabled people use the web?
Use the keyboard

31. How do disabled people use the web?
Use the keyboard
Specific
devices for
interacting with
focused items

32. is my website
accessible?

33. 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

34. 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

35. 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

36. ... and is Liferay
accessible?

37. Yes, but keep in mind...
Your Content Liferay
35% 15%
Your theme
50%

38. 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

39. ...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

40. 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.

41. Are there any Websites
built with Liferay with
certified Accessibility?

42. Accessible Websites
http://www.liferay.com/es/community/wiki/-/wiki/Main/Accessible+Liferay+Websites

43. what about
WCAG2.0?
Level A and Level AA

44. Perceptible
Content must be perceptible by all users (visually,
by sound...)

45. 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

46. 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

47. Operable
Content must be operable by users with differnet
devices (mouse, keyboard...)
All these are implemented in our classic theme! :)

48. 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! :)

49. Use ckEditor
• WCAG2.0 compliant
<liferay-ui:input-editor />
• Provides a good user experience in
most screen readers.

50. Understandable
Users must be able to understand the content,
how it is organized and how to interact with it.

51. 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

52. Robust
Content must be properly structured to allow user
applications understand it.

53. 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

54. 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)

55. 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...

56. 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

57. Some Advices

58. Common
mistakes

59. 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)

60. How can I test if my
website is
accessible?

61. How to test 90% of user experiences
1. Is it easy to use?
Would my mother be able to use
it by herself?
25%

62. How to test 90% of user experiences
2. Resize the text, disable
CSS and Images
can it still be used?
50%

63. How to test 90% of user experiences
3. Does it work without the
mouse?
75%

64. How to test 90% of user experiences
4. And if I blind my eyes?
using a screenreader...
90%

65. How to test 90% of user experiences
1. 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

66. 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.

67. Thank you!
julio.camarero@liferay.com @liferay
@juliocamarero

68. 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/