implementing acessibility in liferay 6.1
TRANSCRIPT
![Page 1: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/1.jpg)
Implementing Accessibility in Liferay 6.1
Julio CamareroLiferay Core Developer, WCM Lead
![Page 2: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/2.jpg)
Accessibility?
Accessibility is the degree to which a product, device, service, or environment is available to
as many people as possible
![Page 3: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/3.jpg)
.. some numbers ...
Almost 1 out of 5 people suffers some disability(half of them are can be considered severe)
48.9 million people in the USA
202,860,000 (80.6%)
24,819,000 (9.9%)
24,117,000 (9.6%)
with a disability, not severe
with a severe disability
with no disability
![Page 4: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/4.jpg)
... some numbers ...
birthdisease
accident old age
other No specified
![Page 5: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/5.jpg)
... some numbers ...
birthdisease
accident old age
other No specified
77.4%
![Page 6: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/6.jpg)
... some numbers ...
walk or move
see listen talk personal care
capacity to lear
mental
![Page 7: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/7.jpg)
.. 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
![Page 8: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/8.jpg)
Why ?
![Page 9: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/9.jpg)
c
Number of potential users increases
![Page 10: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/10.jpg)
same
opportun
ities...
![Page 11: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/11.jpg)
Better user experience
![Page 12: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/12.jpg)
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)
![Page 13: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/13.jpg)
let me show you one example...
![Page 14: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/14.jpg)
![Page 15: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/15.jpg)
![Page 16: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/16.jpg)
![Page 17: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/17.jpg)
![Page 18: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/18.jpg)
![Page 19: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/19.jpg)
![Page 20: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/20.jpg)
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...)
![Page 21: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/21.jpg)
![Page 22: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/22.jpg)
Technology is changing the game...
![Page 23: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/23.jpg)
Technology is changing the game...
x
![Page 24: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/24.jpg)
Technology is changing the game...
x
![Page 25: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/25.jpg)
How do disabled people use the web?
![Page 26: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/26.jpg)
How do disabled people use the web?
Resize the page
![Page 27: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/27.jpg)
How do disabled people use the web?
Resize the page
change contrast,
remove css
![Page 28: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/28.jpg)
How do disabled people use the web?
Resize the page
change contrast,
remove css
screen readers
![Page 29: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/29.jpg)
How do disabled people use the web?
![Page 30: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/30.jpg)
How do disabled people use the web?
Use the keyboard
![Page 31: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/31.jpg)
How do disabled people use the web?
Use the keyboard
Specific devices for interacting with focused items
![Page 32: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/32.jpg)
is my website accessible?
![Page 33: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/33.jpg)
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
![Page 34: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/34.jpg)
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
![Page 35: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/35.jpg)
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
![Page 36: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/36.jpg)
... and is Liferay accessible?
![Page 37: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/37.jpg)
Your theme50%
Your Content35%
Liferay15%
Yes, but keep in mind...
![Page 38: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/38.jpg)
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
![Page 39: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/39.jpg)
...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
![Page 40: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/40.jpg)
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.
![Page 41: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/41.jpg)
Are there any Websites built with Liferay with certified Accessibility?
![Page 42: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/42.jpg)
Accessible Websites
http://www.liferay.com/es/community/wiki/-/wiki/Main/Accessible+Liferay+Websites
![Page 43: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/43.jpg)
what about WCAG2.0?
Level A and Level AA
![Page 44: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/44.jpg)
Perceptible
Content must be perceptible by all users (visually, by sound...)
![Page 45: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/45.jpg)
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
![Page 46: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/46.jpg)
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
![Page 47: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/47.jpg)
Content must be operable by users with differnet devices (mouse, keyboard...)
Operable
All these are implemented in our classic theme! :)
![Page 48: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/48.jpg)
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
Operable
All these are implemented in our classic theme! :)
![Page 49: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/49.jpg)
Use ckEditor
• WCAG2.0 compliant<liferay-ui:input-editor />
• Provides a good user experience in most screen readers.
![Page 50: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/50.jpg)
Understandable
Users must be able to understand the content, how it is organized and how to interact with it.
![Page 51: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/51.jpg)
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
![Page 52: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/52.jpg)
Robust
Content must be properly structured to allow user applications understand it.
![Page 53: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/53.jpg)
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
![Page 54: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/54.jpg)
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)
![Page 55: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/55.jpg)
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...
![Page 56: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/56.jpg)
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
![Page 57: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/57.jpg)
Some Advices
![Page 58: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/58.jpg)
Common mistakes
![Page 59: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/59.jpg)
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)
![Page 60: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/60.jpg)
How can I test if my website is
accessible?
![Page 61: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/61.jpg)
How to test 90% of user experiences
25%
1. Is it easy to use?
Would my mother be able to use it by herself?
![Page 62: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/62.jpg)
How to test 90% of user experiences
50%
2. Resize the text, disable CSS and Images
can it still be used?
![Page 63: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/63.jpg)
How to test 90% of user experiences
75%
3. Does it work without the mouse?
![Page 64: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/64.jpg)
How to test 90% of user experiences
90%
4. And if I blind my eyes?
using a screenreader...
![Page 65: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/65.jpg)
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
![Page 66: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/66.jpg)
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.
![Page 67: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/67.jpg)
Thank you!
@liferay@juliocamarero
![Page 68: Implementing Acessibility in Liferay 6.1](https://reader033.vdocument.in/reader033/viewer/2022042700/558de3f01a28ab07438b45ac/html5/thumbnails/68.jpg)
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/