Date post: | 16-Jul-2015 |
Category: |
Software |
Upload: | aliceboxhall |
View: | 852 times |
Download: | 5 times |
Making Polymer Elements Accessible
+Alice Boxhall@sundress
<link rel="import" href="my-widget.html" />
<my-widget></my-widget>
Can your element be used with the
keyboard alone?
image CC-BY from baldiri on flickr
Design keyboard interactions
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
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
Manage focus
Manage focus
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
Subtitle
Implementing keyboard interactions
<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
Can your element be used with assistive technology?
Assistive technology
Do your custom elements provide semantic information? Role State Value Name
Do all elements and images have meaningful text alternatives?
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>
Semantics
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>
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>
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
Can users understand everything without relying on color?
Communicating via color
Is there sufficient contrast?
Using Accessibility Developer ToolsTesting color contrast
Contrast ratioWith color suggestions
Is the moving or flashing content in your elements
stoppable and safe?
Six characteristics of complete Web Components1. 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
Learn more
Accessible Web Components article polymer-project.org/articles/accessible-web-components.html
+Alice Boxhall@sundress
Thank you!
#marklar