Polymer: making Web Components accessible Google Developers English Russian

Polymer: making Web Components accessibleYouTube↗ IA↗(long shot)
Science & Technology 27.6K views 195 likes 11 dislikes 13 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

My name's Alice.

Меня зовут Элис.

And this is Making Polymer Elements Accessible.

Это курс «Обеспечение доступности элементов Polymer».

So you've gotten the Web Components

Итак, вы столкнулись с ошибкой в Web Components

bug and downloaded Polymer.

и загрузили программу Polymer.

And you've made your first custom element.

И вы создали свой первый пользовательский элемент.

Отлично.

Today I'm here to talk a bit about how

Сегодня я расскажу, как сделать

we can make sure our brand new custom

наши новые пользовательские элементы

elements can be used by everyone.

доступными каждому пользователю.

Right now, built-in HTML5 elements

Сейчас встроенные элементы HTML5

work well for accessibility.

отличаются высокой доступностью.

This didn't happen by accident.

Это не случайно.

Browser developers follow published standards

Разработчики браузеров следуют принятым стандартам

for ensuring the accessibility of these elements

для обеспечения доступности этих элементов

and add keyboard handling, styling,

и добавляют использование клавиатуры, стиль

and semantic information to make sure

и сведения о семантике, чтобы

that all users can use them.

все пользователи могли с ними работать.

When we're creating new components for the web,

При создании новых веб-компонентов

ideally they should be using the same standards.

лучше всего использовать те же стандарты.

They, too, should be accessible to all users.

Они также должны быть доступны всем пользователям.

When we talk about all users, there

Говоря обо всех пользователях, мы

are several broad classes of impairment

имеем в виду людей с различными

that we consider-- visual impairment, which

нарушениями – расстройствами зрения, от

could range from poor color vision through low vision,

неверного цветовосприятия до полной или

to no vision; hearing issues, whether a user is

частичной потери зрения; слабослышащих и глухих,

deaf, hard-of-hearing, or simply can't use the device's

пользователей, а также тех, кто не может использовать аудиоустройства;

audio output; mobility or motor impairment,

людей с нарушениями опорно-двигательного аппарата,

whether temporary or permanent, such as a broken arm, RSI,

временными или постоянными , такими как переломы, растяжения

or long-term motor disorder; other impairments which

или длительные расстройства моторики; другими нарушениями,

encompass a very broad range of issues, including

включающими различные заболевания, в том числе

cognitive impairments like dyslexia, ADHD, brain injury,

когнитивные расстройства, такие как дислексия, СДВГ,

and other impairments like learning disorder, epilepsy,

травмы головного мозга и др., а также невозможность обучения,

and vestibular disorder.

эпилепсия и вестибулярные нарушения.

The first thing we want to look at

Сначала проверим, можно ли работать

is whether an element can be used with the keyboard alone.

с элементом только с помощью клавиатуры.

This is the first step ensuring it

Это первый шаг в обеспечении доступности элементов

can be used by users of assistive technology

для пользователей вспомогательных технологий

on all platforms.

на всех платформах.

But also important for users with motor impairments,

Кроме того, это важно для пользователей с нарушениями опорно-двигательного

or injuries, or any desktop users who

аппарата, травмами или тех, кто не в состоянии

can't or won't use a mouse right now.

в данный момент использовать мышь.

During your user-experience design,

Проектируя интерфейс, подумайте, как

think about how you would use your element with a keyboard

бы вы использовали свой элемент только с помощью

alone and figure out a consistent set

клавиатуры и обдумайте возможные способы

of keyboard interactions.

взаимодействия с ней.

To help with the design process, consider

Для облегчения разработки создайте возможности для

including physical impairments in your user experience

использования людьми с различными физическими

недостатками.

If you're creating an element which mimics an existing

При создании элемента, который имитирует

element in some way, consider copying

уже существующий, скопируйте его

the way it handles keyboard interactions to provide

взаимодействия с клавиатурой для обеспечения

единообразия.

Try using a native element with the keyboard

Попробуйте использовать исходный элемент с помощью клавиатуры

