Accessible Web Components_Techshare India 2014


Published on

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
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Accessible Web Components_Techshare India 2014

  1. 1. Accessible Web Components Nawaz & Srini, PayPal / @PayPalInclusive Copyright © 1999-2014 PayPal. All rights reserved 0
  2. 2. About Speakers Srinivasu – An accessibility evangelist, technologist, believes in inclusion Nawaz – An accessibility evangelist, geek, loves social innovation
  3. 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. 4. PayPal Accessibility Initiatives We needed it, so we innovated it. Necessity is the Mother of Invention
  5. 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. 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. 7. Innovate-Adapt-Evolve A walk-through of our Innovation Journey: Bootstrap Plug-in SkipTo Plug-in amCharts Plug-in
  8. 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. 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. 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. 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. 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. 13. Bootstrap Library Famous because of Sleekness, Ease of use and Responsiveness
  14. 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. 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( 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. 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. 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. 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. 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. 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. 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. 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
  23. 23. Bootstrap Plugin - How to implement Download and include Bootstrap.js from 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 : Demo :
  24. 24. Reasons for amCharts Accessibility Plugin To Solve the problem of Lack of accessible charts for blind and keyboard users
  25. 25. Usual ways to make Chart Accessible Chart data duplicated in a table and hidden off-screen Alt text LongDesc Attribute
  26. 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. 27. amCharts Made of SVG Interactive Dynamic Data
  28. 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. 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. 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. 31. Contact PayPal Accessibility Follow us on Twitter / @PayPalInclusive