Making Polymer Elements Accessible

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