and find out what already works.

и найдите оптимальный вариант.

Chances are, you've been using the keyboard sometimes anyway.

Скорее всего, вы все равно иногда используете клавиатуру.

So you'll find it comes pretty naturally.

Вы поймете, что тут нет ничего сложного.

Later, we'll talk about ARIA, which

Далее мы поговорим о стандарте ARIA, позволяющем

allows you to specify additional semantics for your element.

указывать для элемента дополнительную семантику.

Once you've picked a semantic role,

После выбора семантической роли

you can use the ARIA design patents

можно использовать патенты разработок ARIA,

guide to get some extra advice on what

чтобы получить сведения о действиях с клавиатурой,

keyboard events to handle.

которые следует учесть.

The first step in actually implementing

Первым шагом при внедрении взаимодействия

keyboard interactions is to make sure the element can

с клавиатурой является обеспечение возможности фокусировки на

take keyboard focus.

элементе с помощью клавиатуры.

Unless you can actually focus on the element,

Если вы не сможете сфокусироваться на элементе,

it's not going to get any keyboard events.

то не сможете с ним работать с помощью клавиатуры.

Ensure you have a sensible focus target for your element.

Обеспечьте для элемента осязаемую цель фокусировки.

For a simple element like a button,

Для простого элемента, например, кнопки,

this will obviously just be the element itself.

это, естественно, будет сам элемент.

A complex element like a menu-- maybe one focused target

Для сложных элементов, таких как меню, это может быть одна цель

within the page, but then manage focus within itself.

на странице, затем фокус будет перемещен внутрь элемента.

So the active menu item always takes focus.

Поэтому фокус всегда направлен на активный элемент меню.

In this case you want to make sure

В этом случае убедитесь, что

that the menu items are programmatically focusable,

элементы меню фокусируются программно,

but not in the tab order itself.

а не в последовательности табуляции.

This is where an understanding of the nuances of the tabIndex

Здесь может пригодиться понимание различных

attribute is going to come in handy.

нюансов атрибута порядка перехода.

TabIndex can take one of three classes of values.

Порядок перехода может иметь один из трех классов значений.

When tabIndex is zero, the element

Если порядок перехода равен нулю, элемент

will be in the natural tab order which

будет иметь обычный порядок табуляции, заданный

is defined by the DOM order.

порядком DOM.

This is what you would use to make a custom

Вам это понадобится, чтобы создать пользовательский

element, such as a custom button, keyboard focusable.

элемент, например кнопку, фокусируемую с клавиатуры.

When tabIndex is negative, the element

Если порядок перехода отрицательный, элемент

will be programmatically focusable but not in the tab

будет фокусируем программно, но не в последовательности

табуляции.

This would be useful for something

Это удобно, например, для приведенного в качестве

like the menu example on the previous slide.

примера меню на предыдущем слайде.

The menu container element can manage

Элемент меню позволяет фокусироваться

setting focus to each individual menu item when appropriate.

на каждом отдельном элементе меню, если необходимо.

The tabIndex is greater than zero,

Если порядок табуляции больше нуля,

the element will be in a manual tab order.

элемент будет иметь заданный вручную порядок табуляции.

This makes no sense in the context of Web Components,

Для работы с веб-компонентами это бессмысленно,

since you essentially never know where your event-- your element

поскольку нельзя заранее знать, в каком месте страницы будет располагаться

will fall on the page.

ваше событие – элемент.

So now that you've spec'd out your keyboard interactions

После определения взаимодействий с клавиатурой

and made your element focusable, you'll

и обеспечения фокусируемости элементов, следует

need to implement the actual keyboard interactions.

внедрить фактическое взаимодействие с клавиатурой.

Luckily, there's an event handler for that.

Для этого существует обработчик событий.

You can add an on-key data attribute to your Polymer

К элементу Polymer можно добавить атрибут

element and add a method to handle the keyboard event,

данных кнопки и способ обработки события клавиатуры

checking for any key-press events you're interested in.

для проверки каждого необходимого нажатия кнопки.

Finally, make sure your keyboard interactions are discoverable,

