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

1. ACCESSIBILITY - 101
@AIMEE_MAREE
JAVASCRIPT FRAMEWORKS AND
1

2. GOVERNMENT MANDATED
POLICY AND ITS A HUMAN
RIGHT!
Legal Perspective
2

3. ENABLING AND ENHANCING
ACCESS FOR ALL TYPES OF
PEOPLE AND ASSISTIVE TOOLS
Human Perspective
3

4. ACCESSIBILE CODE CATERS
FOR A WIDER AUDIENCE AND A
LARGER USER BASE
The Client
4

5. WE INCLUDED TABINDEX=“1”
AND ROLE=“NAVIGATION" ON
ALL THE MENU LINKS!
Developer Perspective
5

6. 6

7. THE MODERN DAY WEB IS
BUILT ON JAVASCRIPT
FRAMEWORKS
World Wide Web
7

8. JAVASCRIPT CAN’T BE MADE
ACCESSIBLE?
Myth
8

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. 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. 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. CC BY-NC-SA @AIMEE_MAREE AFICIONADO.TECH
ACCESSIBILITY STACK
12
ACCESSIBILITY API
ASSISTIVE TECHNOLOGY
BROWSER
OPERATING SYSTEM

13. THE DOM HAS ACCESSIBILITY
API TREE BUT JAVASCRIPT
DOES NOT SPEAK TO IT
Some Truth to the Myth
13

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. I WRITE JAVASCRIPT NOT
HTML!
JavaScript
15

16. YES, BUT, THE END USER SEES
THE HTML, SCREENREADERS
USE THE ACCESSIBILITY API
ScreenReader
16

17. THIS IS WHY ARIA WAS BORN
W3C Standards
17

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. SO WHATS IMPORTANT TO THE
ACCESSIBILITY API?
Audience
19

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. 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. 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. 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. 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. SO WHAT DOES THIS MEAN
FOR CUSTOM ELEMENTS /
WEB COMPONENTS
sensible developer
25

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. ANGULAR AND A11Y
Google
27

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. 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. 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. EMBER AND A11Y
Seperate Ember Sponsor Companies
31

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. 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. 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. REACT AND A11Y
Facebook
35

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. 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. POLYMER AND A11Y
Google
38

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. 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. THE KEY PROBLEMS ARE
INHERENT IN THEM ALL NO
ONE FRAMEWORK IS QUEEN
FRAMEWORK REALITY
41

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. UNDERSTANDING AND LOVING
WEB STANDARDS
THE PRESENTER
43

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. CREATE A 1-TO-1 MAPPING
BETWEEN ARIA ROLES AND
CUSTOM ELEMENTS.
Web Component Best Practice GURU
45

46. TOP TIPS FOR CUSTOM
ELEMENTS
HOMEWORK
46

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. 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. SOME QUICK CODE
APPROACHES TO PRACTICE
FUTURE YOU
49

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. 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. 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. ACCESSIBILITY ENGINEERING
IS NOT SIMPLE AND ITS A
MOVING TARGET!
Reality Calling
53

54. GO FORTH AND MAKE THE WEB
MORE ACCESSIBLE…
The Presenter
54

55. 55