1. Making Polymer
Elements
Accessible
+Alice Boxhall
@sundress

2. <link rel="import" href="my-widget.html" />
<my-widget></my-widget>

5. Can your element be
used with the
keyboard alone?

6. image CC-BY from baldiri on flickr
Design keyboard
interactions

7. Carrie had a motorcycle
accident and no longer has
use of her right arm; she
can use a mouse with her
left hand but finds it fiddly
and awkward.
image CC-BY-SA from patdavid on flickr
Personas

8. Combo BoxCombo Box
← / → move the caret within the edit field
Alt+↑/↓ opens / closes the list
↑/↓
moves focus up and down the list. As
focus moves inside the dropdown list,
the edit field is updated.
PgUp /
PgDown
selects the next/previous pages item
depending on the lists size.
w3.org/TR/wai-aria-practices/#combobox
Design keyboard interactions

9. Manage focus

10. Manage focus

11. tabIndex="0" element will be in the “natural” tab
order (defined by the DOM order)
tabIndex="-1" element will be programmatically
focusable, but not in the tab order.
* tabIndex > 0 element in a manual tab order
* Do not use in web components* Do not use in web components
Manage focus: tabIndex

12. Subtitle
Implementing keyboard
interactions

13. <polymer-element name="my-element" on-keydown="{{keydownAction}}"
tabIndex="0" >
<template>
...
</template>
<script>
Polymer({
keydownAction: function(keyboardEvent) {
...
},
});
</script>
</polymer-element>
my-element.html
use on-keydown to listen for
keyboard events from the page
implement your keyboard
event handling here

14. Can your element be used
with assistive technology?

15. Assistive technology
Do your custom elements provide semantic
information?
Role
State
Value
Name
Do all elements and images have meaningful
text alternatives?

16. Semantics
<gmail-window>
<gmail-sidebar>...</gmail-sidebar>
<gmail-actionbar>
<gmail-buttongroup>
<button is="gmail-button" icon="return" action="goBack
tip="Back to Search Results">
</gmail-buttongroup>
<gmail-buttongroup>
<button is="gmail-button" icon="archive" action="archive" tip="Archive">
<button is="gmail-button" icon="stop" action="markAsSpam" tip="Report spam">
<button is="gmail-button" icon="trash" action="delete" tip="Delete">
</gmail-buttongroup>
<gmail-buttongroup>...</gmail-buttongroup>
</gmail-actionbar>
<gmail-inbox>...</gmail-inbox>
</gmail-window>

17. Semantics

18. WAI-ARIA
<div role="button">Click me</div>
<div role="checkbox" aria-selected="true" ></div>
<div aria-label="settings" aria-role="menu" class="menu">
</div>

19. Adding semantics: ARIA
<x-slider min="1" max="5" value="2.5">
</x-slider>
<!-- x-slider element template adds ARIA role and attributes which are visible in
light DOM -->
<x-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</x-slider>

20. Text alternatives
•Ensure any information
communicated visually is also
available textually
•Provide alt text for all images
· alt="" will cause the image to be
skipped by the screen reader

21. Can users understand
everything without
relying on color?

22. Communicating via color

23. Is there sufficient contrast?

24. Using Accessibility Developer Tools
Testing color contrast
Contrast ratio
With color suggestions

25. Is the moving or flashing
content in your elements
stoppable and safe?

26. Six characteristics of
complete Web Components
1. available via keyboard
2. works with assistive technology
3. works without color
4. has sufficient contrast
5. works without sound
6. safe or stoppable moving/flashing content

27. Learn more
Accessible Web Components article
polymer-project.org/articles/
accessible-web-components.html

28. +Alice Boxhall
@sundress
Thank you!
#marklar