Наконец, убедитесь, что действия с клавиатуры можно обнаружить,

especially if they're not using one of the standard patents.

особенно, если не используются стандартные патенты.

Tool tips or keyboard help overlays

Основными способами достижения этого

are common patterns for achieving this.

являются советы и справка для клавиатуры.

Once our keyboard interactions are working,

После настройки взаимодействий с клавиатуры

we're a good part of the way there already.

можно считать, что основная работа сделана.

Next, we need to take a look at whether our element can

Затем необходимо проверить, доступен ли элемент для

be used with assistive technology.

использования со вспомогательными технологиями.

The types of users who would use assistive technology

Типы пользователей вспомогательных технологий включают

range from users with visual impairments

пользователей с нарушениями зрения,

who might use screen readers or braille displays;

использующих экранные дикторы или Брайлевские дисплеи,

to users with cognitive impairments

пользователей с когнитивными нарушениями,

such as dyslexia, who might use a screen reader to augment

например дислексией, использующих экранные дикторы для тренировки

their reading ability; and users with motor impairments

чтения, и пользователей с нарушениями опорно-двигательного аппарата,

who need to use technologies like voice

которые используют такие функции, как голосовое управление

control to interact with their devices.

для взаимодействия с устройствами.

There are really only two parts to ensuring

Настроив доступность с клавиатуры, следует выполнить

that your element can be used with assistive technology,

только два пункта, чтобы обеспечить возможность использования

including screen readers, once you've addressed keyboard

элемента со вспомогательными технологиями, включая экранные

accessibility-- adding semantic information,

дикторы, – добавить семантические сведения,

including the element's role, state, value, and name,

в том числе роль, состояние, значение и имя элемента,

and making sure that all information conveyed

а также текстовое сопровождение всей визуально

visually has a text alternative.

передаваемой информации.

First, let's talk about semantics.

Сначала поговорим о семантике.

One of the great things about custom elements

Одним из важнейших отличий пользовательских элементов является

is that they make a mark-up look semantic again.

то, что они позволяют вновь сделать разметку семантической.

We can hide presentation logic inside the shadow DOM

Мы можем скрыть логику презентации в теневом DOM и

and use meaningful element names to create a readable DOM.

использовать понятные названия элементов для создания читаемого DOM.

However, assistive technology doesn't see those semantics.

Однако вспомогательные технологии не воспринимают такие семантики.

It still sees essentially DIV soup,

Они, как правило, видят набор элементов DIV,

unless you tell it about the semantics you want your element

пока вы не сообщите им необходимую семантику

элемента.

Assuming we're not extending built-in elements,

Предположим, мы не будем расширять встроенные элементы,

the way we tell assistive technology

поэтому сообщим вспомогательной технологии

about these additional semantics is

дополнительную семантику с помощью

using WAI-ARIA, or ARIA for short.

стандарта WAI-ARIA, или кратко ARIA.

ARIA is a specification defining support

Стандарт ARIA позволяет задавать характеристики

for accessible-rich web applications.

для активных веб-приложений.

It defines mock-up extensions implemented

Он определяет эскизы расширений, внедренные

as attributes and elements, which

в качестве атрибутов, и элементы, которые

can be used to provide additional information

можно использовать для предоставления информации

about the semantics of elements to assistive technologies

о семантике элементов вспомогательным технологиям,

like screen readers.

таким как экранные дикторы.

This is what using ARIA looks like in vanilla HTML5.

Так выглядит использование ARIA в базовом HTML5.

So we can use ARIA to add the semantic information

ARIA можно использовать для добавления семантики

we want to our custom elements.

к нашим пользовательским элементам.

This is a custom slider element which you can visually

Приведенный пользовательский слайдер имеет

see as a minimum value of one, a maximum value of five,

минимальное значение 1, максимальное значение 5

and a current value of 2.5.

и текущее значение 2,5.

Until we add the relevant ARIA attributes,

Пока соответствующие атрибуты ARIA не будут добавлены,

though, this element doesn't communicate any of these

элемент не будет осуществлять их передачу

to assistive technology.

