Your SlideShare is downloading. ×

HTML5 & WAI ARIA for online banking

526

Published on

Manuel Lavín ´s speech at Mobile World Congress Barcelona'13, invited by W3C.

Manuel Lavín ´s speech at Mobile World Congress Barcelona'13, invited by W3C.

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

  • Be the first to like this

No Downloads
Views
Total Views
526
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WAI-ARIA: Improve usability for disabled usersWAI-ARIAWAI-ARIA is a standard recommendation developped by W3C.Definition from the W3C site: "WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies." "With WAI-ARIA, developers can make advanced Web applicationsaccessible and usable to people with disabilities." (WAI-ARIA Overview)ADESIS NETLIFE – February 2012 WAI-ARIA 1
  • 2. WAI-ARIA: Improve usability for disabled usersFormerly…• Interaction was characterized by a shortage of elements of interaction (mainly links and form elements).• A page was constituted as the minimum unit of information, so any request by the user implied a complete recharge of all of it.Web Pages that we often use today look like little or very little to those that were used in the early days of internet.ADESIS NETLIFE – February 2012 WAI-ARIA 2
  • 3. WAI-ARIA: Improve usability for disabled usersToday…There are many technologies, proprietary and non-proprietary, allowing us to create verysimilar to conventional desktop applications web applications. • Numerous interaction elements. • High interactivity with the user. • The minimum unit of information is determined by the developer. • Specific parts of the page reloading.ADESIS NETLIFE – February 2012 WAI-ARIA 3
  • 4. WAI-ARIA: Improve usability for disabled usersHTML5 websitesThey can substantially improve users experience in the webHowever, there are some aspects that should be taken into account: • In HTML5 websites, new and sophisticated UI components can be created, used and customized. • HTML5 websites allow to create very complex interfaces which, in some cases, rather than helping the user, may cause confusion and doubts about its use. • Some features are not available to some users with disabilities, especially those who use screen readers or those who cannot use a mouse. HTML5 websites should be easy to use by all users regardless of the way of access.ADESIS NETLIFE – February 2012 WAI-ARIA 4
  • 5. WAI-ARIA: Improve usability for disabled usersImproving User Experience with WAI-ARIAEven though the first objective of the WAI-ARIA is to improve the website accessibility, italso defines a number of mechanisms that can substantially improve the final usabilityof web pages: • Providing structural semantics for major content regions. • Providing meaning semantic for interface components. • By applying attributes that provide information about the properties and state of the components. • Accessing to complex components using keyboard like on conventional desktop applications. • Reporting the changes in the AJAX zones or dynamic regions. It offers accessibility improvements that also improve Effectiveness, Efficiency and Satisfaction for users with disabilities.ADESIS NETLIFE – February 2012 WAI-ARIA 5
  • 6. WAI-ARIA: Improve usability for disabled usersImproving User Experience with WAI-ARIAStructural SemanticUsing landmark roles you provide a semantic markup for the main content regions onthe page.Assistive technologies allow fast navigation between regions marked with those roles.Examples: Role Description search Region that includes elements that make up a search engine banner Region that includes elements such as the logo or the identity of the site owner, search engine, etc. complementary Section of the document that complements a main section contentinfo Region that contains information such as copyright and links to privacy statements. main Main content of the document. navigation Group of elements for navigating through the document or related documents.ADESIS NETLIFE – February 2012 WAI-ARIA 6
  • 7. Examples landmark roles role="banner" role="navigation" role="complementary" role="main"role="contentinfo" ADESIS NETLIFE – February 2012 WAI-ARIA 7
  • 8. WAI-ARIA: Improve usability for disabled usersImproving User Experience with WAI-ARIASemantic meaning for componentsUsing widget roles you provide semantic markup for user interface components. Examples: Role Description button Button to generate actions or events. dialog Window application design to interrupt the current process of an application in order to ask the user to introduce or receive information or require an answer. progressbar Progress bar of a task. slider Slider control. tablist Tab list that refer to ‘tabpanel’. tab Item from a tab list with associated content. tabpanel Container for resources associated with a ‘tab’. tooltip Descriptive pop-up of an element.ADESIS NETLIFE – February 2012 WAI-ARIA 8
  • 9. Examples widget roles role="tab" role="tablist" aria-selected="true" aria-controls="panel1" id="tab1" role="dialog" role="tabpanel" aria-hidden="false" aria-labelledby="tab1" id="panel1" role="button" role="button" aria-controls="handler" aria-controls="handler" role="slider" aria-valuemin="20" aria-valuemax="300" aria-valuetext="160€" aria-orientation="horizontal" id="handler"ADESIS NETLIFE – February 2012 WAI-ARIA 9
  • 10. WAI-ARIA: Improve usability for disabled usersImproving User Experience with WAI-ARIAProperties and state of the componentsAttributes that provide specific information about a component: • Attributes as properties: their values are less likely to change during the lifecycle of the application. • Attributes as states: their values can change frequently due to the interaction of the user. Acceptance of terms <span role="checkbox" aria-checked="true" STATE aria-labelledby="acep" aria-required ="true">ADESIS NETLIFE – February 2012 WAI-ARIA 10
  • 11. Examples attributes for states and properties role="tab" role="tablist" aria-selected="true" aria-controls="panel1" id="tab1" role="dialog" role="tabpanel" aria-hidden="false" aria-labelledby="tab1" id="panel1" role="button" role="button" aria-controls="handler" aria-controls="handler" role="slider" aria-valuemin="20" aria-valuemax="300" aria-valuetext="160€" aria-orientation="horizontal" id="handler"ADESIS NETLIFE – February 2012 WAI-ARIA 11
  • 12. WAI-ARIA: Improve usability for disabled usersImproving User Experience with WAI-ARIAAccessing using keyboard• Provides a mechanism that allows to select all the interaction elements of the interface using “tab key”.• Definition of the keys to operate with the element of interaction, once it has been selected.Referring to the keys used for the interaction with the UI components, WAI-ARIAprovides a number of recommendations for each of the most common elements ofinteraction which, in general, are the same keys that are normally used in desktops. Avoid different developers to use different keys for the same interaction elements.ADESIS NETLIFE – February 2012 WAI-ARIA 12
  • 13. Example of recommendation for keyboard interaction http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#sliderADESIS NETLIFE – February 2012 WAI-ARIA 13
  • 14. WAI-ARIA: Improve usability for disabled usersImproving User Experience with WAI-ARIAReport changes in dynamic regionsProperly managing this type of content:• Identify dynamic regions in the document.• Indicate the priority to inform the user when updates occur.• Specify if it is necessary to inform the user of the content that is in the dynamic region or only the changes that have taken place. Provide information to the assistive technologies on how to process the content updates.ADESIS NETLIFE – February 2012 WAI-ARIA 14
  • 15. Example of report changes in dynamic regionsImproving User Experience with WAI-ARIAReport changes in dynamic regionsaria-live: Shows that an element will update and its priority:• off: default value. There will be no communication to the user of any change in that area, unless the user has the focus on in in that precise moment.• polite: low/normal priority. The change in the content takes place in a second plane. The user will receive a notification of the change once she finishes what ever she is doing.• assertive: high priority. The change in the content is notified ASAP. This example only to be used on a “really need” bases.ADESIS NETLIFE – February 2012 WAI-ARIA 15
  • 16. Example of report changes in dynamic regionsImproving User Experience with WAI-ARIAReport changes in dynamic regionsaria-busy: Shows if an element is currently in the process of being updated.• false: default value. No updates are expected• true: in the process of being updates. Forces the Assistive technologies not to show the changes in a dynamic area until it updates completelyaria-atomic: Shows if the Assistive technologies will “highlight” the entire region or justthe updated part.• false: default value. Will only highlight the updated part• true: the Assistive technologies will highlight the entire region as a wholeADESIS NETLIFE – February 2012 WAI-ARIA 16
  • 17. WAI-ARIA: Improve usability for disabled usersEnd of the documentTHANK YOU! :-) ADESIS Netlife Edificio América II - La Florida C/. Proción,7 Portal 3 Bajo 28023 MADRID - SPAIN Tel. (+34) 917 102 423 Fax. (+34) 913 729 783 adesis@adesis.com www.adesis.com ADESIS NETLIFE – February 2012 WAI-ARIA 17

×