Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessiblity 101 and JavaScript Frameworks

58 views

Published on



A short introduction to Accessibility API and then a look at what pitfalls JavaScript frameworks have due to the way they talk to the DOM - Talk given at Code Melbourne in 2017

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Accessiblity 101 and JavaScript Frameworks

  1. 1. ACCESSIBILITY - 101 @AIMEE_MAREE JAVASCRIPT FRAMEWORKS AND 1
  2. 2. GOVERNMENT MANDATED POLICY AND ITS A HUMAN RIGHT! Legal Perspective 2
  3. 3. ENABLING AND ENHANCING ACCESS FOR ALL TYPES OF PEOPLE AND ASSISTIVE TOOLS Human Perspective 3
  4. 4. ACCESSIBILE CODE CATERS FOR A WIDER AUDIENCE AND A LARGER USER BASE The Client 4
  5. 5. WE INCLUDED TABINDEX=“1” AND ROLE=“NAVIGATION" ON ALL THE MENU LINKS! Developer Perspective 5
  6. 6. 6
  7. 7. THE MODERN DAY WEB IS BUILT ON JAVASCRIPT FRAMEWORKS World Wide Web 7
  8. 8. JAVASCRIPT CAN’T BE MADE ACCESSIBLE? Myth 8
  9. 9. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH DOCUMENT.GETELEMENTBYID(“HTML”) 9 Backend JavaScript Frameworks (node.JS) perform ServerSide processes which output HTML The HTML code is sent with images, other JavaScript libraries and CSS to the BROWSER .html .js .css .img
  10. 10. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH DOCUMENT.GETELEMENTBYID(“HTML”) 10 The files sent are processed in the BROWSER and turned into tokens interpreted by DOM and the Accessibility API HTML is rendered in the BROWSER to the end device and interpreted by assistive technologies HTML
  11. 11. CC BY-NC-SA @AIMEE_MAREE HTML AND ACCESSIBILITY HTML elements don't just make things look good thats CSS HTML elements describe the type of information that is conveyed <blockquote> <p> <img> <a> Native HTML elements are implicit and declare their role, name, properties and states to the Accessibility API Assistive tools rely on the proper use of HTML elements to accurately convey information Aria tags can be used with Native HTML elements to convey additional information to the Accessibility API AFICIONADO.TECH 11
  12. 12. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH ACCESSIBILITY STACK 12 ACCESSIBILITY API ASSISTIVE TECHNOLOGY BROWSER OPERATING SYSTEM
  13. 13. THE DOM HAS ACCESSIBILITY API TREE BUT JAVASCRIPT DOES NOT SPEAK TO IT Some Truth to the Myth 13
  14. 14. CC BY-NC-SA @AIMEE_MAREE JAVASCRIPT AND HTML Browsers, ScreenReaders, other tools read HTML elements Backend JavaScript frameworks output HTML elements Frameworks notoriously use <div> and <span> elements for HTML however these elements are semantically neutral HTML elements are translated to recognisable tokens used by the DOM to render a webpage in a BROWSER JavaScript can manipulate DOM tokens changing how the HTML is rendered in the BROWSER AFICIONADO.TECH 14
  15. 15. I WRITE JAVASCRIPT NOT HTML! JavaScript 15
  16. 16. YES, BUT, THE END USER SEES THE HTML, SCREENREADERS USE THE ACCESSIBILITY API ScreenReader 16
  17. 17. THIS IS WHY ARIA WAS BORN W3C Standards 17
  18. 18. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH ARIA AND ASSISTIVE TECHNOLOGY 18 Accessibility API Role ‣ Navigational landmarks ‣ Assest Types ‣ Widget Types States and Properties ‣ Widgets ‣ Form ‣ Dynamic ‣ Value DOM-implied hierarchy State and Property Events User Agent Browser DOM JavaScript ‣ Acts as the Controller ‣ Manipulates DOM tokens ‣ Event-driven ‣ Can produce new widget/s Assistive Technology Interprets the HTML output from the browser Reads the information presented in the HTML and uses the HTML elements found to understand the type of information presented DATA DOCUMENT ELEMENTUI
  19. 19. SO WHATS IMPORTANT TO THE ACCESSIBILITY API? Audience 19
  20. 20. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH NAME Provides an accessible name for the element For example: The form label tag becomes the accessible name for the associated form field object <label></label> For image the alt tag provides the accessible name <img></img> 20
  21. 21. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH ROLE Declares element type used to identify the purpose and mapped to values in the accessibility API Exposes a set of known actions to tools based on implied behaviour of the role, example: role=“search” Can define what behaviour to use when certain states or properties with default values are not provided <input type=“checkbox” id=“happy" checked> <label for=“happy”>Code 2017 makes me hapy</label> 21
  22. 22. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH STATES Conveys the current state of the element Dynamic property expressing characteristics of an object that may change in response to an action [user or script] Represent associated data or user interaction States declare interactions and grouped by Widget types, Live region, drag and drop <input type=“checkbox” id=“happy" checked> <label for=“happy”>Code 2017 makes me happy</label> 22
  23. 23. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH PROPERTIES Attributes that are essential to the nature of a given object or represent a data value associated with the object Less likely to change during the app life cycle Properties declare both informative and declarative attributes Grouped by Widget types, Live region, drag and drop, relationship <input type=“checkbox” id=“happy" checked> <label for=“happy”>Code 2017 makes me hapy</label> I 23
  24. 24. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH NAME, ROLE, PROPERTIES, STATES 24 10 ACCESSIBILITY API Name = Search Value = (none) Role = Button State = default, focusable Description = “Search this Site” Aria-live = “polite”
  25. 25. SO WHAT DOES THIS MEAN FOR CUSTOM ELEMENTS / WEB COMPONENTS sensible developer 25
  26. 26. CC BY-NC-SA @AIMEE_MAREE CUSTOM HTML ELEMENTS ACROSS FRAMEWORKS Assistive tools rely on W3C Standards like WCAG which in-turn rely on the HTML standard JS Frameworks are powerful for developers quick to prototype Power can be a bad thing when standards are not applied Depends on the framework, some frameworks have Aria calls built into their components, some make more use of native elements. So I don't have to worry about HTML then? Well its JS yes, but your still injecting HTML code and that is what needs to be accessible. AFICIONADO.TECH 26
  27. 27. ANGULAR AND A11Y Google 27
  28. 28. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH ANGULAR Allows you to create custom HTML elements so you MUST add aria tags to establish role, state, properties Has ngAria initiative that enables common ARIA attributes to be easily used on elements Mature framework community so lots of forum and group discussions around best practice and examples of techniques Has community focused people on the core team who are experienced and passionate about a11y more mature framework which means there are heaps of examples on the web Uses Google Material Design approach 28
  29. 29. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH ANGULAR AND ARIA Angular has ngAria this includes a basic set of Aria tags that can be called and used in components angular.module('myApp', ['ngAria'])... <md-checkbox ng-disabled="disabled"></md-checkbox> is read by the browser as: <md-checkbox disabled aria-disabled="true"></md-checkbox> 29
  30. 30. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH NGMODEL THE HEAT LIFTER FOR NGARIA ngModel calls to ngAria which will check the element for role or type of checkbox, radio, range or textbox, ngAria adds tabIndex and then will dynamically bind and update ARIA attributes: • aria-checked • aria-valuemin • aria-valuemax • aria-valuenow • aria-invalid • aria-required • aria-readonly • aria-disabled 30
  31. 31. EMBER AND A11Y Seperate Ember Sponsor Companies 31
  32. 32. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH EMBER Accessibilty was always an after thought for the ember leadership though recently more of a focus has been taken Allows you to create custom HTML elements so you MUST add aria tags to establish role, state, properties Has role built into native components which can be modified Growing a11y initiative to create a toolset for accessibility to be added into projects https://github.com/ember- a11y 32
  33. 33. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH EMBER AND THE VIRTUAL DOM Ember talks to a Virtual DOM DOM updates are batch processed so this means there can be a lag Data bindings and transitions mean whats on the screen is not always what the Screen Reader sees as focus is lost Need to add specific calls in components for tabindex, ariaRole, aria-label, keyDown use ember-a11y replace {{outlet}} with {{focusing outlet}} 33
  34. 34. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH EMBER BUTTON Ember JS Code App.HappyButtonComponent = Ember.Component.extend({ tagName: 'happy-button', nameBinding: 'happy.name', attributeBindings: ['label:aria-label', 'tabindex'], label: ‘Are you Happy?”, tabindex: -1, ariaRole: ‘button', click: function(event) { alert('Yes'); }, keyDown: function(event) { if (event.keyCode == 13 || event.keyCode == 32) { this.click(event); } } }); 34 Rendered HTML <happy-button aria-label=“Are you Happy?" tabindex="1" role="button"> Are you Happy? </happy-button>
  35. 35. REACT AND A11Y Facebook 35
  36. 36. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH REACT Allows you to create custom HTML elements so you MUST add aria tags to establish role, state, properties Has a native Accessibilty API must be implemented in parent view Advance set of Aria features built into components Has react a11y tool to perform an automated a11y check Mature framework that has a focused a11y initiative Growing developer tool set and tutorials around web accessibility 36
  37. 37. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH REACT ACCESSIBILITY API React Accessibility API is set on the parent component and it will then traverse down the tree to its children <View accessible={true} style={{ flex: 1, backgroundColor: 'white', }}> <Text>Some example text here</Text> <Text>Some more engaging text here</Text> <AdsManagerStatus accessibilityLabel={'Status ' + this.props.status} status={this.props.status} /> </View> 37
  38. 38. POLYMER AND A11Y Google 38
  39. 39. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH POLYMER Allows you to create custom HTML elements so you MUST add aria tags to establish role, state, properties Has common Aria calls and design concepts built into the native framework elements Uses Google Material Design approach Early Framework and works on web components concepts not yet implemented across all browsers had to create a similar experience for Screen Readers 39
  40. 40. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH DOM, SHADOW DOM AND SHADY DOM Polymer allows you to take use of the Shadow DOM Because Shadow DOM is not available on all platforms Polymer allows use of Shady CSS Polyfills and Shady DOM However you can talk straight to the DOM and ignore the others tabindex [focus] and role needs to be mapped to the custom element to avoid differences in Shadow DOM implementation Do not use IDs in your shadow DOM this is great for CSS not so good for accessibility focus and binding 40
  41. 41. THE KEY PROBLEMS ARE INHERENT IN THEM ALL NO ONE FRAMEWORK IS QUEEN FRAMEWORK REALITY 41
  42. 42. CC BY-NC-SA @AIMEE_MAREE ALL FRAMEWORKS SAME PROBLEMS Lack of use of Native HTML elements Enforce use of custom elements and DOM declarations Loss of Focus order due to DOM restructuring Overuse of Aria tags - Developer must understand expected element interactions Accessibility as an after thought AFICIONADO.TECH 42
  43. 43. UNDERSTANDING AND LOVING WEB STANDARDS THE PRESENTER 43
  44. 44. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH WAG, WAI-ARIA, W3C AND STANDARDS WCAG: guidelines for accessibility standards Wai-Aria: set of roles, properties and states that define accessibility API tokens to the DOM, when not present Understand HTML elements and where to use them Validate your code with W3C HTML and CSS, understand needed compromise/workarounds for browsers Check code with automated accessibility test [at least] 44
  45. 45. CREATE A 1-TO-1 MAPPING BETWEEN ARIA ROLES AND CUSTOM ELEMENTS. Web Component Best Practice GURU 45
  46. 46. TOP TIPS FOR CUSTOM ELEMENTS HOMEWORK 46
  47. 47. CC BY-NC-SA @AIMEE_MAREE ACCESSIBILITY ISSUES FOR CUSTOM ELEMENTS Custom HTML elements have NO state, roles, properties The developer states this information by using Aria tags Overuse of Aria tags, use of too many Aria tags when communicating purpose of the element Control of tab focus for keyboard, problematic when rebuilding DOM needs deep level of focus Misuse of Aria-live states to announce dynamic areas to Screen readers leads to a very verbose experience AFICIONADO.TECH 47
  48. 48. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH ACCEPTING THE KEY PITFALLS More precise approach taken to ensure Aria roles and states are communicated to the DOM Working with Shadow DOM, Shady DOM, Virtual DOM, Polyfills Sometimes its impossible to use Native HTML Elements Sometimes your retrofitting a11y into an older project Focus on leading, bleeding edge technology means accessibility is an after thought and retro fitted 48
  49. 49. SOME QUICK CODE APPROACHES TO PRACTICE FUTURE YOU 49
  50. 50. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH SOME CODE APPROACH TAKEAWAYS Native HTML elements where possible When using custom elements YOU declare their ROLE, STATE and Properties functions to the DOM Focus CSS class to highlight elements when receive tabfocus Manage focus order check and check across ScreenReaders Use landmarks correctly and never apply on the body 50
  51. 51. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH CODE APPROACHES…. CONTINUED Create custom checkboxes with role=checkbox, aria- checked, aria-disabled, aria-required, and wire up keyboard events Convey the interaction of the element, if its a button is the interaction expected a space or enter key press? Add focus ONLY when not using link type HTML elements tabindex=“0” or “1” do not increment tabindex=“0” will mean that your custom element follows the order of structure that the DOM sees 51
  52. 52. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH REMEMBER USE NATIVE WHEN POSSIBLE <!-- INCORRECT --> <DIV (CLICK)="NAVIGATETOABOUT()" CLASS="BTN"> ABOUT </DIV> <!-- CORRECT --> <A ROUTERLINK="ABOUT" CLASS="BTN"> ABOUT </A> Span and DIV are non semantic elements avoid them where it makes sense to use the Native HTML element 52
  53. 53. ACCESSIBILITY ENGINEERING IS NOT SIMPLE AND ITS A MOVING TARGET! Reality Calling 53
  54. 54. GO FORTH AND MAKE THE WEB MORE ACCESSIBLE… The Presenter 54
  55. 55. 55

×