• Like
  • Save
Accessible Web Components_Techshare India 2014
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Accessible Web Components_Techshare India 2014


Presented by Nawaz Khan - Accessibility Evangilist and Srinivasu Chakravarthula - Sr. Accessibility Program Lead, Customer Quality & Engg Services, PayPal at Techshare India 2014. …

Presented by Nawaz Khan - Accessibility Evangilist and Srinivasu Chakravarthula - Sr. Accessibility Program Lead, Customer Quality & Engg Services, PayPal at Techshare India 2014.

Many accessibility techniques are existing for which there is much lesser innovation for now. PayPal wanted to bring in some of the innovative things for some existing web components. The main objective of the presentation was to "Show audience how to create accessible web components"

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Accessible Web Components Nawaz & Srini, PayPal / @PayPalInclusive Copyright © 1999-2014 PayPal. All rights reserved 0
  • 2. About Speakers Srinivasu – An accessibility evangelist, technologist, believes in inclusion Nawaz – An accessibility evangelist, geek, loves social innovation
  • 3. PayPal Accessibility Team Team with thought leaders in the industry Committed to help our product teams Come up with solutions not only for the company but also for the community
  • 4. PayPal Accessibility Initiatives We needed it, so we innovated it. Necessity is the Mother of Invention
  • 5. The state of today's web Everyone wants To see web as an application Richness and responsiveness On multiple devices (mobile, tablets etc.,)
  • 6. Problem: InAccessible Libraries With too many things in focus like speed, adaptive and responsive, Accessibility takes a backseat before it is released to the public Inaccessible components are repeatedly incorporated into every new project which leaves behind many inaccessible websites
  • 7. Innovate-Adapt-Evolve A walk-through of our Innovation Journey: Bootstrap Plug-in SkipTo Plug-in amCharts Plug-in
  • 8. Skip Navigation Links Are a way to ByBass Blocks of content (WCAG 2.4) Without using this link Keyboard user needs to tab through approximately 40 links to reach the main story Screen reader user have to listen to 200 words Screen magnifier user must search around for the location of the main body Has been for a long time and Accessible websites use it
  • 9. SkipTo Plugin Replacement for your old classic “Skipnav” link Scans the Whole page for Headings, Landmark roles Displays as a nice Menu Button Screen Readers announce it as “SkipTo menu Collapsed”
  • 10. SkipTo Plugin - How to operate Spacebar or Enter Key to activate Down/up arrows to navigate Esc to close the Menu Access key “0” to go back to SkipTo
  • 11. SkipTo Plugin - How to implement Just add the JavaScript plugin to your HTML file < ci tt p=tx / aa ci t sc "t p/ p ya .i hb i /k po dw la s j/ kp om nj " < s rp > s rp ye"e tj vs r p" r =h t: /a pl g tu .o Si T/ o no d/ sS i T. i. s>/c i t
  • 12. SkipTo Plugin - How to Configure < ci t s rp > v rs iT Cn i = a k p oo fg { " et ns :{ s t ig " " kp o: { s i T" " ed ns :" 1 ,2 h " h a ig " h h, 3, " ad ak " "r l= a ia in ,r l= a n, rl =e r h" l n mr s: [ oe nv gt o ][ oe mi ][ o es ac ], " ce se " "" a c sk y: 0 , " rp :" re , w a " tu " " ii ii y:" no u" v s bl t" o fc s } } } ; <sr p > /ci t Also available as Wordpress plugin from wordpress repository and as Drupal plugin from Drupal repository
  • 13. Bootstrap Library Famous because of Sleekness, Ease of use and Responsiveness
  • 14. Bootstrap Plugin Pros Makes many of the components of Bootstrap library accessible for keyboard and screen reader users Experiment with Bootstrap without having to modify the original code Independent of Bootstrap's release timeliness Avoid other people having to hack Bootstrap code if they just want to get accessibility features Cons Another JavaScript file and CSS files need to be loaded on the page (but wait! you can Lazy Load)
  • 15. Bootstrap Plugin (TabPanel) What it does? v r$ al s =$'n vt b ' a t b it (. a- as ) , $i = $a ls . hl rn 'i ) ls t bi tc id e (l ' , $a s= $ al s. id ' dt -o ge "a " ,[ aa tg l= p l" ' tb t bi t fn ([ aa tg l =t b] d t -o ge "i l] ) $ al s. tr ' oe ,' al s ' t b it at (r l' tb it ) $ i. tr 'o e , ' rs na i n) l s at (r l' p e et to ' $ asat ( r l ' ' a ' t b.t r ' oe , tb) $ a s e c ( u c i n i d x ){ t b.a h f nt o( n e vr tb ae = $$ t i) at (h e' ) a a pn l ( (h s. t r' rf ) , tb =$ t i) a (h s , tb d= t ba t( i' | ' it b+ Mt . lo (M t. ad m )1 0+ ) ai a .t r 'd ) | u -a ' a hf or ( ah rn o( *0 ) 1 t ba t( i ' t b d a. tr 'd , ai ) i( a.ae t )h sl s(a tv ') f tbpr n ( .a C as'c ie ){ t ba t( { 'a Id x :' ' 'r ae pn e ': 'r e , 'r a sl ce ': ' re , ' r a. tr tb n e' 0, ai - xa dd t u' a i- ee t d t u' a t ba e. t r{ 'o e :' ap nl , 'a Id x :' ' 'r ah de ' :' as ' 'r a ap nl at ( r l' tb ae ' tb n e' 0, ai - id n f l e, ai }l e e s{ t ba t( { 'a Id x :' 1, 'r a ep ne ': ' as ' ' r as lc e': 'a s' a. tr tb n e' -' a i- xa d d f le , ai -e e td fl e , t ba e. t r { ' oe : 'a pn l , 'a I dx : '1 , ' ra hd e ': 'r e , 'r ap nl at ( r l' tb ae ' t bn e' -' a i -i dn t u' a i } } ) $ f. a. os r co .r tt p .e dw = fn to ( ){ . n tb Cn tu tr p oo ye ky on uc i n e vr $h s= $ti ) a ti (hs ,$ tm ie s
  • 16. Bootstrap Plugin - Alert Adds role of Alert to Alert, Warning, and Success Bootstrap messages Increases the color contrast as the foreground to background color contrast ratio for the message was too low Adds instructions in message dialog so that the developer using the alert knows to manage keyboard focus on alert dismissal
  • 17. Bootstrap Plugin Tooltip/PopOver Add role of Tooltip to tooltip div Generates a random id, assign it to the tooltip div, and reference it from the Tooltip element with the ARIA attribute “aria-describedby” Removes aria-describedby when the tooltip is hidden
  • 18. Bootstrap Plug-in - Modal Dialog Adds role of Document to content div inside dialog so that NVDA can force document mode and read contents inside Dialog. When the Modal is closed, returns the focus to the element which opened the dialog Changes the focus outline of Close button to visible
  • 19. Dropdown Adds aria-haspopup and and aria-expanded attributes to dropdown toggle link Dynamically changes aria-expanded when the dropdown closes or opens Focuses to first item on activating dropdown Adds ability to open dropdown with spacebar Close dropdown when tabbing out from dropdown Changes the focus outline of dropdown to visible
  • 20. Collapse Adds tab role, aria-selected, aria-expanded, aria-controls, and tabIndex for collapse tab Adds ARIA roles of tabPanel, tabIndex, aria-hidden, and arialabelledBy for collapsible panel Adds role of tabList and aria-multiselectable for collapse container div Dynamically flips tabIndex, aria-selected, and aria-expanded for tab when it is activated and add aria-hidden to hide the previously visible collapse tabpanel Closes dropdown when tabbing out from dropdown Adds keydown event listener for the collapse component to work with keyboard
  • 21. Carousel Prevents automatic cycling of the carousel. Prevents wrapping to first item on Next button navigation or wrapping to last item on Previous button navigation Adds role of listbox for carousel div Adds ARIA role of option, aria-selected, and tabIndex for individual carousel items Adds keydown event listener for the carousel to work with keyboard
  • 22. Carousel (Contd.) Dynamically changes tabIndex and aria-selected property of active and inactive tabs Removes display:none and hide (offscreen) of the inactive carousel items so that screen readers can count the total number of carousel items. visit http://shouldiuseacarousel.com/
  • 23. Bootstrap Plugin - How to implement Download and include Bootstrap.js from getbootstrap.com. Download and include the bootstrap accessibility plugin js. Download and include the bootstrap accessibility plugin css to override css styles. Optional: Lazily load the JavaScript plugin after the page is loaded. GITHUB Repo : https://github.com/paypal/bootstrapaccessibility-plugin/ Demo :http://paypal.github.io/bootstrap-accessibilityplugin/demo.html
  • 24. Reasons for amCharts Accessibility Plugin To Solve the problem of Lack of accessible charts for blind and keyboard users
  • 25. Usual ways to make Chart Accessible Chart data duplicated in a table and hidden off-screen Alt text LongDesc Attribute
  • 26. Problems with usual ways Data is duplicated as in Hidden table Too much text to describe the Chart Only Basic textual information available to Screen reader users Lot of maintenance
  • 27. amCharts Made of SVG Interactive Dynamic Data
  • 28. amCharts accessibility Plugin For keyboard users Can navigate with Left and Right arrow keys Cursor tooltip is shown when the arrow keys are pressed Tab key to navigate within chart, left and right sliders Applies aria-label, aria-valuemin, aria-valuemax, aria-valuetext and aria-valuenow for left and right sliders
  • 29. amCharts accessibility Plugin For Screen Readers Applies role of Application to the chart Creates a hidden status Div to announce the Tooltips displayed Applies aria-label, aria-valuemin, aria-valuemax, aria-valuetext and aria-valuenow for left and right sliders
  • 30. amCharts accessibility Plugin How to implement < ci ts c " tp / ww ac at . o/ i/ mt c. s tp = tx /a ac it > /c it s rp r= ht :/ w. m hr sc ml ba s ok j" y e " et jv s rp "< sr p > < ci ts c" j/ l gn /m tc - ce sb lt .s t p=t x/ aa ci t >/ ci t s rp r= /s pu is a so ka cs ii i yj " ye "e tj vs r p" < s rp > Play with Demo
  • 31. Contact PayPal Accessibility Follow us on Twitter / @PayPalInclusive