Accessibility and JS: side-by-side
62
-
Upload
felipe-de-albuquerque -
Category
Technology
-
view
490 -
download
4
Transcript of Accessibility and JS: side-by-side
SummaryThroughout history, JS has been pointed out as the villain when the matter is accessible websites.
By presenting some tricks and techniques, we plan to provoke this discussion among developers and show that Accessibility and JS may live together, as long as you take the right steps.
Accessibility and JS: side-by-side
Overview
● Why Should I invest on Accessibility?● What is Accessibility?● Who needs Accessibility?● Essential things about the documentation● User Agents: Do you know them?● Barriers between Accessibility and JavaScript● The great secret of accessible applications
#1 Why Should I invest on
Accessibility?
According to UN
650 Million have some kind of disabilities
Many people around the world
In Brazil are over
According to IBGE
45.6 Millionpeople could be using your application.
Business opportunity
Who wouldn´t wanted to have
23% of a population as possible clients?
When we talk about accessibility
#2 What is Accessibility?
It´s basically create or turn it accessible for the largest number of users, mainly for those with special needs
What would be an accessible application?
Anything isn’t enough accessible thatcouldn’t be improved
New accessibility
Passive
Robotic
Dependent
Impotent
Able
Active
Independent
Engajed
#3 Who needs accessibility?
Who needs accessibility?
#4 Essential things about the
documentation
• W3C (World Wide Web Consortium)• WAI (Web Accessibility Initiative)• WCAG (Web Content Accessibility
Guidelines)• WAI-ARIA(Accessible Rich Internet
Applications)
Alphabet soup
• ATAG (Authoring Tool Accessibility Guidelines)
• UAAG(User Agent Accessibility Guidelines)
• eMAG (Brazil´s e-gov model of accessibility)
Most part of the material is produced by W3C and by institutions interested on internet development as a whole. The idea is to have internet for all people.
RobustUnderstandable
Operable
Perceivable
WCAG 4 Basic principles
WCAG #4.1 Perceivable
● Distinguishable information
● Text Alternatives
● Adaptable
● Time-based Media
WCAG #4.2 Operable
● Navigable
● Keyboard Accessible
● Seizures
● Enough Time
WCAG #4.3 Understandable
● Readable
● Predictable
● Input Assistance
WCAG #4.4 Robust
Compatible with different
User Agents
#5 Users Agents:
Do you know them?
User agents could be guide dogs
User agents could be web browsers
...But usually Screen Readers
Screen Readers usage
WebAIM 2014
Mobile Screen Reader usage
We have to teach
We need to get connected
The user agents how to speak
Content
Presentation
Interactivity
#6 Barriers between
Accessibility and JavaScript
Accessibility Barriers
According to the University of Minnesota
● Some browsers may not support JavaScript or may have JavaScript processing disabled.
● Users may be unaware of dynamically changing page content.
● Some AJAX features (widgets) may be difficult or impossible to navigate using a keyboard alone.
● Some browsers and browser versions may not support AJAX.
● Some browsers and browser versions may not support ARIA standards.
● Some adaptive Technologies may not support AJAX and ARIA.
Accessibility Barriers
According to the University of Minnesota
● Some browsers may not support JavaScript or may have JavaScript processing disabled.
● Users may be unaware of dynamically changing page content.
● Some AJAX features (widgets) may be difficult or impossible to navigate using a keyboard alone.
● Some browsers and browser versions may not support AJAX.
● Some browsers and browser versions may not support ARIA standards.
● Some adaptive Technologies may not support AJAX and ARIA.
Summed up in four major problems
01. Browsers do not support JavaScript or it is disabled
02. Developers lack of knowledge in WAI-ARIA practices
03. Rich applications using dynamic content with Ajax (Asynchronous Javascript and XML)
04. Difficulty or impossibility to navigate using a keyboard
#6.1 Browsers Don’t Support
JavaScript
Browsers Support JavaScript
According to WebAIM 2014, over 97% of screen readers support and have javascript enabled
97,6%Enabled
2,4%Disabled
People use JavaScript and don´t know it!
Fallback strategies to others 2.4%
Provide alternative accessible controls that do not require script processing
A good idea for fallback strategiesDetect Features Instead of Browsersfunction registerEvent( sTargetID, sEventName, fnHandler )
{
var oTarget = document.getElementById( sTargetID );
if ( oTarget != null )
{
if ( oTarget.addEventListener ) {
oTarget.addEventListener( sEventName, fnToBeRun, false );
} else {
var sOnEvent = "on" + sEventName;
if ( oTarget.attachEvent )
{
oTarget.attachEvent( sOnEvent, fnHandler );
}
}
}
}
#6.2 Developers lack of knowledge
in WAI-ARIA practices
What is WAI-ARIA
Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities
WAI-ARIA Workflow
The jQuery creator says
ARIA isn’t just a pipe dream of functionality,It’s implemented!
John Resig
Use semantic and Landmarks ARIA
The language your browser likes
to speak!
#6.3 Rich Internet Applications
With Ajax
Asynchronous Javascript and XML
Ajax is a technique for developing interactive Web Applications
Updating of Web content without refreshing the whole page
Every modern applications use it
Ajax and Accessibility
aria-live=”polite” How polite the live area is? The default is ‘polite’ – in that it waits until all forms of user interaction have been completed before describing the updates to the user.
aria-relevant=”additions removals” Only notify the user about new node additions and removals. This will give us the appropriate level of updates to make this possible.
aria-describedby=”users-desc”A pointer to the element that describes the contents of the live area. If the user wishes to know more about what the contents of the field represent this element can be read to them.
ARIA Live Regions
#6.4 Difficulty or impossibility to navigate using a keyboard
Navigations and menusUsers that can´t or don´t want to use the mouse
could use keyboard to navigate on the application!
Insert in the link description
On the description we should avoid generic names such as “click here”, “download”Write texts that make sense. Even when the monitor is turned off!
Preferred
Avoid
Jim Thatcher pioneering
Using Links, #hashtags and some IDs we could link and navigate in the whole page!
Skip navigation 1998
Skip navigation visual focus
Skip navigation focus
Think beyond the mouse
Semantic menu and ARIA
Show and hide sub-menus
#7 The great secrets of
accessible applications
Accessibility menu
Font size control
High and low contrast
The WEB creator says
Take the Standards to Keep the Web Free!
Tim Berners-Lee
Complementing Tim
ARIA and Interactive design too!
Felipe Albuquerque
Special thanks to
felipealbuquerque.com
@felipedeolinda
Felipe de AlbuquerqueAsk me here or by
