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

1. WAI-ARIA: Improve usability for disabled users
WAI-ARIA
WAI-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 applications
accessible and usable to people with disabilities." (WAI-ARIA Overview)
ADESIS NETLIFE – February 2012 WAI-ARIA 1

2. WAI-ARIA: Improve usability for disabled users
Formerly…
• 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 users
Today…
There are many technologies, proprietary and non-proprietary, allowing us to create very
similar 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 users
HTML5 websites
They can substantially improve users experience in the web
However, 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 users
Improving User Experience with WAI-ARIA
Even though the first objective of the WAI-ARIA is to improve the website accessibility, it
also defines a number of mechanisms that can substantially improve the final usability
of 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 users
Improving User Experience with WAI-ARIA
Structural Semantic
Using landmark roles you provide a semantic markup for the main content regions on
the 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 users
Improving User Experience with WAI-ARIA
Semantic meaning for components
Using 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 users
Improving User Experience with WAI-ARIA
Properties and state of the components
Attributes 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 users
Improving User Experience with WAI-ARIA
Accessing 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-ARIA
provides a number of recommendations for each of the most common elements of
interaction 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/#slider
ADESIS NETLIFE – February 2012 WAI-ARIA 13

14. WAI-ARIA: Improve usability for disabled users
Improving User Experience with WAI-ARIA
Report changes in dynamic regions
Properly 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 regions
Improving User Experience with WAI-ARIA
Report changes in dynamic regions
aria-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 regions
Improving User Experience with WAI-ARIA
Report changes in dynamic regions
aria-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 completely
aria-atomic: Shows if the Assistive technologies will “highlight” the entire region or just
the updated part.
• false: default value. Will only highlight the updated part
• true: the Assistive technologies will highlight the entire region as a whole
ADESIS NETLIFE – February 2012 WAI-ARIA 16

17. WAI-ARIA: Improve usability for disabled users
End of the document
THANK 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