вспомогательным технологиям.

We can add ARIA value attributes to tell assistive technology

Мы можем добавить атрибуты значения ARIA для сообщения

about the value of this element.

вспомогательным технологиям значения элемента.

Here we have added the attributes

Здесь мы добавили атрибуты для роли, а также

for role and current minimum and maximum values.

текущее минимальное и максимальное значение.

Finally, once all your semantics are in place,

Наконец, после установки всей семантики убедитесь,

make sure you always have text alternatives

что для любой другой передаваемой визуально

for any other information which is conveyed visually.

информации всегда есть текстовое сопровождение.

For example, if your custom button uses a settings icon,

Например, если для кнопки используется значок настроек,

make sure you give it a name of settings as well.

присвойте ему также и имя настроек.

And obviously make sure all of your images

А также убедитесь, что все изображения

have an alt attribute.

имеют альтернативный атрибут.

Even if you want them to be skipped

Даже если вспомогательные технологии

by assistive technology.

должны их пропустить.

Assistive technology will try to come up with alternative text

При отсутствии альтернативного текста вспомогательные

if you don't provide it.

технологии определят его самостоятельно.

And often it'll pick the file name.

И часто при этом будет выбрано имя файла.

So provide an empty alt attribute

Поэтому укажите пустой атрибут,

if you want the image to be visible to assistive

чтобы изображение было доступно для вспомогательных

технологий.

We also need to make sure that users

Мы также хотим сделать элемент доступным для

of any form of color blindness can use our element.

пользователей с любой формой нарушения цветовосприятия.

Firstly, let's make sure that we're not

Прежде всего, убедимся, что какая-либо информация

communicating anything with color alone.

не передается с помощью только одного цвета.

Color shouldn't be used as the only means

Цвет не должен быть единственным средством передачи

of conveying information such as indicating a status,

информации, например указания состояния, уведомлении о

prompting for a response, or distinguishing a visual custom

необходимости ответа или различения визуального

элемента.

Here we have the Chromium dashboard

Здесь приведена панель мониторинга Chromium, которая,

which, as well as being a Polymer application,

являясь приложением Polymer, содержит сведения

gives the status for each new web

о состоянии каждой новой функции веб-платформы,

platform feature being developed or shipped in Chromium.

разрабатываемой или поставляемой в Chromium.

Since the color dots next to the stakeholders

Поскольку цветовые точки рядом с участниками

are meant to convey information, the developers

должны сообщать информацию, разработчики добавили

added a tool tip here which appears

сюда подсказку, которая отображается при наведении

when you hover over the name giving the same information.

курсора на имя и предоставляет ту же информацию.

We also need to make sure that there's always

Мы также должны обеспечить постоянный достаточный

sufficient contrast between text or icons and background color.

контраст между текстом или значками и цветом фона.

This is important for users with low vision

Это важно для пользователей со слабым зрением,

who might have trouble reading low-contrast text,

у которых могут быть сложности с чтением текста низкого контраста,

color blind users in the case where we're

пользователей с нарушениями цветового восприятия в случае,

using two different colors next to each other,

если рядом используются различные цвета, а также

and any user using a mobile phone

при использовании мобильных устройств при ярком

or device in bright sunlight.

солнечном свете.

Any text content displayed in your element

Любой текст, отображаемый в элементе,

should at least meet the minimum contrast ratio of 4.5 to one.

должен иметь минимальный коэффициент контрастности 4,5 к 1.

You can audit your element for sufficient contrast using

Степень контрастности элемента можно проверить с помощью

the accessibility developer tools extension, which

инструментов разработчиков доступности, которые даже

even provides suggested foreground and background color

предлагают варианты цветов текста и фона, если текст

pairs if it finds low-contrast text.

имеет низкую степень контрастности.

Lastly, make sure any moving or flashing content

Затем убедитесь, что мигание или движение любого

is stoppable and safe.

компонента безопасно и может быть отключено.

If you have any fancy, slidey parallax-y transitions,

При наличии анимационных, смещающихся или многоуровневых переходов

make sure you have a way to turn those off.

убедитесь, что есть возможность их отключения.

They can be a real pain for people with vestibular disorder

Они могут причинять неудобства людям с вестибулярными

who may experience motion sickness

нарушениями, которые могут испытывать симптомы

symptoms while using them.

укачивания при их использовании.

And if you have any flashing content-- please don't tell me

При наличии мигающих элементов не

you're re-implementing the blink tag--

встраивайте мигающий тег – сначала убедитесь,

make sure it meets the criteria for safe flashing content

что он соответствует безопасной частоте

of having a flash frequency of three times per second,

мигания 3 раза в секунду

или менее.

So let's recap and summarize everything into a handy list.

Теперь давайте кратко перечислим наиболее важные моменты.

Remember, every built-in HTML5 element

Помните, что каждый встроенный элемент HTML5

will have all of these properties, at least

будет иметь все эти свойства, как минимум

in a mainstream browser.

в основном браузере.

So we should make sure the custom elements do, too.

Поэтому убедитесь, что пользовательские элементы также обладают этими свойствами.

Make sure that your element can be used with a keyboard alone.

Убедитесь, что элемент можно использовать только с помощью клавиатуры.

Make sure that it works with assistive technology.

Убедитесь, что он работает со вспомогательными технологиями.

Make sure that it doesn't rely on color

Убедитесь, что цвет не используется для

to communicate important information.

передачи важной информации.

Make sure all text and icons have sufficient contrast

Убедитесь, что текст и значки имеют достаточный коэффициент

ratio with the background.

контрастности по отношению к фону.

Make sure that it works without sound.

Убедитесь, что элемент функционирует без звука.

I didn't cover this, but make sure

Я об этом не упоминала, но убедитесь, что все аудио

any video or audio elements have the appropriate text

и видео элементы имеют соответствующее текстовое

сопровождение.

And make sure you aren't relying on audio cues

Также не используйте звуковые эффекты для сообщения пользователям

to prompt for actions.

о необходимости тех или иных действий.

And finally, make sure any moving or flashing content

Наконец, убедитесь, что мигание или движение любых элементов

is configurable and safe.

безопасно и может быть отключено.

Please check out our article on the Polymer project website,

В статьях на веб-сайте проекта Polymer

which goes into more detail on much of what I've covered here

приводится дополнительная информация по нерассмотренным

as well as providing links to many other useful resources.

здесь вопросам, а также ссылки на другие полезные ресурсы.

Remember, we're creating new components for the web.

Помните, что мы создаем новые веб-компоненты.

We have an amazing opportunity to make

И у нас есть отличная возможность сделать работу

sure the web is accessible for everyone.

в Интернете доступной каждому.

Давайте ею воспользуемся.

Similar videos:

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201467% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201460% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201457% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201456% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201442% match

Google I/O 2014 - Polymer and Web Components change everything you know about Web development
Google for Developers
142.7K views 1.2K likes 22 dislikes 25 Jun 201439% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201439% match

DevBytes: Web Components - Overview
Google for Developers
25K views 248 likes 14 dislikes 25 Jun 201439% match

DevBytes: Web Components - HTML Imports
Google for Developers
21.2K views 152 likes 9 dislikes 17 Dec 201433% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201433% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201431% match

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201431% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201431% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201430% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201430% match

Introduction to the Physical Web (100 days of Google Dev)
Google for Developers
89.6K views 702 likes 16 dislikes 18 Jul 201529% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201429% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201429% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201428% match

Google I/O 2015 - Polymer and modern web APIs: In production at Google scale
Google for Developers
92.3K views 875 likes 20 dislikes 29 May 201528% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201428% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201428% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201427% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201427% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201427% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201427% match

Faster Loading Images with WebP
Google for Developers
24.6K views 133 likes 13 dislikes 25 Jun 201427% match

DevBytes: Web Components - Shadow Dom
Google for Developers
30.5K views 302 likes 10 dislikes 16 Oct 201426% match

Designing for Android Wear
Google for Developers
26K views 115 likes 5 dislikes 25 Jun 201425% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201425% match

Settings Privacy About Contact